@tmagic/stage 1.4.0-beta.1 → 1.4.0

package/dist/tmagic-stage.umd.cjs

@@ -41,6 +41,27 @@
     AbleActionEventType2["REMOVE"] = "remove";
     return AbleActionEventType2;
   })(AbleActionEventType || {});
+  var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+    ContainerHighlightType2["DEFAULT"] = "default";
+    ContainerHighlightType2["ALT"] = "alt";
+    return ContainerHighlightType2;
+  })(ContainerHighlightType || {});
+  var RenderType = /* @__PURE__ */ ((RenderType2) => {
+    RenderType2["IFRAME"] = "iframe";
+    RenderType2["NATIVE"] = "native";
+    return RenderType2;
+  })(RenderType || {});
+  var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+    SelectStatus2["SELECT"] = "select";
+    SelectStatus2["MULTI_SELECT"] = "multiSelect";
+    return SelectStatus2;
+  })(SelectStatus || {});
+  var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+    StageDragStatus2["START"] = "start";
+    StageDragStatus2["ING"] = "ing";
+    StageDragStatus2["END"] = "end";
+    return StageDragStatus2;
+  })(StageDragStatus || {});
 
   const getParents = (el, relative) => {
     let cur = el.parentElement;
@@ -896,31 +917,9 @@
     }
   }
 
-  var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-    ContainerHighlightType2["DEFAULT"] = "default";
-    ContainerHighlightType2["ALT"] = "alt";
-    return ContainerHighlightType2;
-  })(ContainerHighlightType || {});
-  var RenderType = /* @__PURE__ */ ((RenderType2) => {
-    RenderType2["IFRAME"] = "iframe";
-    RenderType2["NATIVE"] = "native";
-    return RenderType2;
-  })(RenderType || {});
-  var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
-    SelectStatus2["SELECT"] = "select";
-    SelectStatus2["MULTI_SELECT"] = "multiSelect";
-    return SelectStatus2;
-  })(SelectStatus || {});
-  var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-    StageDragStatus2["START"] = "start";
-    StageDragStatus2["ING"] = "ing";
-    StageDragStatus2["END"] = "end";
-    return StageDragStatus2;
-  })(StageDragStatus || {});
-
   class StageDragResize extends MoveableOptionsManager {
     /** 目标节点 */
-    target;
+    target = null;
     /** Moveable拖拽类实例 */
     moveable;
     /** 拖动状态 */
@@ -953,6 +952,11 @@
      * @param event 鼠标事件
      */
     select(el, event) {
+      if (!el) {
+        this.moveable?.destroy();
+        this.moveable = void 0;
+        return;
+      }
       if (!this.moveable || el !== this.target) {
         this.initMoveable(el);
       } else {
@@ -995,6 +999,12 @@
       this.dragStatus = StageDragStatus.END;
       this.removeAllListeners();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     init(el) {
       if (/(auto|scroll)/.test(el.style.overflow)) {
         el.style.overflow = "hidden";
@@ -1095,16 +1105,19 @@
       }).on("rotateEnd", (e) => {
         this.dragStatus = StageDragStatus.END;
         const frame = this.dragResizeHelper?.getFrame(e.target);
-        this.emit("update", {
-          data: [
-            {
-              el: this.target,
-              style: {
-                transform: frame?.get("transform")
+        if (this.target && frame) {
+          this.emit("update", {
+            data: [
+              {
+                el: this.target,
+                style: {
+                  transform: frame.get("transform")
+                }
               }
-            }
-          ]
-        });
+            ],
+            parentEl: null
+          });
+        }
       });
     }
     bindScaleEvent() {
@@ -1121,16 +1134,19 @@
       }).on("scaleEnd", (e) => {
         this.dragStatus = StageDragStatus.END;
         const frame = this.dragResizeHelper.getFrame(e.target);
-        this.emit("update", {
-          data: [
-            {
-              el: this.target,
-              style: {
-                transform: frame?.get("transform")
+        if (this.target && frame) {
+          this.emit("update", {
+            data: [
+              {
+                el: this.target,
+                style: {
+                  transform: frame.get("transform")
+                }
               }
-            }
-          ]
-        });
+            ],
+            parentEl: null
+          });
+        }
       });
     }
     sort() {
@@ -1365,6 +1381,12 @@
       this.moveableForMulti?.destroy();
       this.dragResizeHelper.destroy();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     /**
      * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
      * @param isResize 是否进行大小缩放
@@ -1395,7 +1417,7 @@
     /** 单选、多选、高亮的容器（蒙层的content） */
     container;
     /** 当前选中的节点 */
-    selectedEl;
+    selectedEl = null;
     /** 多选选中的节点组 */
     selectedElList = [];
     /** 当前高亮的节点 */
@@ -1426,7 +1448,7 @@
         return;
       }
       this.emit("mousemove", event);
-      this.highlight(el);
+      this.highlight(el.id);
     }, throttleTime);
     constructor(config) {
       super();
@@ -1530,6 +1552,7 @@
           return el;
         }
       }
