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

package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts

@@ -2,7 +2,7 @@ import type { Translator } from 'element-plus';
 import type { Nullable } from 'element-plus/es/utils';
 import type { default } from 'element-plus/es/components/tree/src/model/node';
 import type { TreeOptionProps, TreeKey, LoadFunction, FilterNodeMethodFunction, TreeNodeData, FakeNode, TreeNodeLoadedDefaultProps, TreeData } from 'element-plus/es/components/tree/src/tree.type';
-import type { DebouncedFunc } from 'lodash';
+import type { DebouncedFunc } from 'lodash-es';
 import type { DefineComponent, ComputedRef, ComponentInternalInstance, ExtractPropTypes, PropType, Component, ComputedOptions, MethodOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, EmitsOptions, Ref } from 'vue';
 import type { Id, MNode } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {

package/dist/types/src/services/editor.d.ts

@@ -41,13 +41,15 @@ declare class Editor extends BaseService {
     /**
      * 只有容器拥有布局
      */
-    getLayout(node: MNode): Promise<Layout>;
+    getLayout(parent: MNode, node?: MNode): Promise<Layout>;
     /**
      * 选中指定节点（将指定节点设置成当前选中状态）
      * @param config 指定节点配置或者ID
      * @returns 当前选中的节点配置
      */
     select(config: MNode | Id): Promise<MNode> | never;
+    selectNextNode(): Promise<MNode> | never;
+    selectNextPage(): Promise<MNode> | never;
     /**
      * 高亮指定节点
      * @param config 指定节点配置或者ID
@@ -60,7 +62,7 @@ declare class Editor extends BaseService {
      * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
      * @returns 添加后的节点
      */
-    add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode>;
+    add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode>;
     /**
      * 删除组件
      * @param {Object} node
@@ -116,6 +118,7 @@ declare class Editor extends BaseService {
      * @returns 下一步数据
      */
     redo(): Promise<StepValue | null>;
+    move(left: number, top: number): Promise<void>;
     destroy(): void;
     resetModifiedNodeId(): void;
     private addModifiedNodeId;

package/dist/types/src/services/ui.d.ts

@@ -24,6 +24,7 @@ declare class Ui extends BaseService {
     constructor();
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
+    zoom(zoom: number): void;
     private setColumnWidth;
     private setStageRect;
     private calcZoom;

package/dist/types/src/utils/editor.d.ts

@@ -37,9 +37,9 @@ export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) =
  * @returns {boolean}
  */
 export declare const isFixed: (node: MNode) => boolean;
-export declare const getNodeIndex: (node: MNode, parent: MContainer) => number;
+export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
 export declare const toRelative: (node: MNode) => MNode;
 export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
-export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => Promise<MNode>;
+export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "name": "@tmagic/editor",
   "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
@@ -16,8 +16,11 @@
       "require": "./dist/style.css"
     }
   },
+  "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "jest --maxWorkers=8",
+    "test:coverage": "jest --maxWorkers=16 --coverage"
   },
   "engines": {
     "node": ">=14"
@@ -37,11 +40,11 @@
   ],
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.12",
-    "@tmagic/form": "^1.0.0-beta.12",
-    "@tmagic/schema": "^1.0.0-beta.12",
-    "@tmagic/stage": "^1.0.0-beta.12",
-    "@tmagic/utils": "^1.0.0-beta.12",
+    "@tmagic/core": "^1.0.0-beta.13",
+    "@tmagic/form": "^1.0.0-beta.13",
+    "@tmagic/schema": "^1.0.0-beta.13",
+    "@tmagic/stage": "^1.0.0-beta.13",
+    "@tmagic/utils": "^1.0.0-beta.13",
     "color": "^3.1.3",
     "element-plus": "^2.1.7",
     "events": "^3.3.0",
@@ -53,18 +56,24 @@
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
+    "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.12",
+    "@vue/test-utils": "^2.0.0-rc.20",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "jest": "^27.5.1",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
     "sass": "^1.35.1",
+    "ts-jest": "^27.1.4",
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "ae00dd242d593ac8f57ffcd34e10e99399c7d00b"
+  "gitHead": "ca2b203614cbdaff580e5cb6f35630f50b827451"
 }

