@tmagic/editor 1.4.7 → 1.4.9

package/package.json

@@ -1,9 +1,8 @@
 {
-  "version": "1.4.7",
+  "version": "1.4.9",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
-    "dist/*",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.cjs",
@@ -22,6 +21,11 @@
     },
     "./*": "./*"
   },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
   "license": "Apache-2.0",
   "engines": {
     "node": ">=18"
@@ -50,8 +54,8 @@
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "@tmagic/dep": "1.4.7",
-    "@tmagic/table": "1.4.7"
+    "@tmagic/dep": "1.4.9",
+    "@tmagic/table": "1.4.9"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -65,19 +69,19 @@
     "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.2.11",
-    "vue-tsc": "^2.0.16"
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.19"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/core": "1.4.7",
-    "@tmagic/design": "1.4.7",
-    "@tmagic/form": "1.4.7",
-    "@tmagic/schema": "1.4.7",
-    "@tmagic/stage": "1.4.7",
-    "@tmagic/utils": "1.4.7"
+    "@tmagic/core": "1.4.9",
+    "@tmagic/form": "1.4.9",
+    "@tmagic/design": "1.4.9",
+    "@tmagic/schema": "1.4.9",
+    "@tmagic/utils": "1.4.9",
+    "@tmagic/stage": "1.4.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/DataSourceInput.vue

@@ -106,9 +106,17 @@ watch(
 );
 
 const mouseupHandler = async () => {
+  const selection = globalThis.document.getSelection();
+  const anchorOffset = selection?.anchorOffset || 0;
+  const focusOffset = selection?.focusOffset || 0;
+
   isFocused.value = true;
   await nextTick();
   autocomplete.value?.focus();
+
+  if (focusOffset && input.value) {
+    input.value.setSelectionRange(anchorOffset, focusOffset);
+  }
 };
 
 const blurHandler = () => {

package/src/initService.ts

@@ -11,11 +11,12 @@ import {
   Target,
 } from '@tmagic/dep';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodes, isPage } from '@tmagic/utils';
+import { isPage } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
+import { traverseNode } from './utils';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -204,38 +205,6 @@ export const initServiceEvents = (
     }
   };
 
-  const updateNodeWhenDataSourceChange = (nodes: MNode[]) => {
-    const root = editorService.get('root');
-    const stage = editorService.get('stage');
-
-    if (!root || !stage) return;
-
-    const app = getApp();
-
-    if (!app) return;
-
-    if (app.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-      app.dsl.dataSources = root.dataSources;
-    }
-
-    updateDataSourceSchema();
-
-    nodes.forEach((node) => {
-      const deps = Object.values(root.dataSourceDeps || {});
-      deps.forEach((dep) => {
-        if (dep[node.id]) {
-          stage.update({
-            config: cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: cloneDeep(root),
-          });
-        }
-      });
-    });
-  };
-
   const targetAddHandler = (target: Target) => {
     const root = editorService.get('root');
     if (!root) return;
@@ -267,8 +236,50 @@ export const initServiceEvents = (
     }
   };
 
-  const collectedHandler = (nodes: MNode[]) => {
-    updateNodeWhenDataSourceChange(nodes);
+  const collectedHandler = (nodes: MNode[], deep: boolean) => {
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSourceSchema();
+
+    const allNodes: MNode[] = [];
+
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode<MNode>(node, (node) => {
+          if (!allNodes.includes(node)) {
+            allNodes.push(node);
+          }
+        });
+      });
+    } else {
+      allNodes.push(...nodes);
+    }
+
+    const deps = Object.values(root.dataSourceDeps || {});
+    deps.forEach((dep) => {
+      Object.keys(dep).forEach((id) => {
+        const node = allNodes.find((node) => node.id === id);
+        node &&
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+      });
+    });
   };
 
   depService.on('add-target', targetAddHandler);
