@tmagic/editor 1.4.5 → 1.4.7

package/src/services/dataSource.ts

@@ -1,14 +1,18 @@
 import { reactive } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, get } from 'lodash-es';
 import { Writable } from 'type-fest';
 
 import type { EventOption } from '@tmagic/core';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
-import type { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema, Id, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
+import editorService from '@editor/services/editor';
+import storageService, { Protocol } from '@editor/services/storage';
 import type { DatasourceTypeOption, SyncHookPlugin } from '@editor/type';
 import { getFormConfig, getFormValue } from '@editor/utils/data-source';
+import { COPY_DS_STORAGE_KEY } from '@editor/utils/editor';
 
 import BaseService from './BaseService';
 
@@ -102,7 +106,7 @@ class DataSource extends BaseService {
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,
-      id: this.createId(),
+      id: config.id && !this.getDataSourceById(config.id) ? config.id : this.createId(),
     };
 
     this.get('dataSources').push(newConfig);
@@ -116,7 +120,6 @@ class DataSource extends BaseService {
     const dataSources = this.get('dataSources');
 
     const index = dataSources.findIndex((ds) => ds.id === config.id);
-
     dataSources[index] = cloneDeep(config);
 
     this.emit('update', config);
@@ -153,6 +156,59 @@ class DataSource extends BaseService {
   public usePlugin(options: SyncHookPlugin<SyncMethodName, DataSource>): void {
     super.usePlugin(options);
   }
+
+  /**
+   * 复制时会带上组件关联的数据源
+   * @param config 组件节点配置
+   * @returns
+   */
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
+    const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
+    const copyData: DataSourceSchema[] = [];
+
+    if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
+      const customTarget = new Target({
+        ...collectorOptions,
+      });
+
+      const coperWatcher = new Watcher();
+
+      coperWatcher.addTarget(customTarget);
+
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+
+      Object.keys(customTarget.deps).forEach((nodeId: Id) => {
+        const node = editorService.getNodeById(nodeId);
+        if (!node) return;
+        customTarget!.deps[nodeId].keys.forEach((key) => {
+          const [relateDsId] = get(node, key);
+          const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
+          if (!isExist) {
+            const relateDs = this.getDataSourceById(relateDsId);
+            if (relateDs) {
+              copyData.push(relateDs);
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_DS_STORAGE_KEY, copyData, {
+      protocol: Protocol.OBJECT,
+    });
+  }
+  /**
+   * 粘贴数据源
+   * @returns
+   */
+  public paste() {
+    const dataSource: DataSourceSchema[] = storageService.getItem(COPY_DS_STORAGE_KEY);
+    dataSource.forEach((item: DataSourceSchema) => {
+      // 不覆盖同样id的数据源
+      if (!this.getDataSourceById(item.id)) {
+        this.add(item);
+      }
+    });
+  }
 }
 
 export type DataSourceService = DataSource;

package/src/services/dep.ts

@@ -17,18 +17,35 @@
  */
 import { reactive } from 'vue';
 
-import { DepTargetType, type Target, Watcher } from '@tmagic/dep';
+import { type DepExtendedData, DepTargetType, type Target, type TargetNode, Watcher } from '@tmagic/dep';
 import type { Id, MNode } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
+
+import { IdleTask } from '@editor/utils/idle-task';
 
 import BaseService from './BaseService';
 
+export interface DepEvents {
+  'add-target': [target: Target];
+  'remove-target': [id: string | number];
+  collected: [nodes: MNode[], deep: boolean];
+}
+
+const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
+
 class Dep extends BaseService {
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
   public removeTargets(type: string = DepTargetType.DEFAULT) {
     this.watcher.removeTargets(type);
 
-    this.emit('remove-target');
+    const targets = this.watcher.getTargets(type);
+
+    if (!targets) return;
+
+    for (const target of Object.values(targets)) {
+      this.emit('remove-target', target.id);
+    }
   }
 
   public getTargets(type: string = DepTargetType.DEFAULT) {
@@ -46,18 +63,55 @@ class Dep extends BaseService {
 
   public removeTarget(id: Id, type: string = DepTargetType.DEFAULT) {
     this.watcher.removeTarget(id, type);
-    this.emit('remove-target');
+    this.emit('remove-target', id);
   }
 
   public clearTargets() {
     this.watcher.clearTargets();
   }
 
-  public collect(nodes: MNode[], deep = false, type?: DepTargetType) {
-    this.watcher.collect(nodes, deep, type);
+  public collect(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      this.collectNode(node, target, depExtendedData, deep);
+    });
+
     this.emit('collected', nodes, deep);
   }
 
+  public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      idleTask.enqueueTask(
+        ({ node, deep, target }) => {
+          this.collectNode(node, target, depExtendedData, deep);
+        },
+        {
+          node,
+          deep,
+          target,
+        },
+      );
+    });
+
+    idleTask.once('finish', () => {
+      this.emit('collected', nodes, deep);
+    });
+  }
+
+  collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
+    // 先删除原有依赖，重新收集
+    if (isPage(node)) {
+      Object.entries(target.deps).forEach(([depKey, dep]) => {
+        if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
+          delete target.deps[depKey];
+        }
+      });
+    } else {
+      this.watcher.removeTargetDep(target, node);
+    }
+
+    this.watcher.collectItem(node, target, depExtendedData, deep);
+  }
+
   public clear(nodes?: MNode[]) {
     return this.watcher.clear(nodes);
   }
@@ -73,6 +127,24 @@ class Dep extends BaseService {
   public hasSpecifiedTypeTarget(type: string = DepTargetType.DEFAULT): boolean {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
+
+  public on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public once<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.once(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
 }
 
 export type DepService = Dep;

package/src/services/editor.ts

@@ -20,14 +20,13 @@ import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 import { Writable } from 'type-fest';
 
-import { DepTargetType } from '@tmagic/dep';
+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 BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
-import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
 import type {
@@ -661,16 +660,20 @@ class Editor extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  public copyWithRelated(config: MNode | MNode[]): void {
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
-    // 关联的组件也一并复制
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_COMP_WHEN_COPY,
-      DepTargetType.RELATED_COMP_WHEN_COPY,
-    );
-    if (customTarget) {
+
+    // 初始化复制组件相关的依赖收集器
+    if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
+      const customTarget = new Target({
+        ...collectorOptions,
+      });
+
+      const coperWatcher = new Watcher();
+
+      coperWatcher.addTarget(customTarget);
+
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
       Object.keys(customTarget.deps).forEach((nodeId: Id) => {
         const node = this.getNodeById(nodeId);
         if (!node) return;
@@ -686,6 +689,7 @@ class Editor extends BaseService {
         });
       });
     }
+
     storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
       protocol: Protocol.OBJECT,
     });
@@ -696,7 +700,7 @@ class Editor extends BaseService {
    * @param position 粘贴的坐标
    * @returns 添加后的组件节点配置
    */
-  public async paste(position: PastePosition = {}): Promise<MNode | MNode[] | void> {
+  public async paste(position: PastePosition = {}, collectorOptions?: TargetOptions): Promise<MNode | MNode[] | void> {
     const config: MNode[] = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config)) return;
 
@@ -711,13 +715,18 @@ class Editor extends BaseService {
       }
     }
     const pasteConfigs = await this.doPaste(config, position);
-    propsService.replaceRelateId(config, pasteConfigs);
+
+    if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
+      propsService.replaceRelateId(config, pasteConfigs, collectorOptions);
+    }
+
     return this.add(pasteConfigs, parent);
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
     propsService.clearRelateId();
-    const pasteConfigs = beforePaste(position, cloneDeep(config));
+    const doc = this.get('stage')?.renderer.contentWindow?.document;
+    const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
 

package/src/services/props.ts

@@ -20,12 +20,11 @@ import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
 import { Writable } from 'type-fest';
 
-import { DepTargetType } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MComponent, MNode } from '@tmagic/schema';
-import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
+import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
-import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
 import type { AsyncHookPlugin, PropsState, SyncHookPlugin } from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
@@ -196,16 +195,24 @@ class Props extends BaseService {
    * @param originConfigs 原组件配置
    * @param targetConfigs 待替换的组件配置
    */
-  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]) {
+  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[], collectorOptions: TargetOptions) {
     const relateIdMap = this.getRelateIdMap();
+
     if (Object.keys(relateIdMap).length === 0) return;
 
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target) return;
+    const target = new Target({
+      ...collectorOptions,
+    });
+
+    const coperWatcher = new Watcher();
+
+    coperWatcher.addTarget(target);
+    coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
 
     originConfigs.forEach((config: MNode) => {
       const newId = relateIdMap[config.id];
-      const targetConfig = targetConfigs.find((targetConfig) => targetConfig.id === newId);
+      const path = getNodePath(newId, targetConfigs);
+      const targetConfig = path[path.length - 1];
 
       if (!targetConfig) return;
 
@@ -213,9 +220,13 @@ class Props extends BaseService {
         const relateOriginId = getValueByKeyPath(fullKey, config);
         const relateTargetId = relateIdMap[relateOriginId];
         if (!relateTargetId) return;
-
         setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
+
+      // 递归items
+      if (config.items && Array.isArray(config.items)) {
+        this.replaceRelateId(config.items, targetConfigs, collectorOptions);
+      }
     });
   }
 

