@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.12

package/src/services/editor.ts

@@ -17,11 +17,12 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
+import { NodeType } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
 import { getNodePath, isPop } from '@tmagic/utils';
 
 import historyService, { StepValue } from '@editor/services/history';
@@ -31,7 +32,6 @@ import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
-  defaults,
   Fixed2Other,
   getNodeIndex,
   initPosition,
@@ -52,29 +52,35 @@ class Editor extends BaseService {
     parent: null,
     node: null,
     stage: null,
+    highlightNode: null,
     modifiedNodeIds: new Map(),
   });
 
   constructor() {
-    super([
-      'getLayout',
-      'select',
-      'add',
-      'remove',
-      'update',
-      'sort',
-      'copy',
-      'paste',
-      'alignCenter',
-      'moveLayer',
-      'undo',
-      'redo',
-    ]);
+    super(
+      [
+        'getLayout',
+        'select',
+        'add',
+        'remove',
+        'update',
+        'sort',
+        'copy',
+        'paste',
+        'alignCenter',
+        'moveLayer',
+        'undo',
+        'redo',
+        'highlight',
+      ],
+      // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+      ['select', 'update', 'moveLayer'],
+    );
   }
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
    * @param value MNode
    * @returns MNode
    */
@@ -120,7 +126,7 @@ class Editor extends BaseService {
     info.parent = path[path.length - 2] as MContainer;
 
     path.forEach((item) => {
-      if (item.type === 'page') {
+      if (item.type === NodeType.PAGE) {
         info.page = item as MPage;
         return;
       }
@@ -167,24 +173,12 @@ class Editor extends BaseService {
   }
 
   /**
-   * 选中指点节点（将指点节点设置成当前选中状态）
-   * @param config 指点节点配置或者ID
+   * 选中指定节点（将指定节点设置成当前选中状态）
+   * @param config 指定节点配置或者ID
    * @returns 当前选中的节点配置
    */
-  public async select(config: MNode | Id): Promise<MNode> {
-    let id: Id;
-    if (typeof config === 'string' || typeof config === 'number') {
-      id = config;
-    } else {
-      id = config.id;
-    }
-    if (!id) {
-      throw new Error('没有ID，无法选中');
-    }
-
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node) throw new Error('获取不到组件信息');
-
+  public async select(config: MNode | Id): Promise<MNode> | never {
+    const { node, page, parent } = this.selectedConfigExceptionHandler(config);
     this.set('node', node);
     this.set('page', page || null);
     this.set('parent', parent || null);
@@ -194,8 +188,19 @@ class Editor extends BaseService {
     } else {
       historyService.empty();
     }
+    return node!;
+  }
 
-    return node;
+  /**
+   * 高亮指定节点
+   * @param config 指定节点配置或者ID
+   * @returns 当前高亮的节点配置
+   */
+  public highlight(config: MNode | Id): void {
+    const { node } = this.selectedConfigExceptionHandler(config);
+    const currentHighlightNode = this.get('highlightNode');
+    if (currentHighlightNode === node) return;
+    this.set('highlightNode', node);
   }
 
   /**
@@ -209,7 +214,7 @@ class Editor extends BaseService {
 
     let parentNode: MNode | undefined;
 
-    if (type === 'page') {
+    if (type === NodeType.PAGE) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -223,20 +228,31 @@ class Editor extends BaseService {
     if (!parentNode) throw new Error('未找到父元素');
 
     const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout);
-
-    if ((parentNode?.type === 'app' || curNode.type === 'app') && newNode.type !== 'page') {
+    const newNode = initPosition(
+      { ...toRaw(await propsService.getPropsValue(type, config)) },
+      layout,
+      parentNode,
+      this.get<StageCore>('stage'),
+    );
+
+    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
     }
 
     parentNode?.items?.push(newNode);
 
-    await this.get<StageCore>('stage')?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
+    const stage = this.get<StageCore | null>('stage');
+
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
 
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    this.pushHistoryState();
+    if (type !== NodeType.PAGE) {
+      this.pushHistoryState();
+    }
+
+    stage?.select(newNode.id);
 
     return newNode;
   }
@@ -262,12 +278,17 @@ class Editor extends BaseService {
     if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
 
     parent.items?.splice(index, 1);
-    this.get<StageCore>('stage')?.remove({ id: node.id, root: this.get('root') });
+    const stage = this.get<StageCore | null>('stage');
+    stage?.remove({ id: node.id, root: this.get('root') });
 
-    if (node.type === 'page') {
-      await this.select(root.items[0] || root);
+    if (node.type === NodeType.PAGE) {
+      if (root.items[0]) {
+        await this.select(root.items[0]);
+        stage?.select(root.items[0].id);
+      }
     } else {
       await this.select(parent);
+      stage?.select(parent.id);
     }
 
     this.addModifiedNodeId(parent.id);
@@ -289,20 +310,25 @@ class Editor extends BaseService {
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 
     const node = cloneDeep(toRaw(info.node));
-    const { parent } = info;
-    if (!parent) throw new Error('获取不到父级节点');
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    defaults(newConfig, node);
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 
-    if (newConfig.type === 'app') {
+    if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig);
       return newConfig;
     }
 
+    const { parent } = info;
+    if (!parent) throw new Error('获取不到父级节点');
+
     const parentNodeItems = parent.items;
     const index = getNodeIndex(newConfig, parent);
 
@@ -316,13 +342,13 @@ class Editor extends BaseService {
 
     parentNodeItems[index] = newConfig;
 
-    if (newConfig.id === this.get('node').id) {
+    if (`${newConfig.id}` === `${this.get('node').id}`) {
       this.set('node', newConfig);
     }
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
 
-    if (newConfig.type === 'page') {
+    if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
     }
 
@@ -351,6 +377,8 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -414,7 +442,7 @@ class Editor extends BaseService {
     }
 
     await this.update(node);
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
     this.addModifiedNodeId(config.id);
     this.pushHistoryState();
 
@@ -439,7 +467,7 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
   }
 
   /**
@@ -498,7 +526,11 @@ class Editor extends BaseService {
     this.isHistoryStateChange = true;
     await this.update(value.data);
     this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+    setTimeout(async () => {
+      if (!value.nodeId) return;
+      await this.select(value.nodeId);
+      this.get<StageCore | null>('stage')?.select(value.nodeId);
+    }, 0);
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
@@ -514,6 +546,30 @@ class Editor extends BaseService {
 
     return newConfig;
   }
+
+  private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
+    let id: Id;
+    if (typeof config === 'string' || typeof config === 'number') {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error('没有ID，无法选中');
+    }
+
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node) throw new Error('获取不到组件信息');
+
+    if (node.id === this.state.root?.id) {
+      throw new Error('不能选根节点');
+    }
+    return {
+      node,
+      parent,
+      page,
+    };
+  }
 }
 
 export type EditorService = Editor;

package/src/services/props.ts

@@ -87,7 +87,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string) {
+  public async getPropsValue(type: string, defaultValue = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -100,6 +100,7 @@ class Props extends BaseService {
 
     return cloneDeep({
       ...getDefaultPropsValue(type),
+      ...defaultValue,
       ...(this.state.propsValueMap[type] || {}),
     });
   }

package/src/services/ui.ts

@@ -21,19 +21,29 @@ import { reactive, toRaw } from 'vue';
 import type StageCore from '@tmagic/stage';
 
 import editorService from '@editor/services/editor';
-import { GetColumnWidth, SetColumnWidth, UiState } from '@editor/type';
+import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+
 const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
   zoom: 1,
-  stageStyle: {},
+  stageContainerRect: {
+    width: 0,
+    height: 0,
+  },
+  stageRect: {
+    width: 375,
+    height: 817,
+  },
   columnWidth: {
-    left: 310,
-    center: globalThis.document.body.clientWidth - 310 - 400,
-    right: 400,
+    left: DEFAULT_LEFT_COLUMN_WIDTH,
+    center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+    right: DEFAULT_RIGHT_COLUMN_WIDTH,
   },
   showGuides: true,
   showRule: true,
@@ -57,6 +67,11 @@ class Ui extends BaseService {
       return;
     }
 
+    if (name === 'stageRect') {
+      this.setStageRect(value as unknown as StageRect);
+      return;
+    }
+
     if (name === 'showGuides') {
       mask?.showGuides(value as unknown as boolean);
     }
@@ -66,6 +81,10 @@ class Ui extends BaseService {
     }
 
     (state as any)[name] = value;
+
+    if (name === 'stageContainerRect') {
+      state.zoom = this.calcZoom();
+    }
   }
 
   public get<T>(name: keyof typeof state): T {
@@ -94,6 +113,24 @@ class Ui extends BaseService {
 
     state.columnWidth = columnWidth;
   }
+
+  private setStageRect(value: StageRect) {
+    state.stageRect = {
+      ...state.stageRect,
+      ...value,
+    };
+    state.zoom = this.calcZoom();
+  }
+
+  private calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height) return 1;
+    if (width > stageRect.width && height > stageRect.height) {
+      return 1;
+    }
+    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+  }
 }
 
 export type UiService = Ui;

package/src/theme/common/var.scss

@@ -5,9 +5,9 @@ $--border-color: #d9dbdd;
 
 $--nav-height: 35px;
 $--nav-color: #070303;
-$--nav--background-color: #f8fbff;
+$--nav--background-color: #ffffff;
 
 $--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #f8fbff;
+$--sidebar-content-background-color: #ffffff;
 
 $--page-bar-height: 32px;

package/src/theme/layer-panel.scss

@@ -50,6 +50,15 @@
   color: #fff;
 }
 
+.magic-editor-layer-panel .cus-tree-node {
+  width: 100%;
+}
+
+.magic-editor-layer-panel .cus-tree-node-hover {
+  background-color: #f3f5f9;
+  width: 100%;
+}
+
 .magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
   background-color: $--sidebar-heder-background-color;
   color: #fff;

package/src/theme/nav-menu.scss

@@ -21,12 +21,12 @@
     align-items: center;
   }
 
-  .menu-left {
-    padding-left: 16px;
+  .menu-center {
+    justify-content: center;
   }
 
   .menu-right {
-    padding-right: 16px;
+    justify-content: flex-end;
   }
 
   .menu-item {

package/src/theme/page-bar.scss

@@ -6,18 +6,25 @@
   width: 100%;
   height: $--page-bar-height;
   line-height: $--page-bar-height;
-  background-color: #f3f3f3;
   color: $--font-color;
+  background-color: #f3f3f3;
   border-top: 1px solid $--border-color;
   z-index: 2;
+  overflow: hidden;
+
+  &-items {
+    display: flex;
+    transition: transform 0.3s;
+  }
 
-  .m-editor-page-bar-item {
+  &-item {
     padding: 0 10px;
     cursor: pointer;
     border-right: 1px solid $--border-color;
     display: flex;
     justify-items: center;
     align-items: center;
+    background-color: #f3f3f3;
 
     &.active {
       background-color: #fff;
@@ -27,5 +34,17 @@
         cursor: pointer;
       }
     }
+
+    &-icon {
+      position: relative;
+      z-index: 1;
+    }
+
+    .m-editor-page-bar-title {
+      max-width: 150px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }

package/src/theme/props-panel.scss

@@ -15,3 +15,11 @@
     font-size: 12px;
   }
 }
+
+.m-editor-props-panel-popper {
+  span,
+  a,
+  p {
+    font-size: 12px;
+  }
+}

package/src/theme/stage.scss

@@ -2,19 +2,20 @@
   position: relative;
   width: 100%;
   height: calc(100% - $--page-bar-height);
-  overflow: auto;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .m-editor-stage-container {
-  transition: transform 0.3s;
-  transform-origin: center -50%;
+  width: 100%;
+  height: 100%;
   z-index: 0;
-  top: 50%;
-  margin: 0 auto;
   position: relative;
-  width: 375px;
-  height: 80%;
   border: 1px solid $--border-color;
+  transition: transform 0.3s;
+  box-sizing: content-box;
 
   &::-webkit-scrollbar {
     width: 0 !important;

package/src/type.ts

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
-import { Component } from 'vue';
+import type { Component } from 'vue';
 
-import { FormConfig } from '@tmagic/form';
-import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+import type { FormConfig } from '@tmagic/form';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 
 import type { ComponentListService } from '@editor/services/componentList';
 import type { EditorService } from '@editor/services/editor';
@@ -50,6 +50,7 @@ export interface StoreState {
   page: MPage | null;
   parent: MContainer | null;
   node: MNode | null;
+  highlightNode: MNode | null;
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
 }
@@ -75,6 +76,11 @@ export interface GetColumnWidth {
   right: number;
 }
 
+export interface StageRect {
+  width: number;
+  height: number;
+}
+
 export interface UiState {
   /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
   uiSelectMode: boolean;
@@ -82,8 +88,10 @@ export interface UiState {
   showSrc: boolean;
   /** 画布显示放大倍数，默认为 1 */
   zoom: number;
-  /** 画布顶层div的样式，可用于改变画布的大小 */
-  stageStyle: Record<string, string | number>;
+  /** 画布容器的宽高 */
+  stageContainerRect: StageRect;
+  /** 画布顶层div的宽高，可用于改变画布的大小 */
+  stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
@@ -212,7 +220,9 @@ export interface ComponentItem {
   type: string;
   /** element-plus icon class */
   icon?: string | Component;
-  [key: string]: any;
+  data?: {
+    [key: string]: any;
+  };
 }
 
 export interface ComponentGroup {
@@ -222,6 +232,11 @@ export interface ComponentGroup {
   items: ComponentItem[];
 }
 
+export interface UpdateData {
+  id: Id;
+  [key: string]: any;
+}
+
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',
@@ -234,3 +249,7 @@ export enum Layout {
   RELATIVE = 'relative',
   ABSOLUTE = 'absolute',
 }
+
+export enum Keys {
+  ESCAPE = 'Space',
+}