@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.2

package/src/services/editor.ts

@@ -21,8 +21,9 @@ 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 { getNodePath, isPop } from '@tmagic/utils';
+import { NodeType } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import historyService, { StepValue } from '@editor/services/history';
 import propsService from '@editor/services/props';
@@ -51,29 +52,37 @@ class Editor extends BaseService {
     parent: null,
     node: null,
     stage: null,
+    highlightNode: null,
     modifiedNodeIds: new Map(),
+    pageLength: 0,
   });
 
   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',
+        'move',
+        'undo',
+        'redo',
+        'highlight',
+      ],
+      // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+      ['select', 'update', 'moveLayer'],
+    );
   }
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
    * @param value MNode
    * @returns MNode
    */
@@ -82,6 +91,7 @@ class Editor extends BaseService {
     log('store set ', name, ' ', value);
 
     if (name === 'root') {
+      this.state.pageLength = (value as unknown as MApp)?.items?.length || 0;
       this.emit('root-change', value);
     }
   }
@@ -101,7 +111,7 @@ class Editor extends BaseService {
    * @returns {EditorNodeInfo}
    */
   public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = this.get<MApp | null>('root');
+    const root = toRaw(this.get<MApp | null>('root'));
     if (!root) return {};
 
     if (id === root.id) {
@@ -119,7 +129,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;
       }
@@ -152,13 +162,15 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(node: MNode): Promise<Layout> {
-    if (node.layout) {
-      return node.layout;
+  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+    if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
+
+    if (parent.layout) {
+      return parent.layout;
     }
 
     // 如果该节点没有设置position，则认为是流式布局，例如获取root的布局时
-    if (!node.style?.position) {
+    if (!parent.style?.position) {
       return Layout.RELATIVE;
     }
 
@@ -166,28 +178,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('获取不到组件信息');
-
-    if (node.id === this.state.root?.id) {
-      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);
@@ -198,7 +194,54 @@ class Editor extends BaseService {
       historyService.empty();
     }
 
-    return node;
+    this.emit('select', node);
+
+    return node!;
+  }
+
+  public async selectNextNode(): Promise<MNode> | never {
+    const node = toRaw(this.get('node'));
+
+    if (!node || isPage(node) || node.type === NodeType.ROOT) return node;
+
+    const parent = toRaw(this.getParentById(node.id));
+
+    if (!parent) return node;
+
+    const index = getNodeIndex(node, parent);
+
+    const nextNode = parent.items[index + 1] || parent.items[0];
+
+    await this.select(nextNode);
+    this.get<StageCore>('stage')?.select(nextNode.id);
+
+    return nextNode;
+  }
+
+  public async selectNextPage(): Promise<MNode> | never {
+    const root = toRaw(this.get<MApp>('root'));
+    const page = toRaw(this.get('page'));
+
+    const index = getNodeIndex(page, root);
+
+    const nextPage = root.items[index + 1] || root.items[0];
+
+    await this.select(nextPage);
+    this.get<StageCore>('stage')?.select(nextPage.id);
+
+    return nextPage;
+  }
+
+  /**
+   * 高亮指定节点
+   * @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);
   }
 
   /**
@@ -207,12 +250,14 @@ class Editor extends BaseService {
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
    * @returns 添加后的节点
    */
-  public async add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode> {
+  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
+    const { type, ...config } = addNode;
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MNode | undefined;
+    const isPage = type === NodeType.PAGE;
 
-    if (type === 'page') {
+    if (isPage) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -225,21 +270,38 @@ 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);
+    const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
+    const newNode = initPosition(
+      { ...toRaw(await propsService.getPropsValue(type, config)) },
+      layout,
+      parentNode,
+      this.get<StageCore>('stage'),
+    );
 
-    if ((parentNode?.type === 'app' || curNode.type === 'app') && newNode.type !== 'page') {
+    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 (!isPage) {
+      this.pushHistoryState();
+    }
+
+    stage?.select(newNode.id);
+
+    if (isPage) {
+      this.state.pageLength += 1;
+    }
+
+    this.emit('add', newNode);
 
     return newNode;
   }
@@ -265,17 +327,38 @@ 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') });
-
-    if (node.type === 'page') {
-      await this.select(root.items[0] || root);
+    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();
+
+        this.emit('remove', node);
+
+        return node;
+      }
     } else {
       await this.select(parent);
+      stage?.select(parent.id);
     }
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
 
+    this.emit('remove', node);
+
     return node;
   }
 
@@ -303,7 +386,7 @@ class Editor extends BaseService {
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 
-    if (newConfig.type === 'app') {
+    if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig);
       return newConfig;
     }
@@ -324,19 +407,21 @@ 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);
     }
 
     this.addModifiedNodeId(newConfig.id);
     this.pushHistoryState();
 
+    this.emit('update', newConfig);
+
     return newConfig;
   }
 
