@easy-editor/plugin-dashboard 0.0.1

package/dist/index.js

@@ -0,0 +1,870 @@
+import { DESIGNER_EVENT, DragObjectType, getConvertedExtraKey } from '@easy-editor/core';
+import { observable, computed, action } from 'mobx';
+
+function _applyDecs2311(e, t, n, r, o, i) {
+  var a,
+    c,
+    u,
+    s,
+    f,
+    l,
+    p,
+    d = Symbol.metadata || Symbol.for("Symbol.metadata"),
+    m = Object.defineProperty,
+    h = Object.create,
+    y = [h(null), h(null)],
+    v = t.length;
+  function g(t, n, r) {
+    return function (o, i) {
+      n && (i = o, o = e);
+      for (var a = 0; a < t.length; a++) i = t[a].apply(o, r ? [i] : []);
+      return r ? i : o;
+    };
+  }
+  function b(e, t, n, r) {
+    if ("function" != typeof e && (r || void 0 !== e)) throw new TypeError(t + " must " + (n || "be") + " a function" + (r ? "" : " or undefined"));
+    return e;
+  }
+  function applyDec(e, t, n, r, o, i, u, s, f, l, p) {
+    function d(e) {
+      if (!p(e)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h = [].concat(t[0]),
+      v = t[3],
+      w = !u,
+      D = 1 === o,
+      S = 3 === o,
+      j = 4 === o,
+      E = 2 === o;
+    function I(t, n, r) {
+      return function (o, i) {
+        return n && (i = o, o = e), r && r(o), P[t].call(o, i);
+      };
+    }
+    if (!w) {
+      var P = {},
+        k = [],
+        F = S ? "get" : j || D ? "set" : "value";
+      if (f ? (l || D ? P = {
+        get: _setFunctionName(function () {
+          return v(this);
+        }, r, "get"),
+        set: function (e) {
+          t[4](this, e);
+        }
+      } : P[F] = v, l || _setFunctionName(P[F], r, E ? "" : F)) : l || (P = Object.getOwnPropertyDescriptor(e, r)), !l && !f) {
+        if ((c = y[+s][r]) && 7 != (c ^ o)) throw Error("Decorating two elements with the same name (" + P[F].name + ") is not supported yet");
+        y[+s][r] = o < 3 ? 1 : o;
+      }
+    }
+    for (var N = e, O = h.length - 1; O >= 0; O -= n ? 2 : 1) {
+      var T = b(h[O], "A decorator", "be", !0),
+        z = n ? h[O - 1] : void 0,
+        A = {},
+        H = {
+          kind: ["field", "accessor", "method", "getter", "setter", "class"][o],
+          name: r,
+          metadata: a,
+          addInitializer: function (e, t) {
+            if (e.v) throw new TypeError("attempted to call addInitializer after decoration was finished");
+            b(t, "An initializer", "be", !0), i.push(t);
+          }.bind(null, A)
+        };
+      if (w) c = T.call(z, N, H), A.v = 1, b(c, "class decorators", "return") && (N = c);else if (H.static = s, H.private = f, c = H.access = {
+        has: f ? p.bind() : function (e) {
+          return r in e;
+        }
+      }, j || (c.get = f ? E ? function (e) {
+        return d(e), P.value;
+      } : I("get", 0, d) : function (e) {
+        return e[r];
+      }), E || S || (c.set = f ? I("set", 0, d) : function (e, t) {
+        e[r] = t;
+      }), N = T.call(z, D ? {
+        get: P.get,
+        set: P.set
+      } : P[F], H), A.v = 1, D) {
+        if ("object" == typeof N && N) (c = b(N.get, "accessor.get")) && (P.get = c), (c = b(N.set, "accessor.set")) && (P.set = c), (c = b(N.init, "accessor.init")) && k.unshift(c);else if (void 0 !== N) throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined");
+      } else b(N, (l ? "field" : "method") + " decorators", "return") && (l ? k.unshift(N) : P[F] = N);
+    }
+    return o < 2 && u.push(g(k, s, 1), g(i, s, 0)), l || w || (f ? D ? u.splice(-1, 0, I("get", s), I("set", s)) : u.push(E ? P[F] : b.call.bind(P[F])) : m(e, r, P)), N;
+  }
+  function w(e) {
+    return m(e, d, {
+      configurable: !0,
+      enumerable: !0,
+      value: a
+    });
+  }
+  return a = h(null == a ? null : a), f = [], l = function (e) {
+    e && f.push(g(e));
+  }, p = function (t, r) {
+    for (var i = 0; i < n.length; i++) {
+      var a = n[i],
+        c = a[1],
+        l = 7 & c;
+      if ((8 & c) == t && !l == r) {
+        var p = a[2],
+          d = !!a[3],
+          m = 16 & c;
+        applyDec(t ? e : e.prototype, a, m, d ? "#" + p : _toPropertyKey(p), l, l < 2 ? [] : t ? s = s || [] : u = u || [], f, !!t, d, r, t && d ? function (t) {
+          return _checkInRHS(t) === e;
+        } : o);
+      }
+    }
+  }, p(8, 0), p(0, 0), p(8, 1), p(0, 1), l(u), l(s), c = f, v || w(e), {
+    e: c,
+    get c() {
+      var n = [];
+      return v && [w(e = applyDec(e, [t], r, e.name, 5, n)), g(n, 1)];
+    }
+  };
+}
+function _checkInRHS(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? typeof e : "null"));
+  return e;
+}
+function _setFunctionName(e, t, n) {
+  "symbol" == typeof t && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", {
+      configurable: !0,
+      value: n ? n + " " + t : t
+    });
+  } catch (e) {}
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+let _initProto, _init_enabled, _init_extra_enabled, _init_guideLines, _init_extra_guideLines, _init_nodeLineMap, _init_extra_nodeLineMap, _init_adsorptionLines, _init_extra_adsorptionLines;
+class GuideLine {
+  static {
+    [_init_enabled, _init_extra_enabled, _init_guideLines, _init_extra_guideLines, _init_nodeLineMap, _init_extra_nodeLineMap, _init_adsorptionLines, _init_extra_adsorptionLines, _initProto] = _applyDecs2311(this, [], [[observable, 1, "enabled"], [[observable, observable.shallow], 17, "guideLines"], [computed, 3, "guideLinesMap"], [[observable, observable.shallow], 17, "nodeLineMap"], [observable, 1, "adsorptionLines"], [action, 2, "addGuideLine"], [action, 2, "removeGuideLine"], [action, 2, "updateGuideLine"], [action, 2, "calculateGuideLineInfo"], [action, 2, "getAdsorptionPosition"], [action, 2, "resetAdsorptionLines"]]).e;
+  }
+  #A = (_initProto(this), _init_enabled(this, true));
+  get enabled() {
+    return this.#A;
+  }
+  set enabled(v) {
+    this.#A = v;
+  }
+  #B = (_init_extra_enabled(this), _init_guideLines(this, []));
+  get guideLines() {
+    return this.#B;
+  }
+  set guideLines(v) {
+    this.#B = v;
+  }
+  get guideLinesMap() {
+    const result = Object.groupBy(this.guideLines, item => item.type);
+    return {
+      verticalLinesMap: new Map(result.vertical?.map(item => [item.position, item])),
+      horizontalLinesMap: new Map(result.horizontal?.map(item => [item.position, item]))
+    };
+  }
+  #C = (_init_extra_guideLines(this), _init_nodeLineMap(this, {
+    verticalLinesMap: new Map(),
+    horizontalLinesMap: new Map()
+  }));
+  get nodeLineMap() {
+    return this.#C;
+  }
+  set nodeLineMap(v) {
+    this.#C = v;
+  }
+  #D = (_init_extra_nodeLineMap(this), _init_adsorptionLines(this, {
+    verticalLines: new Set(),
+    horizontalLines: new Set()
+  }));
+  get adsorptionLines() {
+    return this.#D;
+  }
+  set adsorptionLines(v) {
+    this.#D = v;
+  }
+  get currentDocument() {
+    return this.designer.currentDocument;
+  }
+  constructor(designer) {
+    this.designer = designer;
+    this.designer.onEvent(DESIGNER_EVENT.VIEWPORT_MOUNT, ({
+      viewport
+    }) => {
+      this.addGuideLine({
+        id: 'viewport-vertical-left',
+        type: 'vertical',
+        position: 0
+      });
+      this.addGuideLine({
+        id: 'viewport-vertical-middle',
+        type: 'vertical',
+        position: viewport.width / 2
+      });
+      this.addGuideLine({
+        id: 'viewport-vertical-right',
+        type: 'vertical',
+        position: viewport.width
+      });
+      this.addGuideLine({
+        id: 'viewport-horizontal-top',
+        type: 'horizontal',
+        position: 0
+      });
+      this.addGuideLine({
+        id: 'viewport-horizontal-middle',
+        type: 'horizontal',
+        position: viewport.height / 2
+      });
+      this.addGuideLine({
+        id: 'viewport-horizontal-bottom',
+        type: 'horizontal',
+        position: viewport.height
+      });
+    });
+  }
+  addGuideLine(guideLine) {
+    this.guideLines.push(guideLine);
+  }
+  removeGuideLine(id) {
+    const index = this.guideLines.findIndex(item => item.id === id);
+    if (index !== -1) {
+      this.guideLines.splice(index, 1);
+    }
+  }
+  updateGuideLine(id, guideLine) {
+    const index = this.guideLines.findIndex(item => item.id === id);
+    if (index !== -1) {
+      this.guideLines[index] = guideLine;
+    }
+  }
+  calculateGuideLineInfo() {
+    if (!this.enabled) return;
+    const verticalLinesMap = new Map();
+    const horizontalLinesMap = new Map();
+    const nodes = [...this.currentDocument.nodesMap.values()];
+    const selected = [];
+    for (const node of this.designer.selection.getNodes()) {
+      if (node.isGroup) {
+        selected.push(...node.getAllNodesInGroup().map(node => node.id));
+      } else {
+        selected.push(node.id);
+      }
+    }
+    nodes.filter(node => !node.hidden).forEach(node => {
+      if (selected.includes(node.id) || node.isRoot || node.isGroup) return;
+      const nodeRect = node.getDashboardRect();
+      const verticalNodeLines = [nodeRect.left, nodeRect.left + nodeRect.width / 2, nodeRect.right];
+      const horizontalNodeLines = [nodeRect.top, nodeRect.top + nodeRect.height / 2, nodeRect.bottom];
+      for (const line of verticalNodeLines) {
+        const position = Math.round(line);
+        verticalLinesMap.set(position, {
+          type: 'vertical',
+          position
+        });
+      }
+      for (const line of horizontalNodeLines) {
+        const position = Math.round(line);
+        horizontalLinesMap.set(position, {
+          type: 'horizontal',
+          position
+        });
+      }
+    });
+    this.nodeLineMap.verticalLinesMap = verticalLinesMap;
+    this.nodeLineMap.horizontalLinesMap = horizontalLinesMap;
+  }
+  adsorptionSize = (_init_extra_adsorptionLines(this), 10);
+  getAdsorptionPosition(rect, adsorption) {
+    if (typeof adsorption === 'number') {
+      adsorption = [adsorption];
+    }
+    this.resetAdsorptionLines();
+    const adsorptionVerticalLines = [];
+    const adsorptionHorizontalLines = [];
+    const currentVerticalLine = [rect.left, rect.left + rect.width / 2, rect.right];
+    const currentHorizontalLine = [rect.top, rect.top + rect.height / 2, rect.bottom];
+    currentVerticalLine.forEach((item, index) => {
+      let minDistance = Number.POSITIVE_INFINITY;
+      this.nodeLineMap.verticalLinesMap.forEach((_, pos) => {
+        const distance = Math.abs(item - pos);
+        if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = pos;
+        }
+      });
+      this.guideLinesMap.verticalLinesMap.forEach((_, pos) => {
+        const distance = Math.abs(item - pos);
+        if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = pos;
+        }
+      });
+      if (minDistance !== Number.POSITIVE_INFINITY && adsorptionVerticalLines.findIndex(item => item.position === minDistance) === -1) {
+        adsorptionVerticalLines.push({
+          adsorption: index,
+          position: minDistance
+        });
+      }
+    });
+    currentHorizontalLine.forEach((item, index) => {
+      let minDistance = -1;
+      this.nodeLineMap.horizontalLinesMap.forEach((_, pos) => {
+        if (Math.abs(item - pos) < this.adsorptionSize) {
+          minDistance = pos;
+        }
+      });
+      this.guideLinesMap.horizontalLinesMap.forEach((_, pos) => {
+        const distance = Math.abs(item - pos);
+        if (distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = pos;
+        }
+      });
+      if (minDistance !== -1 && adsorptionHorizontalLines.findIndex(item => item.position === minDistance) === -1) {
+        adsorptionHorizontalLines.push({
+          adsorption: index,
+          position: minDistance
+        });
+      }
+    });
+    const isAdsorption = adsorptionVerticalLines.length > 0 || adsorptionHorizontalLines.length > 0;
+    const adsorb = {
+      x: undefined,
+      y: undefined
+    };
+    if (isAdsorption) {
+      adsorptionVerticalLines.forEach(item => this.adsorptionLines.verticalLines.add(item.position));
+      adsorptionHorizontalLines.forEach(item => this.adsorptionLines.horizontalLines.add(item.position));
+      if (adsorptionVerticalLines.length > 0) {
+        if (adsorption) {
+          adsorb.x = adsorptionVerticalLines.find(item => adsorption.includes(item.adsorption));
+        } else {
+          const adsorptionPosition = Math.min(...adsorptionVerticalLines.map(item => item.position));
+          adsorb.x = adsorptionVerticalLines.find(item => item.position === adsorptionPosition);
+        }
+      }
+      if (adsorptionHorizontalLines.length > 0) {
+        if (adsorption) {
+          adsorb.y = adsorptionHorizontalLines.find(item => adsorption.includes(item.adsorption));
+        } else {
+          const adsorptionPosition = Math.min(...adsorptionHorizontalLines.map(item => item.position));
+          adsorb.y = adsorptionHorizontalLines.find(item => item.position === adsorptionPosition);
+        }
+      }
+    }
+    return {
+      isAdsorption,
+      adsorb
+    };
+  }
+  resetAdsorptionLines() {
+    this.adsorptionLines.verticalLines.clear();
+    this.adsorptionLines.horizontalLines.clear();
+  }
+}
+
+const Group = props => {
+  return (
+    /*#__PURE__*/
+    // TODO: className 需要调整，需要通用的方式
+    React.createElement("div", {
+      ref: props.ref,
+      className: "relative w-full h-full"
+    }, props?.children)
+  );
+};
+
+const configure = {
+  props: [
+  ],
+  component: {},
+  supports: {},
+  advanced: {
+    view: Group
+  }
+};
+
+const meta = {
+  componentName: 'Group',
+  title: '分组',
+  category: '内置',
+  configure
+};
+
+const updateNodeRect = (node, offset = {
+  x: 0,
+  y: 0
+}) => {
+  if (node.isGroup) {
+    const nodeRect = node.getDashboardRect();
+    const delta = {
+      x: offset.x - nodeRect.x,
+      y: offset.y - nodeRect.y
+    };
+    for (const childNode of node.getAllNodesInGroup()) {
+      const childRect = childNode.getDashboardRect();
+      childNode.updateDashboardRect({
+        x: childRect.x + delta.x,
+        y: childRect.y + delta.y
+      });
+    }
+  } else {
+    node.updateDashboardRect({
+      x: offset.x,
+      y: offset.y
+    });
+  }
+};
+const updateNodeRectByDOM = (node, offset = {
+  x: 0,
+  y: 0
+}) => {
+  const domNode = node.getDashboardContainer();
+  if (!domNode) {
+    return;
+  }
+  domNode.style.left = `${offset.x}px`;
+  domNode.style.top = `${offset.y}px`;
+};
+
+const defaultGroupSchema = {
+  componentName: 'Group',
+  title: '分组',
+  isGroup: true
+};
+const DashboardPlugin = options => {
+  const {
+    group = {}
+  } = options || {};
+  const {
+    schema: groupSchema = defaultGroupSchema
+  } = group || {};
+  return {
+    name: 'DashboardPlugin',
+    deps: [],
+    init(ctx) {
+      const {
+        designer,
+        simulator,
+        componentMetaManager,
+        hotkey,
+        logger
+      } = ctx;
+      hotkey.bind('ctrl+d', e => {
+        e.preventDefault();
+        logger.log('ctrl+d');
+      });
+      designer.onEvent(DESIGNER_EVENT.INIT, designer => {
+        designer.guideline = new GuideLine(designer);
+      });
+      componentMetaManager.createComponentMeta(meta);
+      simulator.addComponent('Group', Group);
+      const startOffsetNodeData = {
+        x: 0,
+        y: 0
+      };
+      designer.dragon.onDragstart(e => {
+        const {
+          dragObject
+        } = e;
+        if (dragObject && dragObject.type === DragObjectType.NodeData) {
+          startOffsetNodeData.x = e.globalX - e.target.offsetLeft;
+          startOffsetNodeData.y = e.globalY - e.target.offsetTop;
+        }
+      });
+      designer.onEvent(DESIGNER_EVENT.INSERT_NODE_BEFORE, e => {
+        const {
+          event
+        } = e;
+        const {
+          dragObject
+        } = event;
+        if (dragObject && dragObject.type === DragObjectType.NodeData) {
+          const nodeData = Array.isArray(dragObject.data) ? dragObject.data : [dragObject.data];
+          for (const schema of nodeData) {
+            if (!schema) continue;
+            if (!schema.$dashboard) {
+              schema.$dashboard = {};
+            }
+            if (!schema.$dashboard.rect) {
+              schema.$dashboard.rect = {};
+            }
+            schema.$dashboard.rect.x = event.canvasX - startOffsetNodeData.x;
+            schema.$dashboard.rect.y = event.canvasY - startOffsetNodeData.y;
+          }
+        }
+      });
+      let startNodes = {};
+      let startOffsetNodes = {};
+      let lastOffsetNodes = {};
+      designer.dragon.onDragstart(e => {
+        const {
+          dragObject
+        } = e;
+        if (dragObject && dragObject.type === DragObjectType.Node) {
+          designer.guideline.calculateGuideLineInfo();
+          for (const node of dragObject.nodes) {
+            if (!node) continue;
+            const rect = node.getDashboardRect();
+            if (rect) {
+              startNodes[node.id] = rect;
+              startOffsetNodes[node.id] = {
+                x: e.canvasX - rect.x,
+                y: e.canvasY - rect.y
+              };
+            }
+          }
+          const boxRect = calculateDashboardRectBox(dragObject.nodes);
+          if (boxRect) {
+            startNodes.box = boxRect;
+            startOffsetNodes.box = {
+              x: e.canvasX - boxRect.x,
+              y: e.canvasY - boxRect.y
+            };
+          }
+        }
+      });
+      designer.dragon.onDrag(e => {
+        const {
+          dragObject
+        } = e;
+        if (dragObject && dragObject.type === DragObjectType.Node) {
+          const {
+            x: boxStartX = 0,
+            y: boxStartY = 0,
+            width = 0,
+            height = 0
+          } = startNodes.box;
+          const {
+            x: boxX = 0,
+            y: boxY = 0
+          } = startOffsetNodes.box;
+          const {
+            isAdsorption,
+            adsorb
+          } = designer.guideline.getAdsorptionPosition(new DOMRect(e.canvasX - boxX, e.canvasY - boxY, width, height));
+          let adsorbX = undefined;
+          let adsorbY = undefined;
+          if (isAdsorption) {
+            if (adsorb.x) {
+              if (adsorb.x.adsorption === 0) {
+                adsorbX = adsorb.x.position;
+              } else if (adsorb.x.adsorption === 1) {
+                adsorbX = adsorb.x.position - width / 2;
+              } else if (adsorb.x.adsorption === 2) {
+                adsorbX = adsorb.x.position - width;
+              }
+            }
+            if (adsorb.y) {
+              if (adsorb.y.adsorption === 0) {
+                adsorbY = adsorb.y.position;
+              } else if (adsorb.y.adsorption === 1) {
+                adsorbY = adsorb.y.position - height / 2;
+              } else if (adsorb.y.adsorption === 2) {
+                adsorbY = adsorb.y.position - height;
+              }
+            }
+          }
+          for (const node of dragObject.nodes) {
+            if (!node) continue;
+            const {
+              x: nodeStartX = 0,
+              y: nodeStartY = 0
+            } = startNodes[node.id];
+            const {
+              x,
+              y
+            } = startOffsetNodes[node.id];
+            let offsetX = e.canvasX - x;
+            let offsetY = e.canvasY - y;
+            if (isAdsorption) {
+              offsetX = adsorbX ? adsorbX + nodeStartX - boxStartX : offsetX;
+              offsetY = adsorbY ? adsorbY + nodeStartY - boxStartY : offsetY;
+            }
+            updateNodeRectByDOM(node, {
+              x: offsetX,
+              y: offsetY
+            });
+            lastOffsetNodes[node.id] = {
+              x: offsetX,
+              y: offsetY
+            };
+          }
+        }
+      });
+      designer.dragon.onDragend(e => {
+        const {
+          dragObject,
+          esc
+        } = e;
+        if (dragObject && dragObject.type === DragObjectType.Node) {
+          for (const node of dragObject.nodes) {
+            if (!node) continue;
+            if (esc) {
+              simulator.rerender();
+            } else {
+              const {
+                x: lastX = 0,
+                y: lastY = 0
+              } = lastOffsetNodes[node.id];
+              updateNodeRect(node, {
+                x: lastX,
+                y: lastY
+              });
+            }
+          }
+          designer.guideline.resetAdsorptionLines();
+        }
+        startNodes = {};
+        startOffsetNodes = {};
+        lastOffsetNodes = {};
+      });
+    },
+    extend({
+      extendClass,
+      extend
+    }) {
+      const {
+        Node,
+        Designer
+      } = extendClass;
+      const originalInit = Designer.prototype.init;
+      extend('Designer', {
+        init: {
+          value() {
+            originalInit.call(this);
+            this.guideline = new GuideLine(this);
+          }
+        }
+      });
+      extend('Document', {
+        group: {
+          value(nodeIdList) {
+            if (nodeIdList.length === 0) return;
+            let nodeList = [];
+            if (typeof nodeIdList[0] === 'string') {
+              nodeList = nodeIdList.map(id => this.getNode(id));
+            }
+            const groupNode = this.createNode(groupSchema);
+            let maxZIndex = Number.POSITIVE_INFINITY;
+            for (const node of nodeList) {
+              if (node.index < maxZIndex) {
+                maxZIndex = node.index;
+              }
+              if (node && !node.isRoot) {
+                this.migrateNode(node, groupNode);
+              }
+            }
+            this.rootNode?.insert(groupNode, maxZIndex);
+            return groupNode;
+          }
+        },
+        ungroup: {
+          value(group) {
+            let groupNode;
+            if (typeof group === 'string') {
+              groupNode = this.getNode(group);
+            } else {
+              groupNode = group;
+            }
+            if (!groupNode || !groupNode.isGroup || !groupNode.children) return;
+            const nodes = groupNode.childrenNodes;
+            while (nodes.length > 0) {
+              if (groupNode.parent) {
+                this.migrateNode(nodes[0], groupNode.parent);
+              }
+            }
+            this.removeNode(groupNode);
+          }
+        }
+      });
+      const originalInitProps = Node.prototype.initBuiltinProps;
+      extend('Node', {
+        getDashboardContainer: {
+          value() {
+            return document.getElementById(`${this.id}-mask`);
+          }
+        },
+        getDashboardRect: {
+          value() {
+            if (!this.isGroup) {
+              const rect = this.getExtraPropValue('$dashboard.rect');
+              return new DOMRect(rect.x ?? 0, rect.y ?? 0, rect.width ?? 0, rect.height ?? 0);
+            }
+            let [minX, minY, maxX, maxY] = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
+            for (const child of this.childrenNodes) {
+              const childRect = child.getDashboardRect();
+              minX = Math.min(minX, childRect.x);
+              minY = Math.min(minY, childRect.y);
+              maxX = Math.max(maxX, childRect.x + childRect.width);
+              maxY = Math.max(maxY, childRect.y + childRect.height);
+            }
+            return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+          }
+        },
+        updateDashboardRect: {
+          value(rect) {
+            if (this.isGroup) return;
+            if (typeof rect.x === 'number') {
+              this.setExtraPropValue('$dashboard.rect.x', rect.x);
+            }
+            if (typeof rect.y === 'number') {
+              this.setExtraPropValue('$dashboard.rect.y', rect.y);
+            }
+            if (typeof rect.width === 'number') {
+              this.setExtraPropValue('$dashboard.rect.width', rect.width);
+            }
+            if (typeof rect.height === 'number') {
+              this.setExtraPropValue('$dashboard.rect.height', rect.height);
+            }
+          }
+        },
+        isGroup: {
+          get() {
+            return this.getExtraPropValue('isGroup');
+          }
+        },
+        getCurrentGroup: {
+          value() {
+            let parent = this.parent;
+            while (parent && !parent.isGroup) {
+              parent = parent.parent;
+            }
+            return parent;
+          }
+        },
+        getTopGroup: {
+          value() {
+            let parent = this.parent;
+            let topGroup = null;
+            while (parent) {
+              if (parent.isGroup) {
+                topGroup = parent;
+              }
+              parent = parent.parent;
+            }
+            return topGroup;
+          }
+        },
+        getAllGroups: {
+          value() {
+            const groups = [];
+            let parent = this.parent;
+            while (parent) {
+              if (parent.isGroup) {
+                groups.push(parent);
+              }
+              parent = parent.parent;
+            }
+            return groups;
+          }
+        },
+        getNodesInGroup: {
+          value() {
+            if (!this.isGroup) return [];
+            const nodes = [];
+            for (const node of this.childrenNodes) {
+              if (!node.isGroup) {
+                nodes.push(node);
+              }
+            }
+            return nodes;
+          }
+        },
+        getAllNodesInGroup: {
+          value() {
+            if (!this.isGroup) return [];
+            const nodes = [];
+            for (const node of this.childrenNodes) {
+              if (node.isGroup) {
+                nodes.push(...node.getAllNodesInGroup());
+              } else {
+                nodes.push(node);
+              }
+            }
+            return nodes;
+          }
+        },
+        initBuiltinProps: {
+          value() {
+            originalInitProps.call(this);
+            this.props.has(getConvertedExtraKey('isGroup')) || this.props.add(getConvertedExtraKey('isGroup'), false);
+          }
+        }
+      });
+      extend('OffsetObserver', {
+        computeRect: {
+          value() {
+            const {
+              node,
+              instance
+            } = this.nodeInstance;
+            const host = node.document?.simulator;
+            const rect = host.computeComponentInstanceRect(instance);
+            const {
+              viewport
+            } = node.document.simulator;
+            const local = viewport.toLocalPoint({
+              clientX: rect.x,
+              clientY: rect.y
+            });
+            return new DOMRect(local.clientX, local.clientY, rect.width / viewport.scale, rect.height / viewport.scale);
+          }
+        },
+        height: {
+          get() {
+            return this.isRoot ? this.viewport.height : this._height;
+          }
+        },
+        width: {
+          get() {
+            return this.isRoot ? this.viewport.width : this._width;
+          }
+        },
+        top: {
+          get() {
+            return this.isRoot ? 0 : this._top;
+          }
+        },
+        left: {
+          get() {
+            return this.isRoot ? 0 : this._left;
+          }
+        },
+        bottom: {
+          get() {
+            return this.isRoot ? this.viewport.height : this._bottom;
+          }
+        },
+        right: {
+          get() {
+            return this.isRoot ? this.viewport.width : this._right;
+          }
+        }
+      });
+    }
+  };
+};
+const calculateDashboardRectBox = nodes => {
+  let [minX, minY, maxX, maxY] = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
+  for (const node of nodes) {
+    const rect = node.getDashboardRect();
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+};
+
+export { DashboardPlugin as default };