@easy-editor/plugin-dashboard 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { DESIGNER_EVENT, DragObjectType, getConvertedExtraKey } from '@easy-editor/core';
-import { observable, computed, action } from 'mobx';
+import { DESIGNER_EVENT, createEventBus, makeEventsHandler, getConvertedExtraKey, DragObjectType } from '@easy-editor/core';
+import { action, observable, computed } from 'mobx';
 
 function _applyDecs2311(e, t, n, r, o, i) {
   var a,
@@ -53,12 +53,12 @@ function _applyDecs2311(e, t, n, r, o, i) {
           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");
+        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),
+      var T = b(h[O], "A decorator", "be", true),
         z = n ? h[O - 1] : void 0,
         A = {},
         H = {
@@ -67,7 +67,7 @@ function _applyDecs2311(e, t, n, r, o, i) {
           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);
+            b(t, "An initializer", "be", true), 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 = {
@@ -91,8 +91,8 @@ function _applyDecs2311(e, t, n, r, o, i) {
   }
   function w(e) {
     return m(e, d, {
-      configurable: !0,
-      enumerable: !0,
+      configurable: true,
+      enumerable: true,
       value: a
     });
   }
@@ -138,7 +138,7 @@ 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");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -149,10 +149,144 @@ function _toPropertyKey(t) {
   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;
+let _initProto$1;
+let AlignType = /*#__PURE__*/function (AlignType) {
+  AlignType["LEFT"] = "left";
+  AlignType["RIGHT"] = "right";
+  AlignType["TOP"] = "top";
+  AlignType["BOTTOM"] = "bottom";
+  AlignType["HORIZONTAL_CENTER"] = "horizontalCenter";
+  AlignType["VERTICAL_CENTER"] = "verticalCenter";
+  return AlignType;
+}({});
+let DistributeType = /*#__PURE__*/function (DistributeType) {
+  DistributeType["HORIZONTAL"] = "horizontal";
+  DistributeType["VERTICAL"] = "vertical";
+  return DistributeType;
+}({});
+class Alignment {
+  static {
+    [_initProto$1] = _applyDecs2311(this, [], [[action, 2, "align"], [action, 2, "distribute"]]).e;
+  }
+  constructor(designer) {
+    this.designer = designer;
+  }
+  get selection() {
+    return this.designer.selection;
+  }
+  getSelectedNodes() {
+    return this.selection.getTopNodes(false).filter(node => node && !node.isRoot);
+  }
+  calculateBoundingBox(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 {
+      minX,
+      minY,
+      maxX,
+      maxY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+  }
+  updateNodePosition(node, x, y) {
+    if (node.isGroup) {
+      const nodeRect = node.getDashboardRect();
+      const deltaX = x - nodeRect.x;
+      const deltaY = y - nodeRect.y;
+      for (const child of node.getAllNodesInGroup()) {
+        const childRect = child.getDashboardRect();
+        child.updateDashboardRect({
+          x: childRect.x + deltaX,
+          y: childRect.y + deltaY
+        });
+      }
+    } else {
+      node.updateDashboardRect({
+        x,
+        y
+      });
+    }
+  }
+  align(type) {
+    const nodes = this.getSelectedNodes();
+    if (nodes.length < 2) return false;
+    const box = this.calculateBoundingBox(nodes);
+    for (const node of nodes) {
+      const rect = node.getDashboardRect();
+      let newX = rect.x;
+      let newY = rect.y;
+      switch (type) {
+        case AlignType.LEFT:
+          newX = box.minX;
+          break;
+        case AlignType.RIGHT:
+          newX = box.maxX - rect.width;
+          break;
+        case AlignType.TOP:
+          newY = box.minY;
+          break;
+        case AlignType.BOTTOM:
+          newY = box.maxY - rect.height;
+          break;
+        case AlignType.HORIZONTAL_CENTER:
+          newX = box.minX + (box.width - rect.width) / 2;
+          break;
+        case AlignType.VERTICAL_CENTER:
+          newY = box.minY + (box.height - rect.height) / 2;
+          break;
+      }
+      this.updateNodePosition(node, newX, newY);
+    }
+    return true;
+  }
+  distribute(type) {
+    const nodes = this.getSelectedNodes();
+    if (nodes.length < 3) return false;
+    const box = this.calculateBoundingBox(nodes);
+    if (type === DistributeType.HORIZONTAL) {
+      const sorted = [...nodes].sort((a, b) => a.getDashboardRect().x - b.getDashboardRect().x);
+      const totalWidth = sorted.reduce((sum, n) => sum + n.getDashboardRect().width, 0);
+      const gap = (box.width - totalWidth) / (nodes.length - 1);
+      let currentX = box.minX;
+      for (const node of sorted) {
+        const rect = node.getDashboardRect();
+        this.updateNodePosition(node, currentX, rect.y);
+        currentX += rect.width + gap;
+      }
+    } else {
+      const sorted = [...nodes].sort((a, b) => a.getDashboardRect().y - b.getDashboardRect().y);
+      const totalHeight = sorted.reduce((sum, n) => sum + n.getDashboardRect().height, 0);
+      const gap = (box.height - totalHeight) / (nodes.length - 1);
+      let currentY = box.minY;
+      for (const node of sorted) {
+        const rect = node.getDashboardRect();
+        this.updateNodePosition(node, rect.x, currentY);
+        currentY += rect.height + gap;
+      }
+    }
+    return true;
+  }
+  alignLeft = (_initProto$1(this), () => this.align(AlignType.LEFT));
+  alignRight = () => this.align(AlignType.RIGHT);
+  alignTop = () => this.align(AlignType.TOP);
+  alignBottom = () => this.align(AlignType.BOTTOM);
+  alignHorizontalCenter = () => this.align(AlignType.HORIZONTAL_CENTER);
+  alignVerticalCenter = () => this.align(AlignType.VERTICAL_CENTER);
+  distributeHorizontal = () => this.distribute(DistributeType.HORIZONTAL);
+  distributeVertical = () => this.distribute(DistributeType.VERTICAL);
+}
+
+let _initProto, _init_enabled, _init_extra_enabled, _init_guideLines, _init_extra_guideLines, _init_nodeLineMap, _init_extra_nodeLineMap, _init_adsorptionLines, _init_extra_adsorptionLines, _init_adsorptionLinesWithDistance, _init_extra_adsorptionLinesWithDistance, _init_userGuideLines, _init_extra_userGuideLines;
 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;
+    [_init_enabled, _init_extra_enabled, _init_guideLines, _init_extra_guideLines, _init_nodeLineMap, _init_extra_nodeLineMap, _init_adsorptionLines, _init_extra_adsorptionLines, _init_adsorptionLinesWithDistance, _init_extra_adsorptionLinesWithDistance, _init_userGuideLines, _init_extra_userGuideLines, _initProto] = _applyDecs2311(this, [], [[observable, 1, "enabled"], [[observable, observable.shallow], 17, "guideLines"], [computed, 3, "guideLinesMap"], [[observable, observable.shallow], 17, "nodeLineMap"], [observable, 1, "adsorptionLines"], [[observable, observable.shallow], 17, "adsorptionLinesWithDistance"], [[observable, observable.shallow], 17, "userGuideLines"], [action, 2, "addGuideLine"], [action, 2, "removeGuideLine"], [action, 2, "updateGuideLine"], [computed, 3, "userGuideLinesMap"], [action, 2, "addUserGuideLine"], [action, 2, "updateUserGuideLine"], [action, 2, "removeUserGuideLine"], [action, 2, "clearUserGuideLines"], [action, 2, "calculateGuideLineInfo"], [action, 2, "getAdsorptionPosition"], [action, 2, "resetAdsorptionLines"]]).e;
   }
   #A = (_initProto(this), _init_enabled(this, true));
   get enabled() {
@@ -195,6 +329,21 @@ class GuideLine {
   set adsorptionLines(v) {
     this.#D = v;
   }
+  #E = (_init_extra_adsorptionLines(this), _init_adsorptionLinesWithDistance(this, []));
+  get adsorptionLinesWithDistance() {
+    return this.#E;
+  }
+  set adsorptionLinesWithDistance(v) {
+    this.#E = v;
+  }
+  #F = (_init_extra_adsorptionLinesWithDistance(this), _init_userGuideLines(this, []));
+  get userGuideLines() {
+    return this.#F;
+  }
+  set userGuideLines(v) {
+    this.#F = v;
+  }
+  userGuideLineIdCounter = (_init_extra_userGuideLines(this), 0);
   get currentDocument() {
     return this.designer.currentDocument;
   }
@@ -250,6 +399,41 @@ class GuideLine {
       this.guideLines[index] = guideLine;
     }
   }
+  get userGuideLinesMap() {
+    const result = Object.groupBy(this.userGuideLines, item => item.type);
+    return {
+      verticalLinesMap: new Map(result.vertical?.map(item => [item.position, item])),
+      horizontalLinesMap: new Map(result.horizontal?.map(item => [item.position, item]))
+    };
+  }
+  addUserGuideLine(type, position) {
+    const id = `user-guideline-${++this.userGuideLineIdCounter}`;
+    const guideLine = {
+      id,
+      type,
+      position: Math.round(position)
+    };
+    this.userGuideLines.push(guideLine);
+    return guideLine;
+  }
+  updateUserGuideLine(id, position) {
+    const index = this.userGuideLines.findIndex(item => item.id === id);
+    if (index !== -1) {
+      this.userGuideLines[index] = {
+        ...this.userGuideLines[index],
+        position: Math.round(position)
+      };
+    }
+  }
+  removeUserGuideLine(id) {
+    const index = this.userGuideLines.findIndex(item => item.id === id);
+    if (index !== -1) {
+      this.userGuideLines.splice(index, 1);
+    }
+  }
+  clearUserGuideLines() {
+    this.userGuideLines = [];
+  }
   calculateGuideLineInfo() {
     if (!this.enabled) return;
     const verticalLinesMap = new Map();
@@ -286,7 +470,8 @@ class GuideLine {
     this.nodeLineMap.verticalLinesMap = verticalLinesMap;
     this.nodeLineMap.horizontalLinesMap = horizontalLinesMap;
   }
-  adsorptionSize = (_init_extra_adsorptionLines(this), 10);
+  adsorptionSize = 10;
+  maxDistanceDisplay = 300;
   getAdsorptionPosition(rect, adsorption) {
     if (typeof adsorption === 'number') {
       adsorption = [adsorption];
@@ -298,42 +483,63 @@ class GuideLine {
     const currentHorizontalLine = [rect.top, rect.top + rect.height / 2, rect.bottom];
     currentVerticalLine.forEach((item, index) => {
       let minDistance = Number.POSITIVE_INFINITY;
+      let closestPosition = null;
       this.nodeLineMap.verticalLinesMap.forEach((_, pos) => {
         const distance = Math.abs(item - pos);
         if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
-          minDistance = pos;
+          minDistance = distance;
+          closestPosition = pos;
         }
       });
       this.guideLinesMap.verticalLinesMap.forEach((_, pos) => {
         const distance = Math.abs(item - pos);
         if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
-          minDistance = pos;
+          minDistance = distance;
+          closestPosition = pos;
+        }
+      });
+      this.userGuideLinesMap.verticalLinesMap.forEach((_, pos) => {
+        const distance = Math.abs(item - pos);
+        if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = distance;
+          closestPosition = pos;
         }
       });
-      if (minDistance !== Number.POSITIVE_INFINITY && adsorptionVerticalLines.findIndex(item => item.position === minDistance) === -1) {
+      if (closestPosition !== null && adsorptionVerticalLines.findIndex(item => item.position === closestPosition) === -1) {
         adsorptionVerticalLines.push({
           adsorption: index,
-          position: minDistance
+          position: closestPosition
         });
       }
     });
     currentHorizontalLine.forEach((item, index) => {
-      let minDistance = -1;
+      let minDistance = Number.POSITIVE_INFINITY;
+      let closestPosition = null;
       this.nodeLineMap.horizontalLinesMap.forEach((_, pos) => {
-        if (Math.abs(item - pos) < this.adsorptionSize) {
-          minDistance = pos;
+        const distance = Math.abs(item - pos);
+        if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = distance;
+          closestPosition = pos;
         }
       });
       this.guideLinesMap.horizontalLinesMap.forEach((_, pos) => {
         const distance = Math.abs(item - pos);
-        if (distance < this.adsorptionSize && distance < minDistance) {
-          minDistance = pos;
+        if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = distance;
+          closestPosition = pos;
+        }
+      });
+      this.userGuideLinesMap.horizontalLinesMap.forEach((_, pos) => {
+        const distance = Math.abs(item - pos);
+        if (distance !== 0 && distance < this.adsorptionSize && distance < minDistance) {
+          minDistance = distance;
+          closestPosition = pos;
         }
       });
-      if (minDistance !== -1 && adsorptionHorizontalLines.findIndex(item => item.position === minDistance) === -1) {
+      if (closestPosition !== null && adsorptionHorizontalLines.findIndex(item => item.position === closestPosition) === -1) {
         adsorptionHorizontalLines.push({
           adsorption: index,
-          position: minDistance
+          position: closestPosition
         });
       }
     });
@@ -342,9 +548,32 @@ class GuideLine {
       x: undefined,
       y: undefined
     };
+    const linesWithDistance = [];
     if (isAdsorption) {
       adsorptionVerticalLines.forEach(item => this.adsorptionLines.verticalLines.add(item.position));
       adsorptionHorizontalLines.forEach(item => this.adsorptionLines.horizontalLines.add(item.position));
+      for (const line of adsorptionVerticalLines) {
+        const lineInfo = {
+          position: line.position,
+          type: 'vertical'
+        };
+        const segments = this.calculateVerticalLineSegments(rect, line.position);
+        if (segments.length > 0) {
+          lineInfo.distanceSegments = segments;
+        }
+        linesWithDistance.push(lineInfo);
+      }
+      for (const line of adsorptionHorizontalLines) {
+        const lineInfo = {
+          position: line.position,
+          type: 'horizontal'
+        };
+        const segments = this.calculateHorizontalLineSegments(rect, line.position);
+        if (segments.length > 0) {
+          lineInfo.distanceSegments = segments;
+        }
+        linesWithDistance.push(lineInfo);
+      }
       if (adsorptionVerticalLines.length > 0) {
         if (adsorption) {
           adsorb.x = adsorptionVerticalLines.find(item => adsorption.includes(item.adsorption));
@@ -362,6 +591,7 @@ class GuideLine {
         }
       }
     }
+    this.adsorptionLinesWithDistance = linesWithDistance;
     return {
       isAdsorption,
       adsorb
@@ -370,6 +600,250 @@ class GuideLine {
   resetAdsorptionLines() {
     this.adsorptionLines.verticalLines.clear();
     this.adsorptionLines.horizontalLines.clear();
+    this.adsorptionLinesWithDistance = [];
+  }
+  calculateVerticalLineSegments(rect, linePosition) {
+    const segments = [];
+    const selected = this.getSelectedNodeIds();
+    const nodes = [...this.currentDocument.nodesMap.values()].filter(node => !node.hidden && !selected.includes(node.id) && !node.isRoot && !node.isGroup);
+    let nearestAbove = null;
+    let nearestBelow = null;
+    for (const node of nodes) {
+      const nodeRect = node.getDashboardRect();
+      if (!nodeRect) continue;
+      const nodeLines = [nodeRect.left, nodeRect.left + nodeRect.width / 2, nodeRect.right];
+      const isOnLine = nodeLines.some(pos => Math.abs(pos - linePosition) < 1);
+      if (!isOnLine) continue;
+      if (nodeRect.bottom <= rect.top) {
+        const distance = rect.top - nodeRect.bottom;
+        if (!nearestAbove || distance < nearestAbove.distance) {
+          nearestAbove = {
+            distance,
+            nodeRect
+          };
+        }
+      } else if (nodeRect.top >= rect.bottom) {
+        const distance = nodeRect.top - rect.bottom;
+        if (!nearestBelow || distance < nearestBelow.distance) {
+          nearestBelow = {
+            distance,
+            nodeRect
+          };
+        }
+      }
+    }
+    if (nearestAbove && this.isDistanceInDisplayRange(nearestAbove.distance)) {
+      segments.push({
+        distance: Math.round(nearestAbove.distance),
+        start: nearestAbove.nodeRect.bottom,
+        end: rect.top,
+        fixedPos: linePosition,
+        labelPos: nearestAbove.nodeRect.bottom + nearestAbove.distance / 2
+      });
+    }
+    if (nearestBelow && this.isDistanceInDisplayRange(nearestBelow.distance)) {
+      segments.push({
+        distance: Math.round(nearestBelow.distance),
+        start: rect.bottom,
+        end: nearestBelow.nodeRect.top,
+        fixedPos: linePosition,
+        labelPos: rect.bottom + nearestBelow.distance / 2
+      });
+    }
+    return segments;
+  }
+  calculateHorizontalLineSegments(rect, linePosition) {
+    const segments = [];
+    const selected = this.getSelectedNodeIds();
+    const nodes = [...this.currentDocument.nodesMap.values()].filter(node => !node.hidden && !selected.includes(node.id) && !node.isRoot && !node.isGroup);
+    let nearestLeft = null;
+    let nearestRight = null;
+    for (const node of nodes) {
+      const nodeRect = node.getDashboardRect();
+      if (!nodeRect) continue;
+      const nodeLines = [nodeRect.top, nodeRect.top + nodeRect.height / 2, nodeRect.bottom];
+      const isOnLine = nodeLines.some(pos => Math.abs(pos - linePosition) < 1);
+      if (!isOnLine) continue;
+      if (nodeRect.right <= rect.left) {
+        const distance = rect.left - nodeRect.right;
+        if (!nearestLeft || distance < nearestLeft.distance) {
+          nearestLeft = {
+            distance,
+            nodeRect
+          };
+        }
+      } else if (nodeRect.left >= rect.right) {
+        const distance = nodeRect.left - rect.right;
+        if (!nearestRight || distance < nearestRight.distance) {
+          nearestRight = {
+            distance,
+            nodeRect
+          };
+        }
+      }
+    }
+    if (nearestLeft && this.isDistanceInDisplayRange(nearestLeft.distance)) {
+      segments.push({
+        distance: Math.round(nearestLeft.distance),
+        start: nearestLeft.nodeRect.right,
+        end: rect.left,
+        fixedPos: linePosition,
+        labelPos: nearestLeft.nodeRect.right + nearestLeft.distance / 2
+      });
+    }
+    if (nearestRight && this.isDistanceInDisplayRange(nearestRight.distance)) {
+      segments.push({
+        distance: Math.round(nearestRight.distance),
+        start: rect.right,
+        end: nearestRight.nodeRect.left,
+        fixedPos: linePosition,
+        labelPos: rect.right + nearestRight.distance / 2
+      });
+    }
+    return segments;
+  }
+  getSelectedNodeIds() {
+    const selected = [];
+    for (const node of this.designer.selection.getNodes()) {
+      if (node.isGroup) {
+        selected.push(...node.getAllNodesInGroup().map(n => n.id));
+      } else {
+        selected.push(node.id);
+      }
+    }
+    return selected;
+  }
+  isDistanceInDisplayRange(distance) {
+    return distance >= this.adsorptionSize && distance <= this.maxDistanceDisplay;
+  }
+}
+
+class MarqueeSelection {
+  emitter = createEventBus('MarqueeEngine');
+  isMarqueeSelecting = false;
+  enabled = true;
+  constructor(designer) {
+    this.designer = designer;
+  }
+  isSelecting() {
+    return this.isMarqueeSelecting;
+  }
+  from(shell, viewport, isClickOnNode) {
+    if (!shell) {
+      return () => {};
+    }
+    let startX = 0;
+    let startY = 0;
+    let isCtrlPressed = false;
+    const masterSensors = this.getMasterSensors();
+    const calculateRect = (x1, y1, x2, y2) => {
+      return {
+        x: Math.min(x1, x2),
+        y: Math.min(y1, y2),
+        width: Math.abs(x2 - x1),
+        height: Math.abs(y2 - y1)
+      };
+    };
+    const move = e => {
+      const localPoint = viewport.toLocalPoint(e);
+      const currentX = localPoint.clientX;
+      const currentY = localPoint.clientY;
+      const marqueeRect = calculateRect(startX, startY, currentX, currentY);
+      this.emitter.emit('marquee', {
+        startX,
+        startY,
+        currentX,
+        currentY,
+        rect: marqueeRect,
+        isCtrlPressed: e.ctrlKey || e.metaKey
+      });
+    };
+    const over = e => {
+      const handleEvents = makeEventsHandler(e, masterSensors);
+      handleEvents(doc => {
+        doc.removeEventListener('mousemove', move, true);
+        doc.removeEventListener('mouseup', over, true);
+      });
+      const localPoint = viewport.toLocalPoint(e);
+      const currentX = localPoint.clientX;
+      const currentY = localPoint.clientY;
+      const marqueeRect = calculateRect(startX, startY, currentX, currentY);
+      this.isMarqueeSelecting = false;
+      this.designer.detecting.enable = true;
+      this.emitter.emit('marqueeEnd', {
+        startX,
+        startY,
+        currentX,
+        currentY,
+        rect: marqueeRect,
+        isCtrlPressed: e.ctrlKey || e.metaKey
+      });
+    };
+    const mousedown = e => {
+      if (e.button !== 0) return;
+      if (!this.enabled) {
+        return;
+      }
+      const target = e.target;
+      if (isClickOnNode(target)) {
+        return;
+      }
+      e.preventDefault();
+      const localPoint = viewport.toLocalPoint(e);
+      startX = localPoint.clientX;
+      startY = localPoint.clientY;
+      isCtrlPressed = e.ctrlKey || e.metaKey;
+      const handleEvents = makeEventsHandler(e, masterSensors);
+      handleEvents(doc => {
+        doc.addEventListener('mousemove', move, true);
+        doc.addEventListener('mouseup', over, true);
+      });
+      this.emitter.emit('marqueeStart', {
+        startX,
+        startY,
+        currentX: startX,
+        currentY: startY,
+        rect: {
+          x: startX,
+          y: startY,
+          width: 0,
+          height: 0
+        },
+        isCtrlPressed
+      });
+      this.isMarqueeSelecting = true;
+      this.designer.detecting.enable = false;
+    };
+    shell.addEventListener('mousedown', mousedown);
+    return () => {
+      shell.removeEventListener('mousedown', mousedown);
+    };
+  }
+  onMarqueeStart(func) {
+    this.emitter.on('marqueeStart', func);
+    return () => {
+      this.emitter.off('marqueeStart', func);
+    };
+  }
+  onMarquee(func) {
+    this.emitter.on('marquee', func);
+    return () => {
+      this.emitter.off('marquee', func);
+    };
+  }
+  onMarqueeEnd(func) {
+    this.emitter.on('marqueeEnd', func);
+    return () => {
+      this.emitter.off('marqueeEnd', func);
+    };
+  }
+  getMasterSensors() {
+    return this.designer.project.documents.map(doc => {
+      if (doc.opened && doc.simulator?.sensorAvailable) {
+        return doc.simulator;
+      }
+      return null;
+    }).filter(Boolean);
   }
 }
 
@@ -521,10 +995,11 @@ const DashboardPlugin = options => {
             x: boxX = 0,
             y: boxY = 0
           } = startOffsetNodes.box;
+          const currentRect = new DOMRect(e.canvasX - boxX, e.canvasY - boxY, width, height);
           const {
             isAdsorption,
             adsorb
-          } = designer.guideline.getAdsorptionPosition(new DOMRect(e.canvasX - boxX, e.canvasY - boxY, width, height));
+          } = designer.guideline.getAdsorptionPosition(currentRect);
           let adsorbX = undefined;
           let adsorbY = undefined;
           if (isAdsorption) {
@@ -614,6 +1089,8 @@ const DashboardPlugin = options => {
         Node
       } = extendClass;
       let guideline = null;
+      let alignment = null;
+      let marqueeSelection = null;
       extend('Designer', {
         guideline: {
           get() {
@@ -622,6 +1099,22 @@ const DashboardPlugin = options => {
             }
             return guideline;
           }
+        },
+        alignment: {
+          get() {
+            if (!alignment) {
+              alignment = new Alignment(this);
+            }
+            return alignment;
+          }
+        },
+        marqueeSelection: {
+          get() {
+            if (!marqueeSelection) {
+              marqueeSelection = new MarqueeSelection(this);
+            }
+            return marqueeSelection;
+          }
         }
       });
       extend('Document', {
@@ -631,18 +1124,21 @@ const DashboardPlugin = options => {
             let nodeList = [];
             if (typeof nodeIdList[0] === 'string') {
               nodeList = nodeIdList.map(id => this.getNode(id));
+            } else {
+              nodeList = nodeIdList;
             }
+            nodeList = nodeList.filter(node => node && !node.isRoot);
+            if (nodeList.length === 0) return;
+            const targetParent = nodeList[0].parent || this.rootNode;
             const groupNode = this.createNode(groupInitSchema);
-            let maxZIndex = Number.POSITIVE_INFINITY;
+            let minIndex = Number.POSITIVE_INFINITY;
             for (const node of nodeList) {
-              if (node.index < maxZIndex) {
-                maxZIndex = node.index;
-              }
-              if (node && !node.isRoot) {
-                this.migrateNode(node, groupNode);
+              if (node.index < minIndex) {
+                minIndex = node.index;
               }
+              this.migrateNode(node, groupNode);
             }
-            this.rootNode?.insert(groupNode, maxZIndex);
+            targetParent?.insert(groupNode, minIndex);
             return groupNode;
           }
         },
@@ -655,11 +1151,12 @@ const DashboardPlugin = options => {
               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);
-              }
+            const parent = groupNode.parent;
+            if (!parent) return;
+            groupNode.index;
+            const nodes = [...groupNode.childrenNodes];
+            for (let i = 0; i < nodes.length; i++) {
+              this.migrateNode(nodes[i], parent);
             }
             this.removeNode(groupNode);
           }
@@ -880,4 +1377,4 @@ const calculateDashboardRectBox = nodes => {
   return new DOMRect(minX, minY, maxX - minX, maxY - minY);
 };
 
-export { DashboardPlugin as default };
+export { AlignType, Alignment, DistributeType, GuideLine, DashboardPlugin as default, updateNodeRect, updateNodeRectByDOM };