package/src/services/stageOverlay.ts

@@ -90,6 +90,7 @@ class StageOverlay extends BaseService {
   public createStage(stageOptions: StageOptions = {}) {
     return useStage({
       ...stageOptions,
+      zoom: 1,
       runtimeUrl: '',
       autoScrollIntoView: false,
       render: async (stage: StageCore) => {

package/src/type.ts

@@ -150,6 +150,7 @@ export interface StageOptions {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  zoom?: number;
 }
 
 export interface StoreState {

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

@@ -1,5 +1,6 @@
 import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
 import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
+import { isNumber } from '@tmagic/utils';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
@@ -165,20 +166,26 @@ export const getDisplayField = (dataSources: DataSourceSchema[], key: string) =>
     let dsText = '';
     let ds: DataSourceSchema | undefined;
     let fields: DataSchema[] | undefined;
-
     // 将模块解析成数据源对应的值
-    match[1].split('.').forEach((item, index) => {
-      if (index === 0) {
-        ds = dataSources.find((ds) => ds.id === item);
-        dsText += ds?.title || item;
-        fields = ds?.fields;
-        return;
-      }
-
-      const field = fields?.find((field) => field.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
-    });
+    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}`;
+        }
+      });
 
     displayState.push({
       type: 'var',

package/src/utils/editor.ts

@@ -25,6 +25,8 @@ import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isP
 
 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';
 
 /**
  * 获取所有页面配置

package/src/utils/idle-task.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from 'events';
+
+export interface IdleTaskEvents {
+  finish: [];
+}
+
+globalThis.requestIdleCallback =
+  globalThis.requestIdleCallback ||
+  function (cb) {
+    const start = Date.now();
+    return setTimeout(() => {
+      cb({
+        didTimeout: false,
+        timeRemaining() {
+          return Math.max(0, 50 - (Date.now() - start));
+        },
+      });
+    }, 1);
+  };
+
+export class IdleTask<T = any> extends EventEmitter {
+  private taskList: {
+    handler: (data: T) => void;
+    data: T;
+  }[] = [];
+
+  private taskHandle: number | null = null;
+
+  public enqueueTask(taskHandler: (data: T) => void, taskData: T) {
+    this.taskList.push({
+      handler: taskHandler,
+      data: taskData,
+    });
+
+    if (!this.taskHandle) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 10000 });
+    }
+  }
+
+  public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public once<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.once(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
+  private runTaskQueue(deadline: IdleDeadline) {
+    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+      const task = this.taskList.shift();
+      task!.handler(task!.data);
+    }
+
+    if (this.taskList.length) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 10000 });
+    } else {
+      this.taskHandle = 0;
+
+      this.emit('finish');
+    }
+  }
+}

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 { isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import propsService from '@editor/services/props';
@@ -15,7 +15,7 @@ import { generatePageNameByApp, getInitPositionStyle } from '@editor/utils/edito
  * @param config 待粘贴的元素配置(复制时保存的那份配置)
  * @returns
  */
-export const beforePaste = (position: PastePosition, config: MNode[]): MNode[] => {
+export const beforePaste = (position: PastePosition, config: MNode[], doc?: Document): MNode[] => {
   if (!config[0]?.style) return config;
   const curNode = editorService.get('node');
   // 将数组中第一个元素的坐标作为参照点
@@ -29,7 +29,7 @@ export const beforePaste = (position: PastePosition, config: MNode[]): MNode[] =
     if (!isEmpty(pastePosition) && curNode?.items) {
       // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
       // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
-      pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      pastePosition = getPositionInContainer(pastePosition, curNode.id, doc);
     }
 
     // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
@@ -71,12 +71,12 @@ export const beforePaste = (position: PastePosition, config: MNode[]): MNode[] =
  * @param id 元素id
  * @returns PastePosition 转换后的坐标
  */
-export const getPositionInContainer = (position: PastePosition = {}, id: Id) => {
+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 parentElRect = parentEl?.getBoundingClientRect();
-  left = left - (parentElRect?.left || 0);
-  top = top - (parentElRect?.top || 0);
+  left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
+  top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
   return {
     left,
     top,

package/types/editorProps.d.ts

@@ -1,5 +1,4 @@
 import type { EventOption } from '@tmagic/core';
-import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, { ContainerHighlightType, type CustomizeMoveableOptionsCallbackConfig, type GuidesOptions, type MoveableOptions, RenderType, type UpdateDragEl } from '@tmagic/stage';
@@ -60,8 +59,6 @@ export interface EditorProps {
     };
     /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
     disabledDragStart?: boolean;
-    /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
-    collectorOptions?: CustomTargetOptions;
     /** 标尺配置 */
     guidesOptions?: Partial<GuidesOptions>;
     /** 禁止多选 */

package/types/index.d.ts

@@ -43,6 +43,7 @@ export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
+export { default as FloatingBox } from './components/FloatingBox.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 declare const _default: {
     install: (app: App, opt?: Partial<InstallOptions>) => void;