@tmagic/editor 1.3.4 → 1.3.6

package/src/services/props.ts

@@ -17,12 +17,15 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
+import { cloneDeep, get, mergeWith, set } from 'lodash-es';
 
+import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
+import type { Id, MComponent, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
+import depService from '@editor/services/dep';
+import editorService from '@editor/services/editor';
 import type { PropsState } from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
 
@@ -32,18 +35,19 @@ class Props extends BaseService {
   private state = reactive<PropsState>({
     propsConfigMap: {},
     propsValueMap: {},
+    relateIdMap: {},
   });
 
   constructor() {
     super([
-      'setPropsConfig',
-      'getPropsConfig',
-      'setPropsValue',
-      'getPropsValue',
-      'createId',
-      'setNewItemId',
-      'fillConfig',
-      'getDefaultPropsValue',
+      { name: 'setPropsConfig', isAsync: true },
+      { name: 'getPropsConfig', isAsync: true },
+      { name: 'setPropsValue', isAsync: true },
+      { name: 'getPropsValue', isAsync: true },
+      { name: 'createId', isAsync: false },
+      { name: 'setNewItemId', isAsync: true },
+      { name: 'fillConfig', isAsync: true },
+      { name: 'getDefaultPropsValue', isAsync: true },
     ]);
   }
 
@@ -135,11 +139,17 @@ class Props extends BaseService {
 
   /**
    * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
    * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
    */
   /* eslint no-param-reassign: ["error", { "props": false }] */
-  public async setNewItemId(config: MNode) {
-    config.id = await this.createId(config.type || 'component');
+  public async setNewItemId(config: MNode, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = await this.createId(config.type || 'component');
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
 
     if (config.items && Array.isArray(config.items)) {
       for (const item of config.items) {
@@ -176,11 +186,59 @@ class Props extends BaseService {
     this.state.propsValueMap = {};
   }
 
+  /**
+   * 替换关联ID
+   * @param originConfigs 原组件配置
+   * @param targetConfigs 待替换的组件配置
+   */
+  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]) {
+    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;
+    originConfigs.forEach((config: MNode) => {
+      const newId = relateIdMap[config.id];
+      const targetConfig = targetConfigs.find((targetConfig) => targetConfig.id === newId);
+      if (!targetConfig) return;
+      target.deps[config.id]?.keys?.forEach((fullKey) => {
+        const relateOriginId = get(config, fullKey);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId) return;
+        set(targetConfig, fullKey, relateTargetId);
+      });
+    });
+  }
+
+  /**
+   * 清除setNewItemId前后映射关系
+   */
+  public clearRelateId() {
+    this.state.relateIdMap = {};
+  }
+
   public destroy() {
     this.resetState();
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+
+  /**
+   * 获取setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @returns 新旧ID映射
+   */
+  private getRelateIdMap() {
+    return this.state.relateIdMap;
+  }
+
+  /**
+   * 记录setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @param newId 分配的新ID
+   */
+  private setRelateId(oldId: Id, newId: Id) {
+    this.state.relateIdMap[oldId] = newId;
+  }
 }
 
 export type PropsService = Props;

package/src/services/storage.ts

@@ -25,7 +25,14 @@ export class WebStorage extends BaseService {
   private namespace = 'tmagic';
 
   constructor() {
-    super(['getStorage', 'getNamespace', 'clear', 'getItem', 'removeItem', 'setItem']);
+    super([
+      { name: 'getStorage', isAsync: false },
+      { name: 'getNamespace', isAsync: false },
+      { name: 'clear', isAsync: false },
+      { name: 'getItem', isAsync: false },
+      { name: 'removeItem', isAsync: false },
+      { name: 'setItem', isAsync: false },
+    ]);
   }
 
   /**
@@ -38,26 +45,27 @@ export class WebStorage extends BaseService {
    *    },
    * });
    */
-  public async getStorage(): Promise<Storage> {
+  public getStorage(): Storage {
     return this.storage;
   }
 
-  public async getNamespace(): Promise<string> {
+  public getNamespace(): string {
     return this.namespace;
   }
 
   /**
    * 清理，支持storageService.usePlugin
    */
-  public async clear(): Promise<void> {
-    const storage = await this.getStorage();
+  public clear(): void {
+    const storage = this.getStorage();
     storage.clear();
   }
   /**
    * 获取存储项，支持storageService.usePlugin
    */
-  public async getItem(key: string, options: Options = {}): Promise<any> {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+  public getItem(key: string, options: Options = {}): any {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
     const { protocol = options.protocol, item } = this.getValueAndProtocol(
       storage.getItem(`${options.namespace || namespace}:${key}`),
     );
@@ -80,24 +88,26 @@ export class WebStorage extends BaseService {
   /**
    * 获取指定索引位置的key
    */
-  public async key(index: number): Promise<string | null> {
-    const storage = await this.getStorage();
+  public key(index: number): string | null {
+    const storage = this.getStorage();
     return storage.key(index);
   }
 
   /**
    * 移除存储项，支持storageService.usePlugin
    */
-  public async removeItem(key: string, options: Options = {}): Promise<void> {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+  public removeItem(key: string, options: Options = {}): void {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
     storage.removeItem(`${options.namespace || namespace}:${key}`);
   }
 
   /**
    * 设置存储项，支持storageService.usePlugin
    */
-  public async setItem(key: string, value: any, options: Options = {}): Promise<void> {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+  public setItem(key: string, value: any, options: Options = {}): void {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
     let item = value;
     const protocol = options.protocol ? `${options.protocol}:` : '';
     if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) {

package/src/services/ui.ts

@@ -52,7 +52,10 @@ const state = reactive<UiState>({
 
 class Ui extends BaseService {
   constructor() {
-    super(['zoom', 'calcZoom']);
+    super([
+      { name: 'zoom', isAsync: true },
+      { name: 'calcZoom', isAsync: true },
+    ]);
   }
 
   public set<K extends keyof UiState, T extends UiState[K]>(name: K, value: T) {

package/src/theme/floating-box.scss

@@ -0,0 +1,30 @@
+.m-editor-float-box {
+  position: absolute;
+  background-color: #fff;
+  z-index: 100;
+  border: 1px solid $--border-color;
+  display: flex;
+  flex-direction: column;
+
+  .m-editor-float-box-title {
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 5px;
+    cursor: move;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid $--border-color;
+  }
+
+  .m-editor-float-box-body {
+    padding: 5px;
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.m-editor-floating-box-moveable {
+  opacity: 0;
+}

package/src/theme/layer-panel.scss

@@ -4,4 +4,23 @@
   .m-editor-tree {
     padding-top: 48px;
   }
+
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
+    }
+
+    .tmagic-design-button {
+      margin-right: 10px;
+    }
+  }
 }

package/src/theme/stage.scss

@@ -25,3 +25,27 @@
     width: 0 !important;
   }
 }
+
+.m-editor-stage-float-button {
+  cursor: pointer;
+  transform: translateY(-50%);
+  width: 12px;
+  font-size: 12px;
+  line-height: 1.2;
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  padding: 5px;
+  background-color: #ffffff;
+  transition: background-color 0.2s;
+  color: rgba(0, 0, 0, 0.88);
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.m-editor-node-list-menu {
+  height: 100%;
+  width: 100%;
+  min-width: 300px;
+  max-height: 500px;
+}

package/src/theme/theme.scss

@@ -16,7 +16,6 @@
 @import "./event.scss";
 @import "./layout.scss";
 @import "./breadcrumb.scss";
-@import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
 @import "./data-source-methods.scss";
@@ -24,3 +23,4 @@
 @import "./key-value.scss";
 @import "./floatbox.scss";
 @import "./tree.scss";
+@import "./floating-box.scss";

package/src/theme/tree.scss

@@ -59,13 +59,24 @@
           width: 100px;
           overflow: hidden;
           text-overflow: ellipsis;
+
+          .disabled {
+            cursor: default;
+          }
+
+          .hook {
+            color: #999;
+          }
         }
       }
 
       .tree-node-tool {
-        margin-right: 15px;
         display: flex;
         align-items: center;
+
+        .tmagic-design-icon {
+          margin-right: 10px;
+        }
       }
     }
   }

package/src/type.ts

@@ -25,6 +25,7 @@ import type {
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
   MoveableOptions,
+  RenderType,
   UpdateDragEl,
 } from '@tmagic/stage';
 
@@ -72,7 +73,7 @@ export interface CodeBlockListPanelSlots extends CodeBlockListSlots {
 }
 
 export interface CodeBlockListSlots {
-  'code-block-panel-tool'(props: { id: Id; data: CodeBlockContent }): any;
+  'code-block-panel-tool'(props: { id: Id; data: any }): any;
 }
 
 export interface DataSourceListSlots {
@@ -81,12 +82,12 @@ export interface DataSourceListSlots {
 
 export interface LayerNodeSlots {
   'layer-node-content'(props: { data: MNode }): any;
+  'layer-node-tool'(props: { data: MNode }): any;
+  'layer-node-label'(props: { data: MNode }): any;
 }
 
 export interface LayerPanelSlots extends LayerNodeSlots {
   'layer-panel-header'(props: {}): any;
-  'layer-node-tool'(props: { data: MNode }): any;
-  'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface PropsPanelSlots {
@@ -129,6 +130,7 @@ export interface StageOptions {
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
   updateDragEl: UpdateDragEl;
+  renderType: RenderType;
 }
 
 export interface StoreState {
@@ -148,6 +150,7 @@ export type StoreStateKey = keyof StoreState;
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
   propsValueMap: Record<string, Partial<MNode>>;
+  relateIdMap: Record<Id, Id>;
 }
 
 export interface ComponentGroupState {

package/src/utils/compose.ts

@@ -2,7 +2,7 @@
  * @param {Array} middleware
  * @return {Function}
  */
-export const compose = (middleware: Function[]) => {
+export const compose = (middleware: Function[], isAsync: boolean) => {
   if (!Array.isArray(middleware)) throw new TypeError('Middleware 必须是一个数组!');
   for (const fn of middleware) {
     if (typeof fn !== 'function') throw new TypeError('Middleware 必须由函数组成!');
@@ -17,16 +17,35 @@ export const compose = (middleware: Function[]) => {
     // last called middleware #
     let index = -1;
     return dispatch(0);
-    function dispatch(i: number): Promise<void> {
-      if (i <= index) return Promise.reject(new Error('next() 被多次调用'));
+    function dispatch(i: number): Promise<void> | void {
+      if (i <= index) {
+        const error = new Error('next() 被多次调用');
+        if (isAsync) {
+          return Promise.reject(error);
+        }
+        throw error;
+      }
       index = i;
       let fn = middleware[i];
       if (i === middleware.length && next) fn = next;
-      if (!fn) return Promise.resolve();
+      if (!fn) {
+        if (isAsync) {
+          return Promise.resolve();
+        }
+        return;
+      }
+
+      if (isAsync) {
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
       try {
-        return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        return fn(...args, dispatch.bind(null, i + 1));
       } catch (err) {
-        return Promise.reject(err);
+        throw err;
       }
     }
   };

package/src/utils/content-menu.ts

@@ -1,4 +1,4 @@
-import { computed, markRaw, Ref, ref } from 'vue';
+import { computed, markRaw, Ref } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/schema';
@@ -7,6 +7,8 @@ import { isPage } from '@tmagic/utils';
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { MenuButton, Services } from '@editor/type';
 
+import { COPY_STORAGE_KEY } from './editor';
+
 export const useDeleteMenu = (): MenuButton => ({
   type: 'button',
   text: '删除',
@@ -21,8 +23,6 @@ export const useDeleteMenu = (): MenuButton => ({
   },
 });
 
-const canPaste = ref(false);
-
 export const useCopyMenu = (): MenuButton => ({
   type: 'button',
   text: '复制',
@@ -30,7 +30,6 @@ export const useCopyMenu = (): MenuButton => ({
   handler: (services) => {
     const nodes = services?.editorService?.get('nodes');
     nodes && services?.editorService?.copy(nodes);
-    canPaste.value = true;
   },
 });
 
@@ -38,7 +37,7 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),
-  display: () => canPaste.value,
+  display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
   handler: (services) => {
     const nodes = services?.editorService?.get('nodes');
     if (!nodes || nodes.length === 0) return;

package/src/utils/editor.ts

@@ -257,13 +257,22 @@ export const serializeConfig = (config: any) =>
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
 
-export const traverseNode = (node: MNode, cb: (node: MNode, parents: MNode[]) => void, parents: MNode[] = []) => {
+export interface NodeItem {
+  items?: NodeItem[];
+  [key: string]: any;
+}
+
+export const traverseNode = <T extends NodeItem = NodeItem>(
+  node: T,
+  cb: (node: T, parents: T[]) => void,
+  parents: T[] = [],
+) => {
   cb(node, parents);
 
   if (node.items?.length) {
     parents.push(node);
-    node.items.forEach((item: MNode) => {
-      traverseNode(item, cb, parents);
+    node.items.forEach((item) => {
+      traverseNode(item as T, cb, [...parents]);
     });
   }
 };

package/src/utils/operator.ts

@@ -40,8 +40,7 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
       if (pastePosition.top && configItem.style?.top) {
         pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
       }
-
-      const pasteConfig = await propsService.setNewItemId(configItem);
+      const pasteConfig = await propsService.setNewItemId(configItem, false);
 
       if (pasteConfig.style) {
         const { left, top } = pasteConfig.style;

package/types/components/CodeBlockEditor.vue.d.ts

@@ -9,13 +9,17 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
 }>, {
     show(): void;
     hide(): void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (values: CodeBlockContent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     content: CodeBlockContent;
     disabled?: boolean | undefined;
     isDataSource?: boolean | undefined;
     dataSourceType?: string | undefined;
     slideType?: SlideType | undefined;
-}>>>, {}, {}>;
+}>>> & {
+    onSubmit?: ((values: CodeBlockContent) => any) | undefined;
+}, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/CodeParams.vue.d.ts

@@ -5,7 +5,9 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     disabled?: boolean | undefined;
     name: string;
     paramsConfig: CodeParamStatement[];
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     model: any;
     size?: "default" | "small" | "large" | undefined;
     disabled?: boolean | undefined;

package/types/components/ContentMenu.vue.d.ts

@@ -24,7 +24,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         clientY: number;
         clientX: number;
     }) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    mouseenter: () => void;
+    show: () => void;
+    hide: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
     active?: string | number | undefined;
@@ -33,7 +37,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     menuData: () => never[];
     isSubMenu: boolean;
     autoHide: boolean;
-}>>>, {
+}>>> & {
+    onMouseenter?: (() => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}, {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
     autoHide: boolean;
@@ -55,11 +63,11 @@ type __VLS_WithDefaults<P, D> = {
         default: D[K];
     }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/types/components/FloatingBox.vue.d.ts

@@ -0,0 +1,78 @@
+interface Position {
+    left: number;
+    top: number;
+}
+interface Rect {
+    width: number | string;
+    height: number | string;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    visible: boolean;
+    position?: Position | undefined;
+    rect?: Rect | undefined;
+    title?: string | undefined;
+}>, {
+    visible: boolean;
+    title: string;
+    position: () => {
+        left: number;
+        top: number;
+    };
+    rect: () => {
+        width: string;
+        height: string;
+    };
+}>, {
+    target: import("vue").Ref<HTMLDivElement | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:visible": (args_0: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    visible: boolean;
+    position?: Position | undefined;
+    rect?: Rect | undefined;
+    title?: string | undefined;
+}>, {
+    visible: boolean;
+    title: string;
+    position: () => {
+        left: number;
+        top: number;
+    };
+    rect: () => {
+        width: string;
+        height: string;
+    };
+}>>> & {
+    "onUpdate:visible"?: ((args_0: boolean) => any) | undefined;
+}, {
+    title: string;
+    rect: Rect;
+    position: Position;
+    visible: boolean;
+}, {}>, {
+    title?(_: {}): any;
+    body?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};