@tmagic/stage 1.3.10 → 1.3.12

package/dist/tmagic-stage.js

@@ -2,7 +2,7 @@ import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
 import KeyController from 'keycon';
 import { merge, throttle } from 'lodash-es';
 import { Env } from '@tmagic/core';
-import { removeClassName, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
+import { removeClassName, guid, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import MoveableHelper from 'moveable-helper';
 import Moveable from 'moveable';
 import Guides from '@scena/guides';
@@ -82,6 +82,7 @@ const getTargetElStyle = (el, zIndex) => {
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
     border: ${border};
+    opacity: 0;
     ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
   `;
 };
@@ -252,7 +253,7 @@ const getBorderWidth = (el) => {
 class TargetShadow {
   el;
   els = [];
-  idPrefix = "target_calibrate_";
+  idPrefix = `target_calibrate_${guid()}`;
   container;
   scrollLeft = 0;
   scrollTop = 0;
@@ -267,7 +268,7 @@ class TargetShadow {
       this.zIndex = config.zIndex;
     }
     if (config.idPrefix) {
-      this.idPrefix = config.idPrefix;
+      this.idPrefix = `${config.idPrefix}_${guid()}`;
     }
     this.container.addEventListener("customScroll", this.scrollHandler);
   }
@@ -1620,7 +1621,7 @@ class ActionManager extends EventEmitter {
       return;
     const els = this.getElementsFromPoint(event);
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !excludeElList.includes(el)) {
+      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
         addClassName(el, doc, this.containerHighlightClassName);
         break;
       }
@@ -1649,6 +1650,7 @@ class ActionManager extends EventEmitter {
     this.container.removeEventListener("mousemove", this.mouseMoveHandler);
     this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
     this.container.removeEventListener("wheel", this.mouseWheelHandler);
+    this.container.removeEventListener("dblclick", this.dblclickHandler);
     this.dr.destroy();
     this.multiDr?.destroy();
     this.highlightLayer.destroy();
@@ -1772,6 +1774,7 @@ class ActionManager extends EventEmitter {
     this.container.addEventListener("mousemove", this.mouseMoveHandler);
     this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
     this.container.addEventListener("wheel", this.mouseWheelHandler);
+    this.container.addEventListener("dblclick", this.dblclickHandler);
   }
   /**
    * 初始化键盘事件监听
@@ -1862,6 +1865,9 @@ class ActionManager extends EventEmitter {
   mouseWheelHandler = () => {
     this.clearHighlight();
   };
+  dblclickHandler = (event) => {
+    this.emit("dblclick", event);
+  };
 }
 
 class Rule extends EventEmitter {
@@ -2611,6 +2617,9 @@ class StageCore extends EventEmitter$1 {
    * 监听页面大小变化
    */
   observePageResize(page) {
+    if (this.pageResizeObserver) {
+      this.pageResizeObserver.disconnect();
+    }
     if (typeof ResizeObserver !== "undefined") {
       this.pageResizeObserver = new ResizeObserver((entries) => {
         this.mask.pageResize(entries);
@@ -2676,6 +2685,8 @@ class StageCore extends EventEmitter$1 {
       this.multiSelect(idOrElList);
     }).on("multi-select", (selectedElList, event) => {
       this.emit("multi-select", selectedElList, event);
+    }).on("dblclick", (event) => {
+      this.emit("dblclick", event);
     });
   }
   /**
@@ -2726,4 +2737,3 @@ class StageCore extends EventEmitter$1 {
 }
 
 export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
-//# sourceMappingURL=tmagic-stage.js.map

package/dist/tmagic-stage.umd.cjs

@@ -79,6 +79,7 @@
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
     border: ${border};
+    opacity: 0;
     ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
   `;
   };
@@ -249,7 +250,7 @@
   class TargetShadow {
     el;
     els = [];
-    idPrefix = "target_calibrate_";
+    idPrefix = `target_calibrate_${utils.guid()}`;
     container;
     scrollLeft = 0;
     scrollTop = 0;
@@ -264,7 +265,7 @@
         this.zIndex = config.zIndex;
       }
       if (config.idPrefix) {
-        this.idPrefix = config.idPrefix;
+        this.idPrefix = `${config.idPrefix}_${utils.guid()}`;
       }
       this.container.addEventListener("customScroll", this.scrollHandler);
     }
@@ -1617,7 +1618,7 @@
         return;
       const els = this.getElementsFromPoint(event);
       for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !excludeElList.includes(el)) {
+        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
           utils.addClassName(el, doc, this.containerHighlightClassName);
           break;
         }
