@tmagic/editor 1.1.0-beta.8 → 1.1.0-beta.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.8",
+  "version": "1.1.0-beta.9",
   "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.8",
-    "@tmagic/form": "1.1.0-beta.8",
-    "@tmagic/schema": "1.1.0-beta.8",
-    "@tmagic/stage": "1.1.0-beta.8",
-    "@tmagic/utils": "1.1.0-beta.8",
+    "@tmagic/core": "1.1.0-beta.9",
+    "@tmagic/form": "1.1.0-beta.9",
+    "@tmagic/schema": "1.1.0-beta.9",
+    "@tmagic/stage": "1.1.0-beta.9",
+    "@tmagic/utils": "1.1.0-beta.9",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -62,7 +62,7 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0-beta.8",
+    "@tmagic/form": "1.1.0-beta.9",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.37"

package/src/Editor.vue

@@ -30,7 +30,7 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+        <props-panel ref="propsPanel" @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
@@ -49,7 +49,7 @@ import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { CONTAINER_HIGHLIGHT_CLASS, MoveableOptions } from '@tmagic/stage';
+import { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import Framework from './layouts/Framework.vue';
 import NavMenu from './layouts/NavMenu.vue';
@@ -170,6 +170,11 @@ export default defineComponent({
       default: 800,
     },
 
+    containerHighlightType: {
+      type: String as PropType<ContainerHighlightType>,
+      default: ContainerHighlightType.DEFAULT,
+    },
+
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
@@ -289,6 +294,7 @@ export default defineComponent({
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType,
       }),
     );
 

package/src/layouts/workspace/Stage.vue

@@ -81,6 +81,7 @@ watchEffect(() => {
     isContainer: stageOptions.isContainer,
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
@@ -118,10 +119,13 @@ watchEffect(() => {
 
   stage?.on('update', (ev: UpdateEventData) => {
     if (ev.parentEl) {
-      services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+      for (const data of ev.data) {
+        services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
       return;
     }
-    services?.editorService.update({ id: ev.el.id, style: ev.style });
+
+    services?.editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
   });
 
   stage?.on('sort', (ev: SortEventData) => {

package/src/layouts/workspace/ViewerMenu.vue

@@ -34,10 +34,10 @@ const menuData = reactive<MenuItem[]>([
   {
     type: 'button',
     text: '水平居中',
-    display: () => canCenter.value && !props.isMultiSelect,
+    display: () => canCenter.value,
     handler: () => {
-      if (!node.value) return;
-      editorService?.alignCenter(node.value);
+      if (!nodes.value) return;
+      editorService?.alignCenter(nodes.value);
     },
   },
   {

package/src/services/editor.ts

@@ -38,7 +38,7 @@ import {
   isFixed,
   setLayout,
 } from '../utils/editor';
-import { beforePaste, beforeRemove, getAddParent } from '../utils/operator';
+import { beforePaste, getAddParent } from '../utils/operator';
 
 import BaseService from './BaseService';
 import propsService from './props';
@@ -64,11 +64,14 @@ class Editor extends BaseService {
         'select',
         'doAdd',
         'add',
+        'doRemove',
         'remove',
+        'doUpdate',
         'update',
         'sort',
         'copy',
         'paste',
+        'duAlignCenter',
         'alignCenter',
         'moveLayer',
         'moveToContainer',
@@ -359,55 +362,65 @@ class Editor extends BaseService {
     return newNodes.length > 1 ? newNodes[0] : newNodes;
   }
 
+  public async doRemove(node: MNode): Promise<void> {
+    const root = this.get<MApp | null>('root');
+
+    if (!root) throw new Error('没有root');
+
+    const { parent, node: curNode } = this.getNodeInfo(node.id);
+
+    if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+    const index = getNodeIndex(curNode, parent);
+
+    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+
+    parent.items?.splice(index, 1);
+    const stage = this.get<StageCore | null>('stage');
+    stage?.remove({ id: node.id, root: this.get('root') });
+
+    if (node.type === NodeType.PAGE) {
+      this.state.pageLength -= 1;
+
+      if (root.items[0]) {
+        await this.select(root.items[0]);
+        stage?.select(root.items[0].id);
+      } else {
+        this.set('node', null);
+        this.set('parent', null);
+        this.set('page', null);
+        this.set('stage', null);
+        this.set('highlightNode', null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+
+        return;
+      }
+    } else {
+      await this.select(parent);
+      stage?.select(parent.id);
+    }
+
+    this.addModifiedNodeId(parent.id);
+  }
+
   /**
    * 删除组件
    * @param {Object} node
    * @return {Object} 删除的组件配置
    */
-  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<MNode | MNode[]> {
-    if (Array.isArray(nodeOrNodeList)) {
-      // 多选批量删除
-      const nodes = nodeOrNodeList;
-      return this.multiRemove(nodes);
-    }
-    const node = nodeOrNodeList;
-    const removeParent = await beforeRemove(node);
-    // 删除的是页面
-    if (!removeParent) return node;
-    // 更新历史记录
-    this.addModifiedNodeId(removeParent.id);
-    this.pushHistoryState();
+  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
+    const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 
-    this.emit('remove', node);
+    await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    return node;
-  }
-
-  /**
-   * 批量删除
-   * @param nodes 批量删除的节点
-   * @returns 批量删除的节点
-   */
-  public async multiRemove(nodes: MNode[]): Promise<MNode[]> {
-    await Promise.all(
-      nodes.map(async (removeNode) => {
-        await beforeRemove(removeNode);
-      }),
-    );
-    const nodeIds = nodes.map((node) => node.id);
-    this.addModifiedNodeId(nodeIds.join('-'));
+    // 更新历史记录
     this.pushHistoryState();
 
-    this.emit('multiRemove', nodes);
-    return nodes;
+    this.emit('remove');
   }
 
-  /**
-   * 更新节点
-   * @param config 新的节点配置，配置中需要有id信息
-   * @returns 更新后的节点配置
-   */
-  public async update(config: MNode): Promise<MNode> {
+  public async doUpdate(config: MNode) {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
     const info = this.getNodeInfo(config.id, false);
@@ -460,11 +473,25 @@ class Editor extends BaseService {
     }
 
     this.addModifiedNodeId(newConfig.id);
+
+    return newConfig;
+  }
+
+  /**
+   * 更新节点
+   * @param config 新的节点配置，配置中需要有id信息
+   * @returns 更新后的节点配置
+   */
+  public async update(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+    const nodes = Array.isArray(config) ? config : [config];
+
+    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+
     this.pushHistoryState();
 
-    this.emit('update', newConfig);
+    this.emit('update', newNodes);
 
-    return newConfig;
+    return newNodes.length > 1 ? newNodes[0] : newNodes;
   }
 
   /**
@@ -518,20 +545,18 @@ class Editor extends BaseService {
     return this.add(pasteConfigs);
   }
 
-  /**
-   * 将指点节点设置居中
-   * @param config 组件节点配置
-   * @returns 当前组件节点配置
-   */
-  public async alignCenter(config: MNode): Promise<MNode | void> {
-    const parent = this.get<MContainer>('parent');
-    const node = this.get<MNode>('node');
-    const layout = await this.getLayout(toRaw(parent), toRaw(node));
+  public async doAlignCenter(config: MNode): Promise<MNode> {
+    const parent = this.getParentById(config.id);
+
+    if (!parent) throw new Error('找不到父节点');
+
+    const node = cloneDeep(toRaw(config));
+    const layout = await this.getLayout(parent, node);
     if (layout === Layout.RELATIVE) {
-      return;
+      return config;
     }
 
-    if (!node.style) return;
+    if (!node.style) return config;
 
     const stage = this.get<StageCore>('stage');
     const doc = stage?.renderer.contentWindow?.document;
@@ -546,15 +571,25 @@ class Editor extends BaseService {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
 
-    await this.update(node);
-    this.get<StageCore | null>('stage')?.update({
-      config: cloneDeep(toRaw(node)),
-      root: cloneDeep(this.get<MApp>('root')),
-    });
-    this.addModifiedNodeId(config.id);
-    this.pushHistoryState();
+    return node;
+  }
+
+  /**
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
+   */
+  public async alignCenter(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+    const nodes = Array.isArray(config) ? config : [config];
+    const stage = this.get<StageCore | null>('stage');
+
+    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
+
+    const newNode = await this.update(newNodes);
+
+    await stage?.multiSelect(newNodes.map((node) => node.id));
 
-    return config;
+    return newNode;
   }
 
   /**

package/src/type.ts

@@ -21,7 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
@@ -53,6 +53,7 @@ export interface StageOptions {
   autoScrollIntoView: boolean;
   containerHighlightClassName: string;
   containerHighlightDuration: number;
+  containerHighlightType: ContainerHighlightType;
   render: () => HTMLDivElement;
   moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;

package/src/utils/operator.ts

@@ -1,15 +1,14 @@
 import { toRaw } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 
-import { Id, MApp, MContainer, MNode, NodeType } from '@tmagic/schema';
+import { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { isPage } from '@tmagic/utils';
 
 import editorService from '../services/editor';
-import historyService from '../services/history';
 import propsService from '../services/props';
 import { AddMNode, PastePosition } from '../type';
-import { generatePageNameByApp, getInitPositionStyle, getNodeIndex } from '../utils/editor';
+import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor';
 
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
@@ -87,59 +86,6 @@ export const getPositionInContainer = (position: PastePosition = {}, id: Id) =>
   };
 };
 
-/**
- * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供stage更新
- * @param node 待删除的节点
- * @returns 父级元素，root根元素
- */
-export const beforeRemove = async (node: MNode): Promise<MContainer | void> => {
-  if (!node?.id) return;
-
-  const stage = editorService.get<StageCore | null>('stage');
-  const root = editorService.get<MApp | null>('root');
-
-  if (!root) throw new Error('没有root');
-
-  const { parent, node: curNode } = editorService.getNodeInfo(node.id, false);
-
-  if (!parent || !curNode) throw new Error('找不要删除的节点');
-
-  const index = getNodeIndex(curNode, parent);
-
-  if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
-  // 从配置中删除元素
-  parent.items?.splice(index, 1);
-
-  // 通知stage更新
-  stage?.remove({ id: node.id, root: cloneDeep(root) });
-
-  if (node.type === NodeType.PAGE) {
-    editorService.state.pageLength -= 1;
-
-    if (root.items[0]) {
-      await editorService.select(root.items[0]);
-      stage?.select(root.items[0].id);
-    } else {
-      editorService.set('node', null);
-      editorService.set('nodes', []);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-      editorService.set('stage', null);
-      editorService.set('highlightNode', null);
-      editorService.resetModifiedNodeId();
-      historyService.reset();
-
-      editorService.emit('remove', node);
-
-      return;
-    }
-  } else {
-    await editorService.select(parent);
-    stage?.select(parent.id);
-  }
-  return parent;
-};
-
 export const getAddParent = (addNode: AddMNode | MNode[]) => {
   const curNode = editorService.get<MContainer>('node');
 

package/types/Editor.vue.d.ts

@@ -2,7 +2,7 @@ import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { MoveableOptions } from '@tmagic/stage';
+import { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: import("vue").DefineComponent<{
     /** 页面初始值 */
@@ -83,6 +83,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -172,6 +176,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -200,5 +208,6 @@ declare const _default: import("vue").DefineComponent<{
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
 }>;
 export default _default;

package/types/services/editor.d.ts

@@ -73,24 +73,20 @@ declare class Editor extends BaseService {
      * @returns 添加后的节点
      */
     add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]>;
+    doRemove(node: MNode): Promise<void>;
     /**
      * 删除组件
      * @param {Object} node
      * @return {Object} 删除的组件配置
      */
-    remove(nodeOrNodeList: MNode | MNode[]): Promise<MNode | MNode[]>;
-    /**
-     * 批量删除
-     * @param nodes 批量删除的节点
-     * @returns 批量删除的节点
-     */
-    multiRemove(nodes: MNode[]): Promise<MNode[]>;
+    remove(nodeOrNodeList: MNode | MNode[]): Promise<void>;
+    doUpdate(config: MNode): Promise<MNode>;
     /**
      * 更新节点
      * @param config 新的节点配置，配置中需要有id信息
      * @returns 更新后的节点配置
      */
-    update(config: MNode): Promise<MNode>;
+    update(config: MNode | MNode[]): Promise<MNode | MNode[]>;
     /**
      * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
      * @param id1 组件ID
@@ -110,12 +106,13 @@ declare class Editor extends BaseService {
      * @returns 添加后的组件节点配置
      */
     paste(position?: PastePosition): Promise<MNode | MNode[] | void>;
+    doAlignCenter(config: MNode): Promise<MNode>;
     /**
      * 将指点节点设置居中
      * @param config 组件节点配置
      * @returns 当前组件节点配置
      */
-    alignCenter(config: MNode): Promise<MNode | void>;
+    alignCenter(config: MNode | MNode[]): Promise<MNode | MNode[]>;
     /**
      * 移动当前选中节点位置
      * @param offset 偏移量

package/types/type.d.ts

@@ -2,7 +2,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -29,6 +29,7 @@ export interface StageOptions {
     autoScrollIntoView: boolean;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
     render: () => HTMLDivElement;
     moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;

package/types/utils/operator.d.ts

@@ -17,11 +17,5 @@ export declare const getPositionInContainer: (position: PastePosition | undefine
     left: number;
     top: number;
 };
-/**
- * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供stage更新
- * @param node 待删除的节点
- * @returns 父级元素，root根元素
- */
-export declare const beforeRemove: (node: MNode) => Promise<MContainer | void>;
 export declare const getAddParent: (addNode: AddMNode | MNode[]) => MContainer | undefined;
 export declare const getDefaultConfig: (addNode: AddMNode, parentNode: MContainer) => Promise<any>;