@tmagic/stage 1.0.0-rc.4 → 1.0.0-rc.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "^1.0.0-rc.4",
-    "@tmagic/schema": "^1.0.0-rc.4",
-    "@tmagic/utils": "^1.0.0-rc.4",
+    "@tmagic/core": "^1.0.0-rc.5",
+    "@tmagic/schema": "^1.0.0-rc.5",
+    "@tmagic/utils": "^1.0.0-rc.5",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.29.4",
@@ -44,5 +44,5 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
   },
-  "gitHead": "28d5ad4573a27fa240f5e7d0902d3368e8d936b6"
+  "gitHead": "d147b361d7e6123cda99c6ba68a2ac7e074be37f"
 }

package/src/StageDragResize.ts

@@ -23,7 +23,7 @@ import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { Offset, SortEventData, StageDragResizeConfig } from './types';
 import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
@@ -166,16 +166,12 @@ 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 || [];
-
+  private setElementGuidelines(nodes: HTMLElement[]) {
     this.elementGuidelines.forEach((node) => {
       node.remove();
     });
@@ -186,7 +182,7 @@ export default class StageDragResize extends EventEmitter {
 
       for (const node of nodes) {
         const { width, height } = node.getBoundingClientRect();
-        if (node === el) continue;
+        if (node === this.target) 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`;
@@ -358,7 +354,7 @@ export default class StageDragResize extends EventEmitter {
     const ghostEl = el.cloneNode(true) as HTMLElement;
     const { top, left } = getAbsolutePosition(el, getOffset(el));
     ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
-    ghostEl.style.zIndex = '5';
+    ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
     ghostEl.style.left = `${left}px`;
@@ -382,7 +378,7 @@ export default class StageDragResize extends EventEmitter {
       top: ${offset.top}px;
       width: ${width}px;
       height: ${height}px;
-      z-index: 9;
+      z-index: ${ZIndex.DRAG_EL};
     `;
 
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
@@ -404,6 +400,14 @@ export default class StageDragResize extends EventEmitter {
       moveableOptions = moveableOptions(this.core);
     }
 
+    const elementGuidelines: any = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
+
+    this.setElementGuidelines(elementGuidelines);
+
+    if (moveableOptions.elementGuidelines) {
+      delete moveableOptions.elementGuidelines;
+    }
+
     return {
       origin: false,
       rootContainer: this.core.container,

package/src/const.ts

@@ -42,6 +42,8 @@ export enum ZIndex {
   MASK = '99999',
   /** 选中的节点 */
   SELECTED_EL = '666',
+  GHOST_EL = '700',
+  DRAG_EL = '9',
 }
 
 /** 鼠标按键 */