@tmagic/stage 1.4.16 → 1.5.0-beta.1

package/src/DragResizeHelper.ts

@@ -32,13 +32,15 @@ import type {
 } from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { calcValueByFontsize } from '@tmagic/utils';
+import { calcValueByFontsize, getIdFromEl, setIdToEl } from '@tmagic/utils';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from './const';
 import TargetShadow from './TargetShadow';
 import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
+const getId = getIdFromEl();
+
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@@ -239,15 +241,15 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
 
       if (!isParentIncluded) {
         // 更新页面元素位置
@@ -277,15 +279,18 @@ export default class DragResizeHelper {
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id),
+        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
+        (targetItem) =>
+          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getId(targetItem) &&
+          getId(ev.target)?.endsWith(getId(targetItem)!),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
       if (!isParentIncluded) {
         // 更新页面元素位置
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -312,7 +317,7 @@ export default class DragResizeHelper {
     const shadowEls = this.getShadowEls();
 
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => item.id.endsWith(el.id));
+      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ''));
     }
 
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
@@ -348,14 +353,18 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
-        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
+        (targetItem) =>
+          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || ''),
       );
       if (!matchEventTarget) return;
-      this.framesSnapShot.push({
-        left: matchEventTarget.offsetLeft,
-        top: matchEventTarget.offsetTop,
-        id: matchEventTarget.id,
-      });
+
+      const id = getId(matchEventTarget);
+      id &&
+        this.framesSnapShot.push({
+          left: matchEventTarget.offsetLeft,
+          top: matchEventTarget.offsetTop,
+          id,
+        });
     });
   }
 
