@tmagic/stage 1.3.3 → 1.3.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.3",
+  "version": "1.3.4",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.3",
-    "@tmagic/schema": "1.3.3",
-    "@tmagic/utils": "1.3.3",
+    "@tmagic/core": "1.3.4",
+    "@tmagic/schema": "1.3.4",
+    "@tmagic/utils": "1.3.4",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",

package/src/ActionManager.ts

@@ -377,6 +377,7 @@ export default class ActionManager extends EventEmitter {
             targetEls: this.selectedElList,
             targetElIds: this.selectedElList?.map((item) => item.id),
             isMulti,
+            document: this.getRenderDocument(),
           };
           return options(cfg);
         }

package/src/MoveableOptionsManager.ts

@@ -19,7 +19,7 @@
 import EventEmitter from 'events';
 
 import { merge } from 'lodash-es';
-import { MoveableOptions } from 'moveable';
+import type { ElementGuidelineValueOption, MoveableOptions, MoveableRefType } from 'moveable';
 
 import { GuidesType, Mode } from './const';
 import MoveableActionsAble from './MoveableActionsAble';
@@ -88,16 +88,19 @@ export default class MoveableOptionsManager extends EventEmitter {
   /**
    * 设置有哪些元素要辅助对齐
    * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
-   * @param allElList 全部元素列表
    */
-  protected setElementGuidelines(selectedElList: HTMLElement[], allElList: Element[]): void {
+  protected setElementGuidelines(selectedElList: HTMLElement[]): void {
     this.elementGuidelines.forEach((node) => {
       node.remove();
     });
     this.elementGuidelines = [];
 
+    // 设置选中元素的周围元素，用于选中元素跟周围元素对齐辅助
+    const elementGuidelines: Array<ElementGuidelineValueOption | MoveableRefType<Element>> =
+      this.getCustomizeOptions()?.elementGuidelines || Array.from(selectedElList[0]?.parentElement?.children || []);
+
     if (this.mode === Mode.ABSOLUTE) {
-      this.container.append(this.createGuidelineElements(selectedElList, allElList));
+      this.container.append(this.createGuidelineElements(selectedElList, elementGuidelines));
     }
   }
 
@@ -224,13 +227,29 @@ export default class MoveableOptionsManager extends EventEmitter {
    * @param allElList 全部元素列表
    * @returns frame 辅助对齐元素集合的页面片
    */
-  private createGuidelineElements(selectedElList: HTMLElement[], allElList: Element[]): DocumentFragment {
+  private createGuidelineElements(
+    selectedElList: HTMLElement[],
+    allElList: Array<ElementGuidelineValueOption | MoveableRefType<Element>>,
+  ): DocumentFragment {
     const frame = globalThis.document.createDocumentFragment();
 
-    for (const node of allElList) {
-      const { width, height } = node.getBoundingClientRect();
-      if (this.isInElementList(node, selectedElList)) continue;
-      const { left, top } = getOffset(node);
+    for (const element of allElList) {
+      let node: MoveableRefType<Element> =
+        (element as ElementGuidelineValueOption).element || (element as MoveableRefType<Element>);
+
+      if (!node || typeof node === 'string') continue;
+
+      if (typeof node === 'function') {
+        node = node();
+      }
+
+      if (this.isInElementList(node as Element, selectedElList)) continue;
+
+      const { width, height } = (node as Element).getBoundingClientRect();
+
+      if (!width || !height) continue;
+
+      const { left, top } = getOffset(node as Element);
       const elementGuideline = globalThis.document.createElement('div');
       elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
       this.elementGuidelines.push(elementGuideline);

package/src/StageDragResize.ts

@@ -131,9 +131,7 @@ export default class StageDragResize extends MoveableOptionsManager {
     this.dragResizeHelper.updateShadowEl(el);
     this.dragResizeHelper.setMode(this.mode);
 
-    // 设置选中元素的周围元素，用于选中元素跟周围元素对齐辅助
-    const elementGuidelines: Element[] = Array.from(this.target?.parentElement?.children || []);
-    this.setElementGuidelines([this.target as HTMLElement], elementGuidelines);
+    this.setElementGuidelines([this.target as HTMLElement]);
 
     return this.getOptions(false, {
       target: this.dragResizeHelper.getShadowEl(),

package/src/StageMultiDragResize.ts

@@ -79,9 +79,7 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
 
     this.dragResizeHelper.updateGroup(els);
 
-    // 设置周围元素，用于选中元素跟周围元素的对齐辅助
-    const elementGuidelines: Element[] = Array.from(this.targetList[0].parentElement?.children || []);
-    this.setElementGuidelines(this.targetList, elementGuidelines);
+    this.setElementGuidelines(this.targetList);
 
     this.moveableForMulti?.destroy();
     this.dragResizeHelper.clear();

package/src/types.ts

@@ -101,6 +101,7 @@ export interface CustomizeMoveableOptionsCallbackConfig {
   targetEls?: HTMLElement[];
   targetElIds?: string[];
   isMulti: boolean;
+  document?: Document;
 }
 
 export interface StageRenderConfig {

package/types/MoveableOptionsManager.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import EventEmitter from 'events';
-import { MoveableOptions } from 'moveable';
+import type { MoveableOptions } from 'moveable';
 import { GuidesType, Mode } from './const';
 import { MoveableOptionsManagerConfig } from './types';
 /**
@@ -38,9 +38,8 @@ export default class MoveableOptionsManager extends EventEmitter {
     /**
      * 设置有哪些元素要辅助对齐
      * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
-     * @param allElList 全部元素列表
      */
-    protected setElementGuidelines(selectedElList: HTMLElement[], allElList: Element[]): void;
+    protected setElementGuidelines(selectedElList: HTMLElement[]): void;
     /**
      * 获取moveable参数
      * @param isMultiSelect 是否多选模式

package/types/types.d.ts

@@ -71,6 +71,7 @@ export interface CustomizeMoveableOptionsCallbackConfig {
     targetEls?: HTMLElement[];
     targetElIds?: string[];
     isMulti: boolean;
+    document?: Document;
 }
 export interface StageRenderConfig {
     runtimeUrl?: string;