@tmagic/editor 1.1.0-beta.11 → 1.1.0-beta.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.11",
+  "version": "1.1.0-beta.12",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.6",
-    "@tmagic/core": "1.1.0-beta.11",
-    "@tmagic/form": "1.1.0-beta.11",
-    "@tmagic/schema": "1.1.0-beta.11",
-    "@tmagic/stage": "1.1.0-beta.11",
-    "@tmagic/utils": "1.1.0-beta.11",
+    "@tmagic/core": "1.1.0-beta.12",
+    "@tmagic/form": "1.1.0-beta.12",
+    "@tmagic/schema": "1.1.0-beta.12",
+    "@tmagic/stage": "1.1.0-beta.12",
+    "@tmagic/utils": "1.1.0-beta.12",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -57,14 +57,14 @@
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0-beta.11",
+    "@tmagic/form": "1.1.0-beta.12",
     "element-plus": "^2.2.6",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
   "devDependencies": {

package/src/Editor.vue

@@ -21,6 +21,7 @@
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
         <workspace>
+          <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
           <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
           <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>

package/src/layouts/workspace/PageBar.vue

@@ -10,7 +10,7 @@
       <div class="m-editor-page-bar-title">
         <slot name="page-bar-title" :page="item">
           <el-tooltip effect="dark" placement="top-start" :content="item.name">
-            <span>{{ item.name }}</span>
+            <span>{{ item.name || item.id }}</span>
           </el-tooltip>
         </slot>
       </div>

package/src/layouts/workspace/Workspace.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="m-editor-workspace" tabindex="1" ref="workspace">
-    <magic-stage :key="page?.id"></magic-stage>
+    <slot name="stage">
+      <magic-stage :key="page?.id"></magic-stage>
+    </slot>
 
     <slot name="workspace-content"></slot>
 

package/src/services/editor.ts

@@ -71,6 +71,7 @@ class Editor extends BaseService {
         'sort',
         'copy',
         'paste',
+        'doPaste',
         'duAlignCenter',
         'alignCenter',
         'moveLayer',
@@ -367,7 +368,7 @@ class Editor extends BaseService {
 
     this.emit('add', newNodes);
 
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
 
   public async doRemove(node: MNode): Promise<void> {
@@ -503,7 +504,7 @@ class Editor extends BaseService {
 
     this.emit('update', newNodes);
 
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
   /**
@@ -556,11 +557,16 @@ class Editor extends BaseService {
 
     if (!Array.isArray(config)) return;
 
-    const pasteConfigs = await beforePaste(position, config);
+    const pasteConfigs = await this.doPaste(config, position);
 
     return this.add(pasteConfigs);
   }
 
+  public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
+    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    return pasteConfigs;
+  }
+
   public async doAlignCenter(config: MNode): Promise<MNode> {
     const parent = this.getParentById(config.id);
 
@@ -614,7 +620,7 @@ class Editor extends BaseService {
    */
   public async moveLayer(offset: number | LayerOffset): Promise<void> {
     const parent = this.get<MContainer>('parent');
-    const node = this.get('node');
+    const node = this.get<MNode>('node');
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
@@ -626,11 +632,15 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
+    const grandparent = this.getParentById(parent.id);
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(toRaw(parent)),
-      parentId: parent.id,
+      parentId: grandparent?.id,
       root: cloneDeep(this.get<MApp>('root')),
     });
+
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
   }
 
   /**
@@ -664,7 +674,8 @@ class Editor extends BaseService {
 
       await stage.select(targetId);
 
-      await stage.update({ config: cloneDeep(target), parentId: parent.id, root });
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
 
       await this.select(newConfig);
       stage.select(newConfig.id);

package/src/services/props.ts

@@ -20,12 +20,11 @@ import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import type { Id, MComponent, MNode, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
-import { isPop, toLine } from '@tmagic/utils';
+import type { MComponent, MNode } from '@tmagic/schema';
+import { toLine } from '@tmagic/utils';
 
 import type { PropsState } from '../type';
-import { DEFAULT_CONFIG, fillConfig } from '../utils/props';
+import { fillConfig } from '../utils/props';
 
 import BaseService from './BaseService';
 
@@ -43,6 +42,7 @@ class Props extends BaseService {
       'getPropsValue',
       'createId',
       'setNewItemId',
+      'fillConfig',
       'getDefaultPropsValue',
     ]);
   }
@@ -54,13 +54,17 @@ class Props extends BaseService {
     this.emit('props-configs-change');
   }
 
+  public async fillConfig(config: FormConfig) {
+    return fillConfig(config);
+  }
+
   /**
    * 为指定类型组件设置组件属性表单配置
    * @param type 组件类型
    * @param config 组件属性表单配置
    */
-  public setPropsConfig(type: string, config: FormConfig) {
-    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  public async setPropsConfig(type: string, config: FormConfig) {
+    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
   }
 
   /**
@@ -73,7 +77,7 @@ class Props extends BaseService {
       return await this.getPropsConfig('button');
     }
 
-    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+    return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
   }
 
   public setPropsValues(values: Record<string, MNode>) {
@@ -125,19 +129,6 @@ class Props extends BaseService {
     };
   }
 
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  guid(digit = 8): string {
-    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0;
-      const v = c == 'x' ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
-
   public async createId(type: string | number): Promise<string> {
     return `${type}_${this.guid()}`;
   }
@@ -147,19 +138,12 @@ class Props extends BaseService {
    * @param {Object} config 组件配置
    */
   /* eslint no-param-reassign: ["error", { "props": false }] */
-  public async setNewItemId(config: MNode, parent?: MPage) {
-    const oldId = config.id;
-
+  public async setNewItemId(config: MNode) {
     config.id = await this.createId(config.type || 'component');
 
-    // 只有弹窗在页面下的一级子元素才有效
-    if (isPop(config) && parent?.type === NodeType.PAGE) {
-      updatePopId(oldId, config.id, parent);
-    }
-
     if (config.items && Array.isArray(config.items)) {
       for (const item of config.items) {
-        await this.setNewItemId(item, config as MPage);
+        await this.setNewItemId(item);
       }
     }
 
@@ -186,31 +170,20 @@ class Props extends BaseService {
           name: type,
         };
   }
-}
 
-/**
- * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
- * @param {number} oldId 复制的源弹窗id
- * @param {number} popId 新的弹窗id
- * @param {Object} pageConfig 页面配置
- */
-const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
-  pageConfig.items?.forEach((config) => {
-    if (config.pop === oldId) {
-      config.pop = popId;
-      return;
-    }
-
-    if (config.popId === oldId) {
-      config.popId = popId;
-      return;
-    }
-
-    if (Array.isArray(config.items)) {
-      updatePopId(oldId, popId, config as MPage);
-    }
-  });
-};
+  /**
+   * 生成指定位数的GUID，无【-】格式
+   * @param digit 位数，默认值8
+   * @returns
+   */
+  private guid(digit = 8): string {
+    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+}
 
 export type PropsService = Props;
 

package/src/utils/operator.ts

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

package/src/utils/props.ts

@@ -234,6 +234,3 @@ export const fillConfig = (config: FormConfig = []) => [
     ],
   },
 ];
-
-// 默认组件属性表单配置
-export const DEFAULT_CONFIG: FormConfig = fillConfig([]);

package/types/services/editor.d.ts

@@ -106,6 +106,7 @@ declare class Editor extends BaseService {
      * @returns 添加后的组件节点配置
      */
     paste(position?: PastePosition): Promise<MNode | MNode[] | void>;
+    doPaste(config: MNode[], position?: PastePosition): Promise<MNode[]>;
     doAlignCenter(config: MNode): Promise<MNode>;
     /**
      * 将指点节点设置居中

package/types/services/props.d.ts

@@ -1,16 +1,47 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MNode, MPage } from '@tmagic/schema';
+import type { MNode } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
     constructor();
     setPropsConfigs(configs: Record<string, FormConfig>): void;
+    fillConfig(config: FormConfig): Promise<{
+        type: string;
+        items: ({
+            title: string;
+            labelWidth: string;
+            items: (import("@tmagic/form").ChildConfig & {
+                [key: string]: any;
+            })[];
+        } | {
+            title: string;
+            items: {
+                type: string;
+                name: string;
+                items: ({
+                    name: string;
+                    label: string;
+                    type: string;
+                    options: (mForm: import("@tmagic/form").FormState, { formValue }: any) => {
+                        text: string;
+                        value: string;
+                    }[];
+                } | {
+                    name: string;
+                    label: string;
+                    type: string;
+                    options?: undefined;
+                })[];
+            }[];
+            labelWidth?: undefined;
+        })[];
+    }[]>;
     /**
      * 为指定类型组件设置组件属性表单配置
      * @param type 组件类型
      * @param config 组件属性表单配置
      */
-    setPropsConfig(type: string, config: FormConfig): void;
+    setPropsConfig(type: string, config: FormConfig): Promise<void>;
     /**
      * 获取指点类型的组件属性表单配置
      * @param type 组件类型
@@ -30,18 +61,12 @@ declare class Props extends BaseService {
      * @returns 组件初始值
      */
     getPropsValue(type: string, { inputEvent, ...defaultValue }?: Record<string, any>): Promise<any>;
-    /**
-     * 生成指定位数的GUID，无【-】格式
-     * @param digit 位数，默认值8
-     * @returns
-     */
-    guid(digit?: number): string;
     createId(type: string | number): Promise<string>;
     /**
      * 将组件与组件的子元素配置中的id都设置成一个新的ID
      * @param {Object} config 组件配置
      */
-    setNewItemId(config: MNode, parent?: MPage): Promise<MNode>;
+    setNewItemId(config: MNode): Promise<MNode>;
     /**
      * 获取默认属性配置
      * @param type 组件类型
@@ -60,6 +85,12 @@ declare class Props extends BaseService {
         layout?: undefined;
         items?: undefined;
     }>;
+    /**
+     * 生成指定位数的GUID，无【-】格式
+     * @param digit 位数，默认值8
+     * @returns
+     */
+    private guid;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/types/utils/props.d.ts

@@ -35,4 +35,3 @@ export declare const fillConfig: (config?: FormConfig) => {
         labelWidth?: undefined;
     })[];
 }[];
-export declare const DEFAULT_CONFIG: FormConfig;