From 67e2ba3825148282c2ba28df7fab06d3b2b9b102 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 31 May 2022 11:41:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage):=20=E5=A2=9E=E5=8A=A0=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/StageDragResize.ts | 42 ++++++++++++++++++---------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts
index 31ef96f6..2bc06d06 100644
--- a/packages/stage/src/StageDragResize.ts
+++ b/packages/stage/src/StageDragResize.ts
@@ -25,7 +25,7 @@ import MoveableHelper from 'moveable-helper';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
 import StageCore from './StageCore';
-import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
+import type { Offset, SortEventData, StageDragResizeConfig } from './types';
 import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
 
 /** 拖动状态 */
@@ -166,11 +166,38 @@ export default class StageDragResize extends EventEmitter {
 
     this.updateDragEl(el);
 
+    this.setElementGuidelines(el);
+
     this.moveableOptions = this.getOptions({
       target: this.dragEl,
     });
   }
 
+  private setElementGuidelines(el: HTMLElement) {
+    const nodes = el.parentElement?.children || [];
+
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+
+    if (this.mode === Mode.ABSOLUTE) {
+      const frame = document.createDocumentFragment();
+
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === el) continue;
+        const { left, top } = getOffset(node as HTMLElement);
+        const elementGuideline = document.createElement('div');
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
+      }
+
+      this.container.append(frame);
+    }
+  }
+
   private initMoveable() {
     this.moveable?.destroy();
 
@@ -288,19 +315,6 @@ export default class StageDragResize extends EventEmitter {
       });
   }
 
-  private getSnapElements(runtime: Runtime, el?: HTMLElement): HTMLElement[] {
-    const { renderer, mask } = this.core;
-    const getSnapElements =
-      runtime?.getSnapElements ||
-      (() => {
-        const doc = renderer.contentWindow?.document;
-        return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
-      });
-    return getSnapElements(el).filter(
-      (element) => element !== this.target && !this.target?.contains(element) && element !== mask.page,
-    );
-  }
-
   private sort(): void {
     if (!this.target || !this.ghostEl) throw new Error('未知错误');
     const { top } = this.ghostEl.getBoundingClientRect();