@easy-editor/plugin-dashboard 0.0.17 → 1.0.0

package/dist/esm/index.js

@@ -1,915 +0,0 @@
-import { DESIGNER_EVENT, DragObjectType, getConvertedExtraKey } from '@easy-editor/core';
-import { observable, computed, action } from 'mobx';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-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 = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    style: {
-      position: 'relative',
-      width: '100%',
-      height: '100%'
-    },
-    children: 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;
-      const {
-        viewport
-      } = simulator;
-      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 => {
-        if (!e.shell) return;
-        const {
-          dragObject
-        } = e;
-        const shellRect = simulator.computeComponentInstanceRect(e.shell);
-        if (dragObject && dragObject.type === DragObjectType.NodeData) {
-          startOffsetNodeData.x = (e.globalX - shellRect?.left) / viewport.scale;
-          startOffsetNodeData.y = (e.globalY - shellRect?.top) / viewport.scale;
-        }
-      });
-      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() {
-            const domNodes = this.getDOMNode();
-            return domNodes.length > 0 ? domNodes[0] : null;
-          }
-        },
-        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);
-          }
-        },
-        moveToLevel: {
-          value(level) {
-            if (level < -1 || level >= this.parent.childrenNodes.length) return;
-            if (this.index === level) return;
-            if (this.isRoot) return;
-            this.parent.insert(this, level);
-          }
-        },
-        levelTop: {
-          value() {
-            this.moveToLevel(0);
-          }
-        },
-        levelBottom: {
-          value() {
-            this.moveToLevel(-1);
-          }
-        },
-        levelUp: {
-          value() {
-            this.moveToLevel(this.index - 1);
-          }
-        },
-        levelDown: {
-          value() {
-            this.moveToLevel(this.index + 1);
-          }
-        }
-      });
-      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;
-          }
-        }
-      });
-      extend('Simulator', {
-        getDashboardStyle: {
-          get() {
-            return this.get('dashboardStyle') || {};
-          }
-        }
-      });
-    }
-  };
-};
-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 };
-//# sourceMappingURL=index.js.map