@@ -359,7 +444,7 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -414,7 +499,7 @@ class Editor extends BaseService {
   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(parent);
+    const layout = await this.getLayout(toRaw(parent), toRaw(node));
     if (layout === Layout.RELATIVE) {
       return;
     }
@@ -424,7 +509,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();
 
@@ -449,7 +534,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') });
   }
 
   /**
@@ -472,6 +557,26 @@ class Editor extends BaseService {
     return value;
   }
 
+  public async move(left: number, top: number) {
+    const node = toRaw(this.get('node'));
+    if (!node || isPage(node)) return;
+
+    const { style, id } = node;
+    if (!style || style.position !== 'absolute') return;
+
+    if (top && !isNumber(style.top)) return;
+    if (left && !isNumber(style.left)) return;
+
+    this.update({
+      id,
+      style: {
+        ...style,
+        left: Number(style.left) + left,
+        top: Number(style.top) + top,
+      },
+    });
+  }
+
   public destroy() {
     this.removeAllListeners();
     this.set('root', null);
@@ -508,7 +613,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) {
@@ -524,6 +633,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/history.ts

@@ -51,6 +51,13 @@ class History extends BaseService {
     this.on('change', this.setCanUndoRedo);
   }
 
+  public reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = undefined;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
   public changePage(page: MPage): void {
     if (!page) return;
 

package/src/services/props.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
@@ -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,7 +100,7 @@ class Props extends BaseService {
 
     return cloneDeep({
       ...getDefaultPropsValue(type),
-      ...(this.state.propsValueMap[type] || {}),
+      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
     });
   }
 }

package/src/services/ui.ts

@@ -25,6 +25,17 @@ import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor
 
 import BaseService from './BaseService';
 
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+
+const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
+
+const defaultColumnWidth = {
+  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+  right: DEFAULT_RIGHT_COLUMN_WIDTH,
+};
+
 const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
@@ -37,13 +48,10 @@ const state = reactive<UiState>({
     width: 375,
     height: 817,
   },
-  columnWidth: {
-    left: 310,
-    center: globalThis.document.body.clientWidth - 310 - 400,
-    right: 400,
-  },
+  columnWidth: defaultColumnWidth,
   showGuides: true,
   showRule: true,
+  propsPanelSize: 'small',
 });
 
 class Ui extends BaseService {
@@ -54,6 +62,16 @@ class Ui extends BaseService {
         center: 'auto',
       });
     });
+
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        this.setColumnWidth(columnWidthCache);
+      } catch (e) {
+        console.error(e);
+      }
+    }
   }
 
   public set<T = any>(name: keyof UiState, value: T) {
@@ -88,6 +106,11 @@ class Ui extends BaseService {
     return (state as any)[name];
   }
 
+  public zoom(zoom: number) {
+    this.set('zoom', (this.get<number>('zoom') * 100 + zoom * 100) / 100);
+    if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
+  }
+
   private setColumnWidth({ left, center, right }: SetColumnWidth) {
     const columnWidth = {
       ...toRaw(this.get<GetColumnWidth>('columnWidth')),
@@ -104,10 +127,17 @@ class Ui extends BaseService {
     if (!center || center === 'auto') {
       const bodyWidth = globalThis.document.body.clientWidth;
       columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+      if (columnWidth.center <= 0) {
+        columnWidth.left = defaultColumnWidth.left;
+        columnWidth.center = defaultColumnWidth.center;
+        columnWidth.right = defaultColumnWidth.right;
+      }
     } else {
       columnWidth.center = center;
     }
 
+    globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
+
     state.columnWidth = columnWidth;
   }
 

package/src/theme/common/var.scss

@@ -2,12 +2,13 @@ $--theme-color: #2882e0;
 
 $--font-color: #070303;
 $--border-color: #d9dbdd;
+$--hover-color: #f3f5f9;
 
 $--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/component-list-panel.scss

@@ -12,6 +12,7 @@
     top: 0;
     left: 0;
     box-sizing: border-box;
+    z-index: 1;
 
     .el-input__prefix {
       padding: 10px;
@@ -62,6 +63,7 @@
       color: $--font-color;
       flex-direction: column;
       width: 42px;
+      cursor: pointer;
 
       i {
         font-size: 20px;

package/src/theme/content-menu.scss

@@ -2,38 +2,45 @@
   position: fixed;
   font-size: 12px;
   background: #fff;
-  color: #333;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
   z-index: 9999;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
+  overflow: auto;
+  max-height: 100%;
 
-  .separation {
-    width: 100%;
-    height: 0;
-    border-color: rgba(155, 155, 155, 0.1);
-  }
-
-  .subMenu {
-    position: absolute;
-    right: 0;
-    transform: translate(100%, 0);
-    background-color: #fff;
+  .menu-item {
     color: #333;
-    box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-    top: 0;
-    height: 223px;
-  }
-}
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    min-width: 140px;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+    border-left: 2px solid transparent;
+
+    .el-button {
+      width: 100%;
+      justify-content: flex-start;
+    }
 
-.magic-editor-content-menu-item {
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  cursor: pointer;
-  min-width: 140px;
-  transition: all 0.2s ease 0s;
-  padding: 10px 14px;
-  border-left: 2px solid transparent;
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &.divider {
+      padding: 0 14px;
+
+      .el-divider {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
 }

package/src/theme/layer-panel.scss

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