feat: dsl id渲染到dom上的data-tamgic-id,不再是id属性

packages/core/src/EventHelper.ts

@@ -32,7 +32,7 @@ import {
   type EventActionItem,
   type EventConfig,
 } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getIdFromEl } from '@tmagic/utils';
 
 import type { default as TMagicApp } from './App';
 import type { default as TMagicNode } from './Node';
@@ -49,14 +49,16 @@ const getDirectComponent = (element: HTMLElement | null, app: TMagicApp): TMagic
     return;
   }
 
-  if (!element.id) {
+  const id = getIdFromEl()(element);
+
+  if (!id) {
     return getDirectComponent(element.parentElement, app);
   }
 
   const node = app.getNode(
-    element.id,
-    element.dataset.iteratorContainerId?.split(','),
-    element.dataset.iteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
+    id,
+    element.dataset.tmagicIteratorContainerId?.split(','),
+    element.dataset.tmagicIteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
   );
 
   return node;

packages/editor/src/editorProps.ts

@@ -10,6 +10,7 @@ import StageCore, {
   RenderType,
   type UpdateDragEl,
 } from '@tmagic/stage';
+import { getIdFromEl } from '@tmagic/utils';
 
 import type {
   ComponentGroup,
@@ -114,7 +115,7 @@ export const defaultEditorProps = {
   eventMethodList: () => ({}),
   datasourceValues: () => ({}),
   datasourceConfigs: () => ({}),
-  canSelect: (el: HTMLElement) => Boolean(el.id),
+  canSelect: (el: HTMLElement) => Boolean(getIdFromEl()(el)),
   isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
   codeOptions: () => ({}),
 };

packages/editor/src/fields/UISelect.vue

@@ -48,8 +48,9 @@ import { throttle } from 'lodash-es';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
+import { getIdFromEl } from '@tmagic/utils';
 
-import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
+import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsUISelect',
@@ -71,11 +72,12 @@ const cancelHandler = () => {
   globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
-const clickHandler = ({ detail }: Event & { detail: any }) => {
-  if (detail.id) {
-    props.model[props.name] = detail.id;
-    emit('change', detail.id);
-    mForm?.$emit('field-change', props.prop, detail.id);
+const clickHandler = ({ detail }: Event & { detail: HTMLElement }) => {
+  const id = getIdFromEl()(detail);
+  if (id) {
+    props.model[props.name] = id;
+    emit('change', id);
+    mForm?.$emit('field-change', props.prop, id);
   }
 
   if (cancelHandler) {
@@ -104,21 +106,24 @@ const deleteHandler = () => {
 };
 
 const selectNode = async (id: Id) => {
-  await services?.editorService.select(id);
-  services?.editorService.get('stage')?.select(id);
-  services?.stageOverlayService.get('stage')?.select(id);
+  if (!services) return;
+  await services.editorService.select(id);
+  services.editorService.get('stage')?.select(id);
+  services.stageOverlayService.get('stage')?.select(id);
 };
 
 const highlight = throttle((id: Id) => {
-  services?.editorService.highlight(id);
-  services?.editorService.get('stage')?.highlight(id);
-  services?.stageOverlayService.get('stage')?.highlight(id);
+  if (!services) return;
+  services.editorService.highlight(id);
+  services.editorService.get('stage')?.highlight(id);
+  services.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
 const unhighlight = () => {
-  services?.editorService.set('highlightNode', null);
-  services?.editorService.get('stage')?.clearHighlight();
-  services?.stageOverlayService.get('stage')?.clearHighlight();
+  if (!services) return;
+  services.editorService.set('highlightNode', null);
+  services.editorService.get('stage')?.clearHighlight();
+  services.stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>
 

packages/editor/src/hooks/use-stage.ts

@@ -2,6 +2,7 @@ import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
+import { getIdFromEl } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
@@ -71,35 +72,40 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('select', (el: HTMLElement) => {
-    if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
-    editorService.select(el.id);
+    const id = getIdFromEl()(el);
+    if (`${editorService.get('node')?.id}` === id && editorService.get('nodes').length === 1) return;
+    id && editorService.select(id);
   });
 
   stage.on('highlight', (el: HTMLElement) => {
-    editorService.highlight(el.id);
+    const id = getIdFromEl()(el);
+    id && editorService.highlight(id);
   });
 
   stage.on('multi-select', (els: HTMLElement[]) => {
-    editorService.multiSelect(els.map((el) => el.id));
+    const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
+    editorService.multiSelect(ids);
   });
 
   stage.on('update', (ev: UpdateEventData) => {
     if (ev.parentEl) {
       for (const data of ev.data) {
-        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+        const id = getIdFromEl()(data.el);
+        const pId = getIdFromEl()(ev.parentEl);
+        id && pId && editorService.moveToContainer({ id, style: data.style }, pId);
       }
       return;
     }
 
-    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+    editorService.update(ev.data.map((data) => ({ id: getIdFromEl()(data.el) || '', style: data.style })));
   });
 
   stage.on('sort', (ev: SortEventData) => {
     editorService.sort(ev.src, ev.dist);
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
-    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(getIdFromEl()(el) || ''));
     editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
   });
 

packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -26,6 +26,7 @@ import { computed, inject, nextTick, ref, watch } from 'vue';
 
 import { TMagicTooltip } from '@tmagic/design';
 import type { MNode } from '@tmagic/schema';
+import { getIdFromEl } from '@tmagic/utils';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -61,7 +62,7 @@ const unWatch = watch(
 
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
       const els = stage.renderer.getElementsFromPoint(event) || [];
-      const ids = els.map((el) => el.id).filter((id) => Boolean(id));
+      const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
 
       buttonVisible.value = ids.length > 3;
 

packages/editor/src/layouts/workspace/viewer/Stage.vue

@@ -46,7 +46,7 @@ import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/schema';
 import StageCore, { getOffset, Runtime } from '@tmagic/stage';
-import { calcValueByFontsize } from '@tmagic/utils';
+import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
@@ -200,8 +200,9 @@ const dropHandler = async (e: DragEvent) => {
   const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
 
   let parent: MContainer | undefined | null = page.value;
-  if (parentEl) {
-    parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+  const parentId = getIdFromEl()(parentEl);
+  if (parentId) {
+    parent = services?.editorService.getNodeById(parentId, false) as MContainer;
   }
 
   if (parent && stageContainer.value && stage) {

packages/editor/src/services/editor.ts

@@ -23,7 +23,7 @@ import { Writable } from 'type-fest';
 import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -759,7 +759,7 @@ class Editor extends BaseService {
     const doc = stage?.renderer.contentWindow?.document;
 
     if (doc) {
-      const el = doc.getElementById(`${node.id}`);
+      const el = getElById()(doc, node.id);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);

packages/editor/src/services/stageOverlay.ts

@@ -2,6 +2,7 @@ import { reactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import StageCore from '@tmagic/stage';
+import { getIdFromEl } from '@tmagic/utils';
 
 import { useStage } from '@editor/hooks/use-stage';
 import BaseService from '@editor/services//BaseService';
@@ -169,7 +170,8 @@ class StageOverlay extends BaseService {
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl.id);
+      const id = getIdFromEl()(contentEl);
+      id && subStage?.select(id);
     }
   }
 

packages/editor/src/utils/editor.ts

@@ -21,9 +21,10 @@ import serialize from 'serialize-javascript';
 import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
+
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 export const COPY_CODE_STORAGE_KEY = '$MagicEditorCopyCode';
 export const COPY_DS_STORAGE_KEY = '$MagicEditorCopyDataSource';
@@ -239,8 +240,8 @@ export const getGuideLineFromCache = (key: string): number[] => {
 export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) => {
   if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
 
-  const el = doc.getElementById(`${config.id}`);
-  const parentEl = doc.getElementById(`${parent.id}`);
+  const el = getElById()(doc, `${config.id}`);
+  const parentEl = getElById()(doc, `${parent.id}`);
 
   const left = Number(config.style?.left) || 0;
   if (el && parentEl) {

packages/editor/src/utils/index.ts

@@ -22,3 +22,7 @@ export * from './logger';
 export * from './editor';
 export * from './operator';
 export * from './data-source';
+export * from './idle-task';
+export * from './scroll-viewer';
+export * from './tree';
+export * from './undo-redo';

packages/editor/src/utils/operator.ts

@@ -2,7 +2,7 @@ import { toRaw } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
-import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import propsService from '@editor/services/props';
@@ -73,7 +73,8 @@ export const beforePaste = (position: PastePosition, config: MNode[], doc?: Docu
  */
 export const getPositionInContainer = (position: PastePosition = {}, id: Id, doc?: Document) => {
   let { left = 0, top = 0 } = position;
-  const parentEl = editorService.get('stage')?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const stageDoc = editorService.get('stage')?.renderer?.contentWindow?.document;
+  const parentEl = stageDoc && getElById()(stageDoc, `${id}`);
   const parentElRect = parentEl?.getBoundingClientRect();
   left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
   top = top - calcValueByFontsize(doc, parentElRect?.top || 0);

packages/stage/src/ActionManager.ts

@@ -23,7 +23,7 @@ import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import { Env } from '@tmagic/core';
 import type { Id } from '@tmagic/schema';
-import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
+import { addClassName, getDocument, getIdFromEl, removeClassNameByClassName } from '@tmagic/utils';
 
 import {
   AbleActionEventType,
@@ -99,13 +99,14 @@ export default class ActionManager extends EventEmitter {
     }
 
     const el = await this.getElementFromPoint(event);
-    if (!el) {
+    const id = getIdFromEl()(el);
+    if (!id) {
       this.clearHighlight();
       return;
     }
 
     this.emit('mousemove', event);
-    this.highlight(el.id);
+    this.highlight(id);
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -118,7 +119,7 @@ export default class ActionManager extends EventEmitter {
     this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
-    this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
+    this.canSelect = config.canSelect || ((el: HTMLElement) => Boolean(getIdFromEl()(el)));
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
 
@@ -187,7 +188,7 @@ export default class ActionManager extends EventEmitter {
    */
   public isSelectedEl(el: HTMLElement): boolean {
     // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
-    return el.id === this.selectedEl?.id;
+    return getIdFromEl()(el) === getIdFromEl()(this.selectedEl);
   }
 
   public setSelectedEl(el: HTMLElement | null): void {
@@ -224,7 +225,7 @@ export default class ActionManager extends EventEmitter {
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
+      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
         if (stopped) break;
         return el;
       }
@@ -344,7 +345,11 @@ 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 (
+        !getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) &&
+        (await this.isContainer?.(el)) &&
+        !excludeElList.includes(el)
+      ) {
         addClassName(el, doc, this.containerHighlightClassName);
         break;
       }
@@ -477,9 +482,9 @@ export default class ActionManager extends EventEmitter {
         if (typeof options === 'function') {
           const cfg: CustomizeMoveableOptionsCallbackConfig = {
             targetEl: this.selectedEl,
-            targetElId: this.selectedEl?.id,
+            targetElId: getIdFromEl()(this.selectedEl),
             targetEls: this.selectedElList,
-            targetElIds: this.selectedElList?.map((item) => item.id),
+            targetElIds: this.selectedElList?.map((item) => getIdFromEl()(item) || ''),
             isMulti,
             document: this.getRenderDocument(),
           };
@@ -507,7 +512,7 @@ export default class ActionManager extends EventEmitter {
     }
 
     // 判断元素是否已在多选列表
-    const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+    const existIndex = this.selectedElList.findIndex((selectedDom) => getIdFromEl()(selectedDom) === getIdFromEl()(el));
     if (existIndex !== -1) {
       // 再次点击取消选中
       if (this.selectedElList.length > 1) {