+      return null;
     }
     /**
      * 判断一个元素能否在当前场景被选中
@@ -1566,8 +1589,14 @@
       this.clearSelectStatus(SelectStatus.MULTI_SELECT);
       this.dr.select(el, event);
     }
-    multiSelect(idOrElList) {
-      this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
+    multiSelect(ids) {
+      this.selectedElList = [];
+      ids.forEach((id) => {
+        const el = this.getTargetElement(id);
+        if (el) {
+          this.selectedElList.push(el);
+        }
+      });
       this.clearSelectStatus(SelectStatus.SELECT);
       this.multiDr?.multiSelect(this.selectedElList);
     }
@@ -1577,10 +1606,10 @@
     setHighlightEl(el) {
       this.highlightedEl = el;
     }
-    highlight(idOrEl) {
+    highlight(id) {
       let el;
       try {
-        el = this.getTargetElement(idOrEl);
+        el = this.getTargetElement(id);
       } catch (error) {
         this.clearHighlight();
         return;
@@ -1656,6 +1685,12 @@
       this.multiDr?.destroy();
       this.highlightLayer.destroy();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     createDr(config) {
       const createDrHelper = () => new DragResizeHelper({
         container: config.container,
@@ -1675,9 +1710,9 @@
         setTimeout(() => this.emit("update", data));
       }).on("sort", (data) => {
         setTimeout(() => this.emit("sort", data));
-      }).on("select-parent", () => {
+      }).on(AbleActionEventType.SELECT_PARENT, () => {
         this.emit("select-parent");
-      }).on("remove", () => {
+      }).on(AbleActionEventType.REMOVE, () => {
         const drTarget = this.dr.getTarget();
         if (!drTarget)
           return;
@@ -1706,11 +1741,10 @@
       });
       multiDr?.on("update", (data) => {
         this.emit("multi-update", data);
-      }).on("change-to-select", async (id, e) => {
+      }).on("change-to-select", (id, e) => {
         if (this.isMultiSelectStatus)
-          return false;
-        const el = this.getTargetElement(id);
-        this.emit("change-to-select", el, e);
+          return;
+        this.emit("change-to-select", id, e);
       });
       return multiDr;
     }
@@ -1744,11 +1778,13 @@
         return;
       if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
         this.selectedElList.push(this.selectedEl);
-        this.setSelectedEl(void 0);
+        this.setSelectedEl(null);
       }
       const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
       if (existIndex !== -1) {
-        this.selectedElList.splice(existIndex, 1);
+        if (this.selectedElList.length > 1) {
+          this.selectedElList.splice(existIndex, 1);
+        }
       } else {
         this.selectedElList.push(el);
       }
@@ -2135,6 +2171,12 @@
       this.wrapperResizeObserver?.disconnect();
       super.destroy();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     /**
      * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
      */
@@ -2310,14 +2352,11 @@
       const runtime = await this.getRuntime();
       runtime?.update?.(data);
     }
