@tmagic/editor 1.4.16 → 1.5.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.16",
+  "version": "1.5.0-beta.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -55,8 +55,8 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/dep": "1.4.16",
-    "@tmagic/table": "1.4.16"
+    "@tmagic/dep": "1.5.0-beta.0",
+    "@tmagic/table": "1.5.0-beta.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -71,19 +71,18 @@
     "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.3.5",
-    "vue-tsc": "^2.0.19"
+    "vite": "^5.3.5"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.4.35",
-    "@tmagic/core": "1.4.16",
-    "@tmagic/design": "1.4.16",
-    "@tmagic/schema": "1.4.16",
-    "@tmagic/stage": "1.4.16",
-    "@tmagic/utils": "1.4.16",
-    "@tmagic/form": "1.4.16"
+    "@tmagic/form": "1.5.0-beta.0",
+    "@tmagic/core": "1.5.0-beta.0",
+    "@tmagic/schema": "1.5.0-beta.0",
+    "@tmagic/stage": "1.5.0-beta.0",
+    "@tmagic/design": "1.5.0-beta.0",
+    "@tmagic/utils": "1.5.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -91,9 +90,6 @@
     }
   },
   "scripts": {
-    "build": "npm run build:type && vite build",
-    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "clear:type": "rimraf ./types",
-    "check:type": "vue-tsc --noEmit --project tsconfig.build.json"
+    "build": "vite build"
   }
 }

package/src/components/CodeParams.vue

@@ -39,7 +39,7 @@ const getFormConfig = (items: FormConfig = []) => [
     type: 'fieldset',
     items,
     legend: '参数',
-    labelWidth: '70px',
+    labelWidth: '120px',
     name: props.name,
   },
 ];

package/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: () => ({}),
 };

package/src/fields/DataSourceInput.vue

@@ -54,7 +54,7 @@ import { Coin } from '@element-plus/icons-vue';
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
-import { isNumber } from '@tmagic/utils';
+import { getKeysArray, isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
@@ -218,7 +218,7 @@ const fieldQuerySearch = (
   const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
 
   // 可能是xx.xx.xx，存在链式调用
-  const keys = dsKey.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
+  const keys = getKeysArray(dsKey);
 
   // 最前的是数据源id
   const dsId = keys.shift();

package/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>
 

package/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,27 +72,32 @@ 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) => {
@@ -99,7 +105,7 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   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[]);
   });
 

package/src/initService.ts