@@ -399,12 +410,6 @@ export const initServiceEvents = (
     (root?.items || []).forEach((page) => {
       depService.collectIdle([page], { pageId: page.id }, true);
     });
-
-    const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
-
-    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
-
-    updateNodeWhenDataSourceChange(nodes);
   };
 
   const removeDataSourceTarget = (id: string) => {

package/src/layouts/PropsPanel.vue

@@ -27,6 +27,7 @@
 
     <CodeEditor
       v-if="showSrc"
+      class="m-editor-props-panel-src-code"
       :height="`${editorContentHeight}px`"
       :init-values="values"
       :options="codeOptions"

package/src/layouts/sidebar/layer/use-click.ts

@@ -56,9 +56,12 @@ export const useClick = (
 
   const throttleTime = 300;
   // 鼠标在组件树移动触发高亮
-  const highlightHandler = throttle((event: MouseEvent, data: TreeNodeData) => {
-    highlight(data);
-  }, throttleTime);
+  const highlightHandler: (event: MouseEvent, data: TreeNodeData) => void = throttle(
+    (event: MouseEvent, data: TreeNodeData) => {
+      highlight(data);
+    },
+    throttleTime,
+  );
 
   // 触发画布高亮
   const highlight = (data: TreeNodeData) => {
@@ -67,7 +70,7 @@ export const useClick = (
     services?.stageOverlayService?.get('stage')?.highlight(data.id);
   };
 
-  const nodeClickHandler = (event: MouseEvent, data: TreeNodeData) => {
+  const nodeClickHandler = (event: MouseEvent, data: TreeNodeData): void => {
     if (!nodeStatusMap?.value) return;
 
     if (services?.uiService.get('uiSelectMode')) {
@@ -94,7 +97,7 @@ export const useClick = (
 
     nodeClickHandler,
 
-    nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData) {
+    nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData): void {
       event.preventDefault();
 
       const nodes = services?.editorService.get('nodes') || [];

package/src/layouts/sidebar/layer/use-drag.ts

@@ -144,7 +144,13 @@ export const useDrag = (services: Services | undefined) => {
         targetIndex += 1;
       }
 
-      services?.editorService.dragTo(node, targetParent, targetIndex);
+      const selectedNodes = services.editorService.get('nodes');
+
+      if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
+        services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
+      } else {
+        services.editorService.dragTo([node], targetParent, targetIndex);
+      }
     }
 
     dragState.dragOverNodeId = '';

package/src/services/editor.ts

@@ -49,11 +49,23 @@ import {
   getPageFragmentList,
   getPageList,
   isFixed,
+  moveItemsInContainer,
   setChildrenLayout,
   setLayout,
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
+export interface EditorEvents {
+  'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
+  select: [node: MNode | null];
+  add: [nodes: MNode[]];
+  remove: [nodes: MNode[]];
+  update: [nodes: MNode[]];
+  'move-layer': [offset: number | LayerOffset];
+  'drag-to': [data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }];
+  'history-change': [data: MPage | MPageFragment];
+}
+
 const canUsePluginMethods = {
   async: [
     'getLayout',
@@ -139,7 +151,7 @@ class Editor extends BaseService {
         this.state.stageLoading = false;
       }
 
-      this.emit('root-change', value, preValue);
+      this.emit('root-change', value as StoreState['root'], preValue as StoreState['root']);
     }
   }
 
@@ -877,34 +889,46 @@ class Editor extends BaseService {
     }
   }
 
-  public async dragTo(config: MNode, targetParent: MContainer, targetIndex: number) {
+  public async dragTo(config: MNode | MNode[], targetParent: MContainer, targetIndex: number) {
     if (!targetParent || !Array.isArray(targetParent.items)) return;
 
-    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-    if (!parent || !curNode) throw new Error('找不要删除的节点');
+    const configs = Array.isArray(config) ? config : [config];
 
-    const index = getNodeIndex(curNode.id, parent);
+    const sourceIndicesInTargetParent: number[] = [];
+    const sourceOutTargetParent: MNode[] = [];
 
-    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+    const newLayout = await this.getLayout(targetParent);
 
-    if (parent.id === targetParent.id) {
-      if (index === targetIndex) return;
+    for (const config of configs) {
+      const { parent, node: curNode } = this.getNodeInfo(config.id, false);
+      if (!parent || !curNode) throw new Error('找不要删除的节点');
 
-      if (index < targetIndex) {
-        targetIndex -= 1;
-      }
-    }
+      const index = getNodeIndex(curNode.id, parent);
 
-    const layout = await this.getLayout(parent);
-    const newLayout = await this.getLayout(targetParent);
+      if (parent.id === targetParent.id) {
+        if (typeof index !== 'number' || index === -1) {
+          return;
+        }
+        sourceIndicesInTargetParent.push(index);
+      } else {
+        const layout = await this.getLayout(parent);
+
+        if (newLayout !== layout) {
+          setLayout(config, newLayout);
+        }
 
-    if (newLayout !== layout) {
-      setLayout(config, newLayout);
+        parent.items?.splice(index, 1);
+        sourceOutTargetParent.push(config);
+        this.addModifiedNodeId(parent.id);
+      }
     }
 
-    parent.items?.splice(index, 1);
+    moveItemsInContainer(sourceIndicesInTargetParent, targetParent, targetIndex);
 
-    targetParent.items?.splice(targetIndex, 0, config);
+    sourceOutTargetParent.forEach((config, index) => {
+      targetParent.items?.splice(targetIndex + index, 0, config);
+      this.addModifiedNodeId(config.id);
+    });
 
     const page = this.get('page');
     const root = this.get('root');
@@ -918,12 +942,9 @@ class Editor extends BaseService {
       });
     }
 
-    this.addModifiedNodeId(config.id);
-    this.addModifiedNodeId(parent.id);
-
     this.pushHistoryState();
 
-    this.emit('drag-to', { index, targetIndex, config, parent, targetParent });
+    this.emit('drag-to', { targetIndex, configs, targetParent });
   }
 
   /**
@@ -1019,6 +1040,24 @@ class Editor extends BaseService {
     super.usePlugin(options);
   }
 
+  public on<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public once<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.once(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
   private addModifiedNodeId(id: Id) {
     if (!this.isHistoryStateChange) {
       this.get('modifiedNodeIds').set(id, id);

package/src/services/props.ts

@@ -26,7 +26,13 @@ import type { Id, MComponent, MNode } from '@tmagic/schema';
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
-import type { AsyncHookPlugin, PropsState, SyncHookPlugin } from '@editor/type';
+import type {
+  AsyncHookPlugin,
+  PropsFormConfigFunction,
+  PropsFormValueFunction,
+  PropsState,
+  SyncHookPlugin,
+} from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
 
 import BaseService from './BaseService';
@@ -60,7 +66,7 @@ class Props extends BaseService {
     ]);
   }
 
-  public setPropsConfigs(configs: Record<string, FormConfig>) {
+  public setPropsConfigs(configs: Record<string, FormConfig | PropsFormConfigFunction>) {
     Object.keys(configs).forEach((type: string) => {
       this.setPropsConfig(toLine(type), configs[type]);
     });
@@ -71,8 +77,13 @@ class Props extends BaseService {
     return fillConfig(config, typeof labelWidth !== 'function' ? labelWidth : '80px');
   }
 
-  public async setPropsConfig(type: string, config: FormConfig) {
-    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+  public async setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction) {
+    let c = config;
+    if (typeof config === 'function') {
+      c = config({ editorService });
+    }
+
+    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
   }
 
   /**
@@ -88,7 +99,7 @@ class Props extends BaseService {
     return cloneDeep(this.state.propsConfigMap[toLine(type)] || (await this.fillConfig([])));
   }
 
-  public setPropsValues(values: Record<string, Partial<MNode>>) {
+  public setPropsValues(values: Record<string, Partial<MNode> | PropsFormValueFunction>) {
     Object.keys(values).forEach((type: string) => {
       this.setPropsValue(toLine(type), values[type]);
     });
@@ -99,8 +110,12 @@ class Props extends BaseService {
    * @param type 组件类型
    * @param value 组件初始值
    */
-  public async setPropsValue(type: string, value: Partial<MNode>) {
-    this.state.propsValueMap[toLine(type)] = value;
+  public async setPropsValue(type: string, value: Partial<MNode> | PropsFormValueFunction) {
+    let v = value;
+    if (typeof value === 'function') {
+      v = value({ editorService });
+    }
+    this.state.propsValueMap[toLine(type)] = v;
   }
 
   /**

package/src/theme/props-panel.scss

@@ -8,7 +8,7 @@
     z-index: 30;
   }
 
-  .magic-code-editor {
+  .m-editor-props-panel-src-code.magic-code-editor {
     position: absolute;
     left: 0;
     top: 0;

package/src/type.ts

@@ -744,3 +744,6 @@ export interface EventBus extends EventEmitter {
   ): this;
   emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
 }
+
+export type PropsFormConfigFunction = (data: { editorService: EditorService }) => FormConfig;
+export type PropsFormValueFunction = (data: { editorService: EditorService }) => Partial<MNode>;

package/src/utils/editor.ts

@@ -285,10 +285,29 @@ export const traverseNode = <T extends NodeItem = NodeItem>(
 ) => {
   cb(node, parents);
 
-  if (node.items?.length) {
+  if (Array.isArray(node.items) && node.items.length) {
     parents.push(node);
     node.items.forEach((item) => {
       traverseNode(item as T, cb, [...parents]);
     });
   }
 };
+
+export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer, targetIndex: number) => {
+  sourceIndices.sort((a, b) => a - b);
+  for (let i = sourceIndices.length - 1; i >= 0; i--) {
+    const sourceIndex = sourceIndices[i];
+    if (sourceIndex === targetIndex) {
+      continue;
+    }
+    const [item] = parent.items.splice(sourceIndex, 1);
+    parent.items.splice(sourceIndex < targetIndex ? targetIndex - 1 : targetIndex, 0, item);
+
+    // 更新后续源索引（因为数组已经改变）
+    for (let j = i - 1; j >= 0; j--) {
+      if (sourceIndices[j] >= targetIndex) {
+        sourceIndices[j] += 1;
+      }
+    }
+  }
+};

package/types/layouts/sidebar/layer/use-click.d.ts

@@ -60,5 +60,5 @@ export declare const useClick: (services: Services | undefined, isCtrlKeyDown: R
     }> | undefined>;
     nodeClickHandler: (event: MouseEvent, data: TreeNodeData) => void;
     nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData): void;
-    highlightHandler: import("lodash-es").DebouncedFunc<(event: MouseEvent, data: TreeNodeData) => void>;
+    highlightHandler: (event: MouseEvent, data: TreeNodeData) => void;
 };

package/types/services/editor.d.ts

@@ -1,9 +1,23 @@
 import { Writable } from 'type-fest';
 import { type TargetOptions } from '@tmagic/dep';
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+import type { Id, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import BaseService from '../services/BaseService';
 import type { AddMNode, AsyncHookPlugin, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '../type';
 import { LayerOffset, Layout } from '../type';
+export interface EditorEvents {
+    'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
+    select: [node: MNode | null];
+    add: [nodes: MNode[]];
+    remove: [nodes: MNode[]];
+    update: [nodes: MNode[]];
+    'move-layer': [offset: number | LayerOffset];
+    'drag-to': [data: {
+        targetIndex: number;
+        configs: MNode | MNode[];
+        targetParent: MContainer;
+    }];
+    'history-change': [data: MPage | MPageFragment];
+}
 declare const canUsePluginMethods: {
     async: readonly ["getLayout", "highlight", "select", "multiSelect", "doAdd", "add", "doRemove", "remove", "doUpdate", "update", "sort", "copy", "paste", "doPaste", "doAlignCenter", "alignCenter", "moveLayer", "moveToContainer", "dragTo", "undo", "redo", "move"];
     sync: never[];
@@ -136,7 +150,7 @@ declare class Editor extends BaseService {
      * @param targetId 容器ID
      */
     moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined>;
-    dragTo(config: MNode, targetParent: MContainer, targetIndex: number): Promise<void>;
+    dragTo(config: MNode | MNode[], targetParent: MContainer, targetIndex: number): Promise<void>;
     /**
      * 撤销当前操作
      * @returns 上一次数据
@@ -152,6 +166,9 @@ declare class Editor extends BaseService {
     destroy(): void;
     resetModifiedNodeId(): void;
     usePlugin(options: AsyncHookPlugin<AsyncMethodName, Editor>): void;
+    on<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    once<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
+    emit<Name extends keyof EditorEvents, Param extends EditorEvents[Name]>(eventName: Name, ...args: Param): boolean;
     private addModifiedNodeId;
     private pushHistoryState;
     private changeHistoryState;

package/types/services/props.d.ts

@@ -2,7 +2,7 @@ import { Writable } from 'type-fest';
 import { type TargetOptions } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
-import type { AsyncHookPlugin, SyncHookPlugin } from '../type';
+import type { AsyncHookPlugin, PropsFormConfigFunction, PropsFormValueFunction, SyncHookPlugin } from '../type';
 import BaseService from './BaseService';
 declare const canUsePluginMethods: {
     async: readonly ["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue", "fillConfig", "getDefaultPropsValue"];
@@ -13,22 +13,22 @@ type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 declare class Props extends BaseService {
     private state;
     constructor();
-    setPropsConfigs(configs: Record<string, FormConfig>): void;
+    setPropsConfigs(configs: Record<string, FormConfig | PropsFormConfigFunction>): void;
     fillConfig(config: FormConfig, labelWidth?: string): Promise<FormConfig>;
-    setPropsConfig(type: string, config: FormConfig): Promise<void>;
+    setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction): Promise<void>;
     /**
      * 获取指点类型的组件属性表单配置
      * @param type 组件类型
      * @returns 组件属性表单配置
      */
     getPropsConfig(type: string): Promise<FormConfig>;
-    setPropsValues(values: Record<string, Partial<MNode>>): void;
+    setPropsValues(values: Record<string, Partial<MNode> | PropsFormValueFunction>): void;
     /**
      * 为指点类型组件设置组件初始值
      * @param type 组件类型
      * @param value 组件初始值
      */
-    setPropsValue(type: string, value: Partial<MNode>): Promise<void>;
+    setPropsValue(type: string, value: Partial<MNode> | PropsFormValueFunction): Promise<void>;
     /**
      * 获取指定类型的组件初始值
      * @param type 组件类型

package/types/type.d.ts

@@ -617,3 +617,9 @@ export interface EventBus extends EventEmitter {
     on<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, listener: (...args: Param) => void): this;
     emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
 }
+export type PropsFormConfigFunction = (data: {
+    editorService: EditorService;
+}) => FormConfig;
+export type PropsFormValueFunction = (data: {
+    editorService: EditorService;
+}) => Partial<MNode>;

package/types/utils/editor.d.ts

@@ -56,3 +56,4 @@ export interface NodeItem {
     [key: string]: any;
 }
 export declare const traverseNode: <T extends NodeItem = NodeItem>(node: T, cb: (node: T, parents: T[]) => void, parents?: T[]) => void;
+export declare const moveItemsInContainer: (sourceIndices: number[], parent: MContainer, targetIndex: number) => void;

package/tsconfig.build.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": true,
-    "declarationDir": "types",
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./types",
-    "paths": {
-      "@editor/*": ["src/*"],
-    },
-  },
-  "include": [
-		"src"
-	],
-}