-    async select(els) {
+    async select(ids) {
       const runtime = await this.getRuntime();
-      for (const el of els) {
-        await runtime?.select?.(el.id);
-        if (runtime?.beforeSelect) {
-          await runtime.beforeSelect(el);
-        }
-        this.flagSelectedEl(el);
+      for (const id of ids) {
+        await runtime?.select?.(id);
+        this.flagSelectedEl(this.getTargetElement(id));
       }
     }
     setZoom(zoom = DEFAULT_ZOOM) {
@@ -2373,14 +2412,8 @@
       }
       return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
     }
-    getTargetElement(idOrEl) {
-      if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-        const el = this.getDocument()?.getElementById(`${idOrEl}`);
-        if (!el)
-          throw new Error(`不存在ID为${idOrEl}的元素`);
-        return el;
-      }
-      return idOrEl;
+    getTargetElement(id) {
+      return this.getDocument()?.getElementById(`${id}`) || null;
     }
     /**
      * 销毁实例
@@ -2392,6 +2425,12 @@
       this.iframe = void 0;
       this.removeAllListeners();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     createIframe() {
       this.iframe = globalThis.document.createElement("iframe");
       this.iframe.src = this.runtimeUrl && utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
@@ -2422,7 +2461,7 @@
       const doc = this.getDocument();
       if (doc) {
         removeSelectedClassName(doc);
-        addSelectedClassName(el, doc);
+        el && addSelectedClassName(el, doc);
       }
     }
     iframeLoadHandler = async () => {
@@ -2485,33 +2524,33 @@
     }
     /**
      * 单选选中元素
-     * @param idOrEl 选中的id或者元素
+     * @param id 选中的id
      */
-    async select(idOrEl, event) {
-      const el = this.renderer.getTargetElement(idOrEl);
+    async select(id, event) {
+      const el = this.renderer.getTargetElement(id);
       if (el === this.actionManager.getSelectedEl())
         return;
-      await this.renderer.select([el]);
-      this.mask.setLayout(el);
+      await this.renderer.select([id]);
+      el && this.mask.setLayout(el);
       this.actionManager.select(el, event);
-      if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+      if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
         this.mask.observerIntersection(el);
       }
     }
     /**
      * 多选选中多个元素
-     * @param idOrElList 选中元素的id或元素列表
+     * @param ids 选中元素的id列表
      */
-    async multiSelect(idOrElList) {
-      const els = idOrElList.map((idOrEl) => this.renderer.getTargetElement(idOrEl));
+    async multiSelect(ids) {
+      const els = ids.map((id) => this.renderer.getTargetElement(id)).filter((el) => Boolean(el));
       if (els.length === 0)
         return;
       const lastEl = els[els.length - 1];
       const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
-      await this.renderer.select(els);
-      this.mask.setLayout(lastEl);
-      this.actionManager.multiSelect(idOrElList);
-      if ((this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
+      await this.renderer.select(ids);
+      lastEl && this.mask.setLayout(lastEl);
+      this.actionManager.multiSelect(ids);
+      if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
         this.mask.observerIntersection(lastEl);
       }
     }
@@ -2519,8 +2558,8 @@
      * 高亮选中元素
      * @param el 要高亮的元素
      */
-    highlight(idOrEl) {
-      this.actionManager.highlight(idOrEl);
+    highlight(id) {
+      this.actionManager.highlight(id);
     }
     clearHighlight() {
       this.actionManager.clearHighlight();
@@ -2616,6 +2655,12 @@
       this.removeAllListeners();
       this.container = void 0;
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     /**
      * 监听页面大小变化
      */
@@ -2645,7 +2690,7 @@
         updateDragEl: config.updateDragEl,
         getRootContainer: () => this.container,
         getRenderDocument: () => this.renderer.getDocument(),
-        getTargetElement: (idOrEl) => this.renderer.getTargetElement(idOrEl),
+        getTargetElement: (id) => this.renderer.getTargetElement(id),
         getElementsFromPoint: (point) => this.renderer.getElementsFromPoint(point)
       };
       return actionManagerConfig;
@@ -2680,12 +2725,12 @@
      * 初始化ActionManager类本身抛出来的事件监听
      */
     initActionManagerEvent() {
-      this.actionManager.on("before-select", (idOrEl, event) => {
-        this.select(idOrEl, event);
+      this.actionManager.on("before-select", (el, event) => {
+        this.select(el.id, event);
       }).on("select", (selectedEl, event) => {
         this.emit("select", selectedEl, event);
-      }).on("before-multi-select", (idOrElList) => {
-        this.multiSelect(idOrElList);
+      }).on("before-multi-select", (els) => {
+        this.multiSelect(els.map((el) => el.id));
       }).on("multi-select", (selectedElList, event) => {
         this.emit("multi-select", selectedElList, event);
       }).on("dblclick", (event) => {
@@ -2710,9 +2755,12 @@
      * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
      */
     initMulDrEvent() {
-      this.actionManager.on("change-to-select", (el, e) => {
-        this.select(el);
-        setTimeout(() => this.emit("select", el, e));
+      this.actionManager.on("change-to-select", (id, e) => {
+        this.select(id);
+        setTimeout(() => {
+          const el = this.renderer.getTargetElement(id);
+          el && this.emit("select", el, e);
+        });
       }).on("multi-update", (data) => {
         this.emit("update", data);
       });
@@ -2721,7 +2769,7 @@
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     initHighlightEvent() {
-      this.actionManager.on("highlight", async (highlightEl) => {
+      this.actionManager.on("highlight", (highlightEl) => {
         this.emit("highlight", highlightEl);
       });
     }

package/package.json

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

package/src/ActionManager.ts

@@ -25,15 +25,25 @@ import { Env } from '@tmagic/core';
 import type { Id } from '@tmagic/schema';
 import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
 
-import { CONTAINER_HIGHLIGHT_CLASS_NAME, GHOST_EL_ID_PREFIX, GuidesType, MouseButton, PAGE_CLASS } from './const';
+import {
+  AbleActionEventType,
+  CONTAINER_HIGHLIGHT_CLASS_NAME,
+  ContainerHighlightType,
+  GHOST_EL_ID_PREFIX,
+  GuidesType,
+  MouseButton,
+  PAGE_CLASS,
+  SelectStatus,
+  StageDragStatus,
+} from './const';
 import DragResizeHelper from './DragResizeHelper';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMultiDragResize from './StageMultiDragResize';
-import {
+import type {
   ActionManagerConfig,
+  ActionManagerEvents,
   CanSelect,
-  ContainerHighlightType,
   CustomizeMoveableOptions,
   CustomizeMoveableOptionsCallbackConfig,
   GetElementsFromPoint,
@@ -42,8 +52,7 @@ import {
   IsContainer,
   Point,
   RemoveEventData,
-  SelectStatus,
-  StageDragStatus,
+  SortEventData,
   UpdateEventData,
 } from './types';
 import { isMoveableButton } from './util';
@@ -62,7 +71,7 @@ export default class ActionManager extends EventEmitter {
   /** 单选、多选、高亮的容器（蒙层的content） */
   private container: HTMLElement;
   /** 当前选中的节点 */
-  private selectedEl: HTMLElement | undefined;
+  private selectedEl: HTMLElement | null = null;
   /** 多选选中的节点组 */
   private selectedElList: HTMLElement[] = [];
   /** 当前高亮的节点 */
@@ -96,7 +105,7 @@ export default class ActionManager extends EventEmitter {
     }
 
     this.emit('mousemove', event);
-    this.highlight(el);
+    this.highlight(el.id);
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -181,11 +190,11 @@ export default class ActionManager extends EventEmitter {
     return el.id === this.selectedEl?.id;
   }
 
-  public setSelectedEl(el?: HTMLElement): void {
+  public setSelectedEl(el: HTMLElement | null): void {
     this.selectedEl = el;
   }
 
-  public getSelectedEl(): HTMLElement | undefined {
+  public getSelectedEl(): HTMLElement | null {
     return this.selectedEl;
   }
 
@@ -207,7 +216,7 @@ export default class ActionManager extends EventEmitter {
    * @param event 鼠标事件
    * @returns 鼠标下方第一个可选中元素
    */
-  public async getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined> {
+  public async getElementFromPoint(event: MouseEvent): Promise<HTMLElement | null> {
     const els = this.getElementsFromPoint(event as Point);
 
     this.emit('get-elements-from-point', els);
@@ -220,6 +229,7 @@ export default class ActionManager extends EventEmitter {
         return el;
       }
     }
+    return null;
   }
 
   /**
@@ -257,14 +267,20 @@ export default class ActionManager extends EventEmitter {
     return this.multiDr?.canSelect(el, selectedEl) || false;
   }
 
-  public select(el: HTMLElement, event: MouseEvent | undefined): void {
+  public select(el: HTMLElement | null, event?: MouseEvent): void {
     this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
 
-  public multiSelect(idOrElList: HTMLElement[] | Id[]): void {
-    this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
+  public multiSelect(ids: Id[]): void {
+    this.selectedElList = [];
+    ids.forEach((id) => {
+      const el = this.getTargetElement(id);
+      if (el) {
+        this.selectedElList.push(el);
+      }
+    });
     this.clearSelectStatus(SelectStatus.SELECT);
     this.multiDr?.multiSelect(this.selectedElList);
   }
@@ -277,10 +293,10 @@ export default class ActionManager extends EventEmitter {
     this.highlightedEl = el;
   }
 
-  public highlight(idOrEl: Id | HTMLElement): void {
+  public highlight(id: Id): void {
     let el;
     try {
-      el = this.getTargetElement(idOrEl);
+      el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
       return;
@@ -366,6 +382,20 @@ export default class ActionManager extends EventEmitter {
     this.highlightLayer.destroy();
   }
 
+  public on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(
+    eventName: Name,
+    ...args: Param
+  ) {
+    return super.emit(eventName, ...args);
+  }
+
   private createDr(config: ActionManagerConfig) {
     const createDrHelper = () =>
       new DragResizeHelper({
@@ -388,14 +418,14 @@ export default class ActionManager extends EventEmitter {
       // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
       setTimeout(() => this.emit('update', data));
     })
-      .on('sort', (data: UpdateEventData) => {
+      .on('sort', (data: SortEventData) => {
         // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
         setTimeout(() => this.emit('sort', data));
       })
-      .on('select-parent', () => {
+      .on(AbleActionEventType.SELECT_PARENT, () => {
         this.emit('select-parent');
       })
-      .on('remove', () => {
+      .on(AbleActionEventType.REMOVE, () => {
         const drTarget = this.dr.getTarget();
         if (!drTarget) return;
         const data: RemoveEventData = {
@@ -430,11 +460,10 @@ export default class ActionManager extends EventEmitter {
       ?.on('update', (data: UpdateEventData) => {
         this.emit('multi-update', data);
       })
-      .on('change-to-select', async (id: Id, e: MouseEvent) => {
+      .on('change-to-select', (id: Id, e: MouseEvent) => {
         // 如果还在多选状态，不触发切换到单选
-        if (this.isMultiSelectStatus) return false;
-        const el = this.getTargetElement(id);
-        this.emit('change-to-select', el, e);
+        if (this.isMultiSelectStatus) return;
+        this.emit('change-to-select', id, e);
       });
 
     return multiDr;
@@ -474,13 +503,16 @@ export default class ActionManager extends EventEmitter {
     // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl as HTMLElement);
-      this.setSelectedEl(undefined);
+      this.setSelectedEl(null);
     }
+
     // 判断元素是否已在多选列表
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
     if (existIndex !== -1) {
       // 再次点击取消选中
-      this.selectedElList.splice(existIndex, 1);
+      if (this.selectedElList.length > 1) {
+        this.selectedElList.splice(existIndex, 1);
+      }
     } else {
       this.selectedElList.push(el);
     }
@@ -580,6 +612,7 @@ export default class ActionManager extends EventEmitter {
       if (!el) return;
       this.emit('before-select', el, event);
     }
+
     getDocument().addEventListener('mouseup', this.mouseUpHandler);
   };
 

package/src/DragResizeHelper.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import {
+import type {
   OnDrag,
   OnDragGroup,
   OnDragGroupStart,
@@ -34,7 +34,7 @@ import MoveableHelper from 'moveable-helper';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from './const';
 import TargetShadow from './TargetShadow';
-import { DragResizeHelperConfig, Rect, TargetElement } from './types';
+import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { calcValueByFontsize, getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
 /**