@@ -370,7 +379,7 @@ export default class DragResizeHelper {
     const ghostEl = el.cloneNode(true) as HTMLElement;
     this.setGhostElChildrenId(ghostEl);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
     ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
@@ -384,8 +393,10 @@ export default class DragResizeHelper {
 
   private setGhostElChildrenId(el: Element): void {
     for (const child of Array.from(el.children)) {
-      if (child.id) {
-        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      const el = child as HTMLElement;
+      const id = getId(el);
+      if (id) {
+        setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
       }
 
       if (child.children.length) {

package/src/StageCore.ts

@@ -21,6 +21,7 @@ import { EventEmitter } from 'events';
 import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import type { Id } from '@tmagic/schema';
+import { getIdFromEl } from '@tmagic/utils';
 
 import ActionManager from './ActionManager';
 import { DEFAULT_ZOOM } from './const';
@@ -64,7 +65,7 @@ export default class StageCore extends EventEmitter {
       runtimeUrl: config.runtimeUrl,
       zoom: config.zoom,
       renderType: config.renderType,
-      customizedRender: async (): Promise<HTMLElement | null> => {
+      customizedRender: async (): Promise<HTMLElement | null | void> => {
         if (this?.customizedRender) {
           return await this.customizedRender(this);
         }
@@ -336,13 +337,14 @@ export default class StageCore extends EventEmitter {
   private initActionManagerEvent(): void {
     this.actionManager
       .on('before-select', (el: HTMLElement, event?: MouseEvent) => {
-        this.select(el.id, event);
+        const id = getIdFromEl()(el);
+        id && this.select(id, event);
       })
       .on('select', (selectedEl: HTMLElement, event: MouseEvent) => {
         this.emit('select', selectedEl, event);
       })
       .on('before-multi-select', (els: HTMLElement[]) => {
-        this.multiSelect(els.map((el) => el.id));
+        this.multiSelect(els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[]);
       })
       .on('multi-select', (selectedElList: HTMLElement[], event: MouseEvent) => {
         this.emit('multi-select', selectedElList, event);

package/src/StageDragResize.ts

@@ -19,6 +19,8 @@
 /* eslint-disable no-param-reassign */
 import Moveable, { MoveableOptions } from 'moveable';
 
+import { getIdFromEl } from '@tmagic/utils';
+
 import { Mode, StageDragStatus } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
@@ -328,10 +330,12 @@ export default class StageDragResize extends MoveableOptionsManager {
         this.emit('sort', up(deltaTop, this.target));
       }
     } else {
-      this.emit('sort', {
-        src: this.target.id,
-        dist: this.target.id,
-      });
+      const id = getIdFromEl()(this.target);
+      id &&
+        this.emit('sort', {
+          src: id,
+          dist: id,
+        });
     }
   }
 

package/src/StageMultiDragResize.ts

@@ -18,6 +18,8 @@
 
 import Moveable from 'moveable';
 
+import { getIdFromEl } from '@tmagic/utils';
+
 import { DRAG_EL_ID_PREFIX, Mode, StageDragStatus } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
@@ -132,7 +134,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
         const { inputTarget, targets } = e;
         // 如果有多个元素被选中，同时点击的元素在选中元素中的其中一项，可能是多选态切换为该元素的单选态，抛事件给上一层继续判断是否切换
         if (targets.length > 1 && targets.includes(inputTarget)) {
-          this.emit('change-to-select', inputTarget.id.replace(DRAG_EL_ID_PREFIX, ''), e.inputEvent);
+          const id = getIdFromEl()(inputTarget as HTMLElement)?.replace(DRAG_EL_ID_PREFIX, '');
+          id && this.emit('change-to-select', id, e.inputEvent);
         }
       });
   }

package/src/StageRender.ts

@@ -19,7 +19,7 @@
 import { EventEmitter } from 'events';
 
 import { Id } from '@tmagic/schema';
-import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
+import { getElById, getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
 import { DEFAULT_ZOOM, RenderType } from './const';
 import style from './style.css?raw';
@@ -36,7 +36,7 @@ export default class StageRender extends EventEmitter {
   private runtimeUrl?: string;
   private zoom = DEFAULT_ZOOM;
   private renderType: RenderType;
-  private customizedRender?: () => Promise<HTMLElement | null>;
+  private customizedRender?: () => Promise<HTMLElement | null | void>;
 
   constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }: StageRenderConfig) {
     super();
@@ -152,7 +152,7 @@ export default class StageRender extends EventEmitter {
   }
 
   public getTargetElement(id: Id): HTMLElement | null {
-    return this.getDocument()?.getElementById(`${id}`) || null;
+    return getElById()(this.getDocument(), id);
   }
 
   /**

package/src/TargetShadow.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { guid } from '@tmagic/utils';
+import { getElById, getIdFromEl, guid, setIdToEl } from '@tmagic/utils';
 
 import { Mode, ZIndex } from './const';
 import type { TargetElement as ShadowElement, TargetShadowConfig, UpdateDragEl } from './types';
@@ -93,7 +93,7 @@ export default class TargetShadow {
   private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
     const el = src || globalThis.document.createElement('div');
 
-    el.id = `${this.idPrefix}_${target.id}`;
+    setIdToEl()(el, `${this.idPrefix}_${getIdFromEl()(target)}`);
 
     el.style.cssText = getTargetElStyle(target, this.zIndex);
 
@@ -108,7 +108,7 @@ export default class TargetShadow {
       el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
     }
 
-    if (!globalThis.document.getElementById(el.id)) {
+    if (!getElById()(globalThis.document, getIdFromEl()(el))) {
       this.container.append(el);
     }
 

package/src/types.ts

@@ -30,7 +30,7 @@ export type TargetElement = HTMLElement | SVGElement;
 
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
-export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement | void> | HTMLElement | void;
 /** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
 export type CustomizeMoveableOptions =
   | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
@@ -60,7 +60,7 @@ export interface StageCoreConfig {
   moveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
-  render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+  render?: CustomizeRender;
   autoScrollIntoView?: boolean;
   updateDragEl?: UpdateDragEl;
   disabledDragStart?: boolean;
@@ -105,7 +105,7 @@ export interface StageRenderConfig {
   runtimeUrl?: string;
   zoom: number | undefined;
   renderType?: RenderType;
-  customizedRender?: () => Promise<HTMLElement | null>;
+  customizedRender?: () => Promise<HTMLElement | null | void>;
 }
 
 export interface StageMaskConfig {