@@ -192,6 +192,54 @@ export const initServiceEvents = (
     ((event: 'update:modelValue', value: MApp | null) => void),
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
+  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
+    if (!value) return;
+
+    value.codeBlocks = value.codeBlocks || {};
+    value.dataSources = value.dataSources || [];
+
+    codeBlockService.setCodeDsl(value.codeBlocks);
+    dataSourceService.set('dataSources', value.dataSources);
+
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
+
+    Object.entries(value.codeBlocks).forEach(([id, code]) => {
+      depService.addTarget(createCodeBlockTarget(id, code));
+    });
+
+    dataSourceService.get('dataSources').forEach((ds) => {
+      initDataSourceDepTarget(ds);
+    });
+
+    if (Array.isArray(value.items)) {
+      collectIdle(value.items, true);
+    } else {
+      depService.clear();
+      delete value.dataSourceDeps;
+      delete value.dataSourceCondDeps;
+    }
+
+    const nodeId = editorService.get('node')?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set('nodes', [value]);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+    }
+
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit('update:modelValue', value);
+    }
+  };
+
   const getApp = () => {
     const stage = editorService.get('stage');
     return stage?.renderer.runtime?.getApp?.();
@@ -292,55 +340,6 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
-    if (!value) return;
-
-    value.codeBlocks = value.codeBlocks || {};
-    value.dataSources = value.dataSources || [];
-
-    codeBlockService.setCodeDsl(value.codeBlocks);
-    dataSourceService.set('dataSources', value.dataSources);
-
-    depService.removeTargets(DepTargetType.CODE_BLOCK);
-
-    Object.entries(value.codeBlocks).forEach(([id, code]) => {
-      depService.addTarget(createCodeBlockTarget(id, code));
-    });
-
-    dataSourceService.get('dataSources').forEach((ds) => {
-      initDataSourceDepTarget(ds);
-    });
-
-    if (Array.isArray(value.items)) {
-      value.items.forEach((page) => {
-        depService.collectIdle([page], { pageId: page.id }, true);
-      });
-    } else {
-      depService.clear();
-      delete value.dataSourceDeps;
-    }
-
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
-
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
-
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
-  };
-
   const collectIdle = (nodes: MNode[], deep: boolean) => {
     nodes.forEach((node) => {
       let pageId: Id | undefined;
@@ -372,7 +371,7 @@ export const initServiceEvents = (
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    depService.collectIdle([page], { pageId: page.id }, true);
+    collectIdle([page], true);
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -407,9 +406,7 @@ export const initServiceEvents = (
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
 
-    (root?.items || []).forEach((page) => {
-      depService.collectIdle([page], { pageId: page.id }, true);
-    });
+    collectIdle(root?.items || [], true);
   };
 
   const removeDataSourceTarget = (id: string) => {

package/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;
 

package/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) {

package/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);

package/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);
     }
   }
 

package/src/theme/page-bar.scss

@@ -81,8 +81,8 @@
 }
 
 .page-bar-popover {
-  &.el-popper.el-popover {
-    padding: 10px 0;
+  &.tmagic-design-popper {
+    padding: 4px 0;
   }
 
   .menu-item {

package/src/utils/data-source/index.ts

@@ -1,6 +1,11 @@
 import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
 import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, isNumber } from '@tmagic/utils';
+import {
+  DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
+  dataSourceTemplateRegExp,
+  getKeysArray,
+  isNumber,
+} from '@tmagic/utils';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
@@ -118,7 +123,7 @@ export const getFormValue = (type: string, values: Partial<DataSourceSchema>): P
    * context：上下文对象
    *
    * interface Content {
-   *  app: AppCore;
+   *  app: TMagicApp;
    *  dataSource: HttpDataSource;
    * }
    *
@@ -135,7 +140,7 @@ export const getFormValue = (type: string, values: Partial<DataSourceSchema>): P
     * context：上下文对象
     *
     * interface Content {
-    *  app: AppCore;
+    *  app: TMagicApp;
     *  dataSource: HttpDataSource;
     * }
     *
@@ -152,7 +157,7 @@ export const getDisplayField = (dataSources: DataSourceSchema[], key: string) =>
   const displayState: { value: string; type: 'var' | 'text' }[] = [];
 
   // 匹配es6字符串模块
-  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+  const matches = key.matchAll(dataSourceTemplateRegExp);
   let index = 0;
   for (const match of matches) {
     if (typeof match.index === 'undefined') break;
@@ -167,25 +172,22 @@ export const getDisplayField = (dataSources: DataSourceSchema[], key: string) =>
     let ds: DataSourceSchema | undefined;
     let fields: DataSchema[] | undefined;
     // 将模块解析成数据源对应的值
-    match[1]
-      .replaceAll(/\[(\d+)\]/g, '.$1')
-      .split('.')
-      .forEach((item, index) => {
-        if (index === 0) {
-          ds = dataSources.find((ds) => ds.id === item);
-          dsText += ds?.title || item;
-          fields = ds?.fields;
-          return;
-        }
-
-        if (isNumber(item)) {
-          dsText += `[${item}]`;
-        } else {
-          const field = fields?.find((field) => field.name === item);
-          fields = field?.fields;
-          dsText += `.${field?.title || item}`;
-        }
-      });
+    getKeysArray(match[1]).forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      if (isNumber(item)) {
+        dsText += `[${item}]`;
+      } else {
+        const field = fields?.find((field) => field.name === item);
+        fields = field?.fields;
+        dsText += `.${field?.title || item}`;
+      }
+    });
 
     displayState.push({
       type: 'var',

package/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) {

package/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';

package/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);

package/src/utils/props.ts

@@ -18,6 +18,7 @@
  */
 
 import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+import { NODE_CONDS_KEY } from '@tmagic/schema';
 
 export const arrayOptions = [
   { text: '包含', value: 'include' },
@@ -359,7 +360,7 @@ export const displayTabConfig: TabPaneConfig = {
   items: [
     {
       type: 'display-conds',
-      name: 'displayConds',
+      name: NODE_CONDS_KEY,
       titlePrefix: '条件组',
       defaultValue: [],
     },