package/src/components/ScrollViewer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `,

package/src/components/ToolButton.vue

@@ -64,13 +64,13 @@ export default defineComponent({
     const services = inject<Services>('services');
     const uiService = services?.uiService;
 
-    const zoomInHandler = () => uiService?.set('zoom', zoom.value + 0.1);
-    const zoomOutHandler = () => uiService?.set('zoom', zoom.value - 0.1);
-
     const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
     const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
     const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
 
+    const zoomInHandler = () => uiService?.zoom(0.1);
+    const zoomOutHandler = () => uiService?.zoom(-0.1);
+
     const item = computed((): MenuButton | MenuComponent => {
       if (typeof props.data !== 'string') {
         return props.data;

package/src/layouts/workspace/Workspace.vue

@@ -24,6 +24,7 @@ import KeyController from 'keycon';
 import type { MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
@@ -64,38 +65,95 @@ export default defineComponent({
       workspace.value?.focus();
     };
 
-    const mouseleaveHandler = () => {
-      workspace.value?.blur();
-    };
-
     onMounted(() => {
       workspace.value?.addEventListener('mouseenter', mouseenterHandler);
 
-      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
-
       keycon = new KeyController(workspace.value);
 
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+      const ctrl = isMac ? 'meta' : 'ctrl';
+
       keycon
-        .keyup('delete', () => {
-          node.value && services?.editorService.remove(node.value);
+        .keyup('delete', (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
         })
-        .keyup(['ctrl', 'c'], () => {
+        .keydown([ctrl, 'c'], (e) => {
+          e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
         })
-        .keyup(['ctrl', 'v'], () => {
+        .keyup([ctrl, 'v'], (e) => {
+          e.inputEvent.preventDefault();
           node.value && services?.editorService.paste();
         })
-        .keyup(['ctrl', 'x'], () => {
-          if (node.value && services) {
-            services.editorService.copy(node.value);
-            services.editorService.remove(node.value);
-          }
+        .keyup([ctrl, 'x'], (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'z'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.undo();
+        })
+        .keydown([ctrl, 'shift', 'z'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.redo();
+        })
+        .keydown('up', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -1);
+        })
+        .keydown('down', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 1);
+        })
+        .keydown('left', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-1, 0);
+        })
+        .keydown('right', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(1, 0);
+        })
+        .keydown([ctrl, 'up'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -10);
+        })
+        .keydown([ctrl, 'down'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 10);
+        })
+        .keydown([ctrl, 'left'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-10, 0);
+        })
+        .keydown([ctrl, 'right'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(10, 0);
+        })
+        .keydown('tab', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextNode();
+        })
+        .keydown([ctrl, 'tab'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextPage();
+        })
+        .keydown([ctrl, '='], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, '-'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
         });
     });
 
     onUnmounted(() => {
       workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
-      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
       keycon.destroy();
     });
 

package/src/services/BaseService.ts

@@ -53,7 +53,7 @@ const doAction = async (
     let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
 
     for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(...beforeArgs, returnValue);
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
 
       if (isError(returnValue)) throw returnValue;
     }

package/src/services/editor.ts

@@ -23,7 +23,7 @@ import serialize from 'serialize-javascript';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
-import { getNodePath, isPop } from '@tmagic/utils';
+import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import historyService, { StepValue } from '@editor/services/history';
 import propsService from '@editor/services/props';
@@ -108,7 +108,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) {
@@ -159,13 +159,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;
     }
 
@@ -191,6 +193,39 @@ class Editor extends BaseService {
     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
@@ -209,7 +244,8 @@ 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;
@@ -227,7 +263,7 @@ class Editor extends BaseService {
 
     if (!parentNode) throw new Error('未找到父元素');
 
-    const layout = await this.getLayout(parentNode);
+    const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
     const newNode = initPosition(
       { ...toRaw(await propsService.getPropsValue(type, config)) },
       layout,
@@ -432,7 +468,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;
     }
@@ -490,6 +526,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);

package/src/services/ui.ts

@@ -91,6 +91,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')),

package/src/theme/layer-panel.scss

@@ -52,6 +52,7 @@
 
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
+  overflow: hidden;
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

package/src/utils/editor.ts

@@ -125,7 +125,7 @@ export const setNewItemId = (config: MNode, parent?: MPage) => {
  */
 export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
 
-export const getNodeIndex = (node: MNode, parent: MContainer): number => {
+export const getNodeIndex = (node: MNode, parent: MContainer | MApp): number => {
   const items = parent?.items || [];
   return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
 };
@@ -213,7 +213,11 @@ export const change2Fixed = (node: MNode, root: MApp) => {
   return node;
 };
 
-export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => {
+export const Fixed2Other = async (
+  node: MNode,
+  root: MApp,
+  getLayout: (parent: MNode, node?: MNode) => Promise<Layout>,
+) => {
   const path = getNodePath(node.id, root.items);
   const cur = path.pop();
   const offset = {

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": "../..",
-  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
-}

package/vite.config.ts

@@ -1,30 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import path from 'path';
-
-import { defineConfig } from 'vite';
-
-import { getBaseConfig } from '../vite-config';
-
-import pkg from './package.json';
-
-const deps = Object.keys(pkg.dependencies);
-const alias = [{ find: /@editor/, replacement: path.join(__dirname, './src') }];
-
-export default defineConfig(getBaseConfig(deps, 'TMagicEditor', alias));