初始化代码

uniapp/uni-app/components/miniprogram_npm/widget-ui/element.ts

@@ -0,0 +1,172 @@
+
+import computeLayout from "./css-layout";
+import { getDefaultStyle, scalableStyles, layoutAffectedStyles } from "./style";
+
+type LayoutData = {
+  left: number,
+  top: number,
+  width: number,
+  height: number
+};
+
+type LayoutNode = {
+  id: number,
+  style: Object,
+  children: LayoutNode[],
+  layout?: LayoutData
+};
+
+let uuid = 0;
+
+class Element {
+  public static uuid(): number {
+    return uuid++;
+  }
+
+  public parent: Element | null = null;
+  public id: number = Element.uuid();
+  public style: { [key: string]: any } = {};
+  public computedStyle: { [key: string]: any } = {};
+  public lastComputedStyle: { [key: string]: any } = {};
+  public children: { [key: string]: Element } = {};
+  public layoutBox: LayoutData = { left: 0, top: 0, width: 0, height: 0 };
+
+  constructor(style: { [key: string]: any } = {}) {
+    // 拷贝一份，防止被外部逻辑修改
+    style = Object.assign(getDefaultStyle(), style);
+    this.computedStyle = Object.assign(getDefaultStyle(), style);
+    this.lastComputedStyle = Object.assign(getDefaultStyle(), style);
+
+    Object.keys(style).forEach(key => {
+      Object.defineProperty(this.style, key, {
+        configurable: true,
+        enumerable: true,
+        get: () => style[key],
+        set: (value: any) => {
+          if (value === style[key] || value === undefined) {
+            return;
+          }
+
+          this.lastComputedStyle = this.computedStyle[key]
+          style[key] = value
+          this.computedStyle[key] = value
+
+          // 如果设置的是一个可缩放的属性, 计算自己
+          if (scalableStyles.includes(key) && this.style.scale) {
+            this.computedStyle[key] = value * this.style.scale
+          }
+
+          // 如果设置的是 scale, 则把所有可缩放的属性计算
+          if (key === "scale") {
+            scalableStyles.forEach(prop => {
+              if (style[prop]) {
+                this.computedStyle[prop] = style[prop] * value
+              }
+            })
+          }
+
+          if (key === "hidden") {
+            if (value) {
+              layoutAffectedStyles.forEach((key: string) => {
+                this.computedStyle[key] = 0;
+              });
+            } else {
+              layoutAffectedStyles.forEach((key: string) => {
+                this.computedStyle[key] = this.lastComputedStyle[key];
+              });
+            }
+          }
+        }
+      })
+    })
+
+    if (this.style.scale) {
+      scalableStyles.forEach((key: string) => {
+        if (this.style[key]) {
+          const computedValue = this.style[key] * this.style.scale;
+          this.computedStyle[key] = computedValue;
+        }
+      });
+    }
+
+    if (style.hidden) {
+      layoutAffectedStyles.forEach((key: string) => {
+        this.computedStyle[key] = 0;
+      });
+    }
+  }
+
+  getAbsolutePosition(element: Element) {
+    if (!element) {
+      return this.getAbsolutePosition(this)
+    }
+
+    if (!element.parent) {
+      return {
+        left: 0,
+        top: 0
+      }
+    }
+
+    const {left, top} = this.getAbsolutePosition(element.parent)
+
+    return {
+      left: left + element.layoutBox.left,
+      top: top + element.layoutBox.top
+    }
+  }
+
+  public add(element: Element) {
+    element.parent = this;
+    this.children[element.id] = element;
+  }
+
+  public remove(element?: Element) {
+    // 删除自己
+    if (!element) {
+      Object.keys(this.children).forEach(id => {
+        const child = this.children[id]
+        child.remove()
+        delete this.children[id]
+      })
+    } else if (this.children[element.id]) {
+      // 是自己的子节点才删除
+      element.remove()
+      delete this.children[element.id];
+    }
+  }
+
+  public getNodeTree(): LayoutNode {
+    return {
+      id: this.id,
+      style: this.computedStyle,
+      children: Object.keys(this.children).map((id: string) => {
+        const child = this.children[id];
+        return child.getNodeTree();
+      })
+    }
+  }
+
+  public applyLayout(layoutNode: LayoutNode) {
+    ["left", "top", "width", "height"].forEach((key: string) => {
+      if (layoutNode.layout && typeof layoutNode.layout[key] === "number") {
+        this.layoutBox[key] = layoutNode.layout[key];
+        if (this.parent && (key === "left" || key === "top")) {
+          this.layoutBox[key] += this.parent.layoutBox[key];
+        }
+      }
+    });
+
+    layoutNode.children.forEach((child: LayoutNode) => {
+      this.children[child.id].applyLayout(child);
+    });
+  }
+
+  layout() {
+    const nodeTree = this.getNodeTree();
+    computeLayout(nodeTree);
+    this.applyLayout(nodeTree);
+  }
+}
+
+export default Element;