@@ -1646,6 +1647,7 @@
       this.container.removeEventListener("mousemove", this.mouseMoveHandler);
       this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
       this.container.removeEventListener("wheel", this.mouseWheelHandler);
+      this.container.removeEventListener("dblclick", this.dblclickHandler);
       this.dr.destroy();
       this.multiDr?.destroy();
       this.highlightLayer.destroy();
@@ -1769,6 +1771,7 @@
       this.container.addEventListener("mousemove", this.mouseMoveHandler);
       this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
       this.container.addEventListener("wheel", this.mouseWheelHandler);
+      this.container.addEventListener("dblclick", this.dblclickHandler);
     }
     /**
      * 初始化键盘事件监听
@@ -1859,6 +1862,9 @@
     mouseWheelHandler = () => {
       this.clearHighlight();
     };
+    dblclickHandler = (event) => {
+      this.emit("dblclick", event);
+    };
   }
 
   class Rule extends EventEmitter {
@@ -2608,6 +2614,9 @@
      * 监听页面大小变化
      */
     observePageResize(page) {
+      if (this.pageResizeObserver) {
+        this.pageResizeObserver.disconnect();
+      }
       if (typeof ResizeObserver !== "undefined") {
         this.pageResizeObserver = new ResizeObserver((entries) => {
           this.mask.pageResize(entries);
@@ -2673,6 +2682,8 @@
         this.multiSelect(idOrElList);
       }).on("multi-select", (selectedElList, event) => {
         this.emit("multi-select", selectedElList, event);
+      }).on("dblclick", (event) => {
+        this.emit("dblclick", event);
       });
     }
     /**
@@ -2764,4 +2775,3 @@
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
-//# sourceMappingURL=tmagic-stage.umd.cjs.map

package/package.json

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

package/src/ActionManager.ts

@@ -79,7 +79,7 @@ export default class ActionManager extends EventEmitter {
   private getTargetElement: GetTargetElement;
   private getElementsFromPoint: GetElementsFromPoint;
   private canSelect: CanSelect;
-  private isContainer: IsContainer;
+  private isContainer?: IsContainer;
   private getRenderDocument: GetRenderDocument;
   private disabledMultiSelect = false;
   private config: ActionManagerConfig;
@@ -328,7 +328,7 @@ export default class ActionManager extends EventEmitter {
     const els = this.getElementsFromPoint(event);
 
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isContainer(el)) && !excludeElList.includes(el)) {
+      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isContainer?.(el)) && !excludeElList.includes(el)) {
         addClassName(el, doc, this.containerHighlightClassName);
         break;
       }
@@ -360,6 +360,7 @@ export default class ActionManager extends EventEmitter {
     this.container.removeEventListener('mousemove', this.mouseMoveHandler);
     this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
     this.container.removeEventListener('wheel', this.mouseWheelHandler);
+    this.container.removeEventListener('dblclick', this.dblclickHandler);
     this.dr.destroy();
     this.multiDr?.destroy();
     this.highlightLayer.destroy();
@@ -512,6 +513,7 @@ export default class ActionManager extends EventEmitter {
     this.container.addEventListener('mousemove', this.mouseMoveHandler);
     this.container.addEventListener('mouseleave', this.mouseLeaveHandler);
     this.container.addEventListener('wheel', this.mouseWheelHandler);
+    this.container.addEventListener('dblclick', this.dblclickHandler);
   }
 
   /**
@@ -619,4 +621,8 @@ export default class ActionManager extends EventEmitter {
   private mouseWheelHandler = () => {
     this.clearHighlight();
   };
+
+  private dblclickHandler = (event: MouseEvent) => {
+    this.emit('dblclick', event);
+  };
 }

package/src/StageCore.ts

@@ -46,8 +46,8 @@ export default class StageCore extends EventEmitter {
   public container?: HTMLDivElement;
   public renderer: StageRender;
   public mask: StageMask;
+  public actionManager: ActionManager;
 
-  private actionManager: ActionManager;
   private pageResizeObserver: ResizeObserver | null = null;
   private autoScrollIntoView: boolean | undefined;
   private customizedRender?: CustomizeRender;
@@ -252,6 +252,10 @@ export default class StageCore extends EventEmitter {
    * 监听页面大小变化
    */
   private observePageResize(page: HTMLElement): void {
+    if (this.pageResizeObserver) {
+      this.pageResizeObserver.disconnect();
+    }
+
     if (typeof ResizeObserver !== 'undefined') {
       this.pageResizeObserver = new ResizeObserver((entries) => {
         this.mask.pageResize(entries);
@@ -329,6 +333,9 @@ export default class StageCore extends EventEmitter {
       })
       .on('multi-select', (selectedElList: HTMLElement[], event: MouseEvent) => {
         this.emit('multi-select', selectedElList, event);
+      })
+      .on('dblclick', (event: MouseEvent) => {
+        this.emit('dblclick', event);
       });
   }
 

package/src/TargetShadow.ts

@@ -15,6 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { guid } from '@tmagic/utils';
+
 import { Mode, ZIndex } from './const';
 import type { TargetElement as ShadowElement, TargetShadowConfig, UpdateDragEl } from './types';
 import { getTargetElStyle, isFixedParent } from './util';
@@ -26,7 +28,7 @@ export default class TargetShadow {
   public el?: ShadowElement;
   public els: ShadowElement[] = [];
 
-  private idPrefix = 'target_calibrate_';
+  private idPrefix = `target_calibrate_${guid()}`;
   private container: HTMLElement;
   private scrollLeft = 0;
   private scrollTop = 0;
@@ -46,7 +48,7 @@ export default class TargetShadow {
     }
 
     if (config.idPrefix) {
-      this.idPrefix = config.idPrefix;
+      this.idPrefix = `${config.idPrefix}_${guid()}`;
     }
 
     this.container.addEventListener('customScroll', this.scrollHandler);

package/src/types.ts

@@ -66,7 +66,7 @@ export interface StageCoreConfig {
   /** 放大倍数，默认1倍 */
   zoom?: number;
   canSelect?: CanSelect;
-  isContainer: IsContainer;
+  isContainer?: IsContainer;
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
@@ -91,7 +91,7 @@ export interface ActionManagerConfig {
   disabledDragStart?: boolean;
   disabledMultiSelect?: boolean;
   canSelect?: CanSelect;
-  isContainer: IsContainer;
+  isContainer?: IsContainer;
   getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
   updateDragEl?: UpdateDragEl;

package/src/util.ts

@@ -66,6 +66,7 @@ export const getTargetElStyle = (el: TargetElement, zIndex?: ZIndex) => {
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
     border: ${border};
+    opacity: 0;
     ${typeof zIndex !== 'undefined' ? `z-index: ${zIndex};` : ''}
   `;
 };

package/types/ActionManager.d.ts

@@ -33,7 +33,7 @@ export default class ActionManager extends EventEmitter {
     private getTargetElement;
     private getElementsFromPoint;
     private canSelect;
-    private isContainer;
+    private isContainer?;
     private getRenderDocument;
     private disabledMultiSelect;
     private config;
@@ -143,4 +143,5 @@ export default class ActionManager extends EventEmitter {
     private mouseUpHandler;
     private mouseLeaveHandler;
     private mouseWheelHandler;
+    private dblclickHandler;
 }

package/types/StageCore.d.ts

@@ -3,6 +3,7 @@
 import { EventEmitter } from 'events';
 import type { MoveableOptions } from 'moveable';
 import type { Id } from '@tmagic/schema';
+import ActionManager from './ActionManager';
 import StageMask from './StageMask';
 import StageRender from './StageRender';
 import type { RemoveData, StageCoreConfig, UpdateData } from './types';
@@ -13,7 +14,7 @@ export default class StageCore extends EventEmitter {
     container?: HTMLDivElement;
     renderer: StageRender;
     mask: StageMask;
-    private actionManager;
+    actionManager: ActionManager;
     private pageResizeObserver;
     private autoScrollIntoView;
     private customizedRender?;

package/types/types.d.ts

@@ -38,7 +38,7 @@ export interface StageCoreConfig {
     /** 放大倍数，默认1倍 */
     zoom?: number;
     canSelect?: CanSelect;
-    isContainer: IsContainer;
+    isContainer?: IsContainer;
     containerHighlightClassName?: string;
     containerHighlightDuration?: number;
     containerHighlightType?: ContainerHighlightType;
@@ -62,7 +62,7 @@ export interface ActionManagerConfig {
     disabledDragStart?: boolean;
     disabledMultiSelect?: boolean;
     canSelect?: CanSelect;
-    isContainer: IsContainer;
+    isContainer?: IsContainer;
     getRootContainer: GetRootContainer;
     getRenderDocument: GetRenderDocument;
     updateDragEl?: UpdateDragEl;