@tmagic/editor 1.0.0-rc.4 → 1.0.0-rc.7

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from './type';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -20,6 +20,14 @@ declare const _default: DefineComponent<{
     sidebar: {
         type: PropType<SideBarData>;
     };
+    layerContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
+    stageContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
     /** 顶部工具栏配置 */
     menu: {
         type: PropType<MenuBarData>;
@@ -85,6 +93,14 @@ declare const _default: DefineComponent<{
     sidebar: {
         type: PropType<SideBarData>;
     };
+    layerContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
+    stageContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
     /** 顶部工具栏配置 */
     menu: {
         type: PropType<MenuBarData>;
@@ -139,6 +155,8 @@ declare const _default: DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
+    layerContentMenu: MenuItem[];
+    stageContentMenu: MenuItem[];
     autoScrollIntoView: boolean;
     codeOptions: Record<string, any>;
     modelValue: MApp;

package/dist/types/src/fields/Code.vue.d.ts

@@ -16,9 +16,9 @@ declare const _default: DefineComponent<Readonly<{
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    name: any;
-    config: any;
-    model: any;
-    prop: any;
+    readonly name?: any;
+    readonly config?: any;
+    readonly model?: any;
+    readonly prop?: any;
 }>;
 export default _default;

package/dist/types/src/fields/CodeLink.vue.d.ts

@@ -20,9 +20,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     modelValue: Ref<{
-        form: {
-            [x: string]: any;
-        };
+        form: Record<string, any>;
     }>;
     formConfig: ComputedRef<{
         text: string;

package/dist/types/src/layouts/PropsPanel.vue.d.ts

@@ -1,9 +1,7 @@
 import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { FormValue } from '@tmagic/form';
 declare const _default: DefineComponent<{}, {
-    values: Ref<{
-        [x: string]: any;
-        [x: number]: any;
-    }>;
+    values: Ref<FormValue>;
     configForm: Ref<any>;
     curFormConfig: any;
     propsPanelSize: ComputedRef<unknown>;

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

@@ -15,24 +15,7 @@ export interface HistoryState {
 declare class History extends BaseService {
     state: {
         pageId?: Id | undefined;
-        pageSteps: {
-            [x: string]: {
-                pushElement: (element: StepValue) => void;
-                canUndo: () => boolean;
-                undo: () => StepValue | null;
-                canRedo: () => boolean;
-                redo: () => StepValue | null;
-                getCurrentElement: () => StepValue | null;
-            };
-            [x: number]: {
-                pushElement: (element: StepValue) => void;
-                canUndo: () => boolean;
-                undo: () => StepValue | null;
-                canRedo: () => boolean;
-                redo: () => StepValue | null;
-                getCurrentElement: () => StepValue | null;
-            };
-        };
+        pageSteps: Record<Id, UndoRedo<StepValue>>;
         canRedo: boolean;
         canUndo: boolean;
     };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.7",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -22,9 +22,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build",
-    "test": "jest --maxWorkers=8",
-    "test:coverage": "jest --maxWorkers=16 --coverage"
+    "build": "vite build"
   },
   "engines": {
     "node": ">=14"
@@ -45,11 +43,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-rc.4",
-    "@tmagic/form": "^1.0.0-rc.4",
-    "@tmagic/schema": "^1.0.0-rc.4",
-    "@tmagic/stage": "^1.0.0-rc.4",
-    "@tmagic/utils": "^1.0.0-rc.4",
+    "@tmagic/core": "1.0.0-rc.7",
+    "@tmagic/form": "1.0.0-rc.7",
+    "@tmagic/schema": "1.0.0-rc.7",
+    "@tmagic/stage": "1.0.0-rc.7",
+    "@tmagic/utils": "1.0.0-rc.7",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -62,31 +60,24 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "^1.0.0-rc.1",
+    "@tmagic/form": "1.0.0-rc.7",
     "element-plus": "^2.2.0",
+    "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
-    "@types/jest": "^27.5.1",
     "@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.20",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
-    "babel-jest": "^27.0.6",
-    "jest": "^27.5.1",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
+    "@vue/test-utils": "^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": "28d5ad4573a27fa240f5e7d0902d3368e8d936b6"
+  }
 }

package/src/Editor.vue

@@ -56,7 +56,7 @@ import eventsService from '@editor/services/events';
 import historyService from '@editor/services/history';
 import propsService from '@editor/services/props';
 import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from '@editor/type';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from '@editor/type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -88,6 +88,16 @@ export default defineComponent({
       type: Object as PropType<SideBarData>,
     },
 
+    layerContentMenu: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+
+    stageContentMenu: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+
     /** 顶部工具栏配置 */
     menu: {
       type: Object as PropType<MenuBarData>,
@@ -237,6 +247,9 @@ export default defineComponent({
 
     provide('services', services);
 
+    provide('layerContentMenu', props.layerContentMenu);
+    provide('stageContentMenu', props.stageContentMenu);
+
     return services;
   },
 });

package/src/components/ContentMenu.vue

@@ -11,13 +11,19 @@
       ></tool-button>
     </div>
     <teleport to="body">
-      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+      <content-menu
+        class="sub-menu"
+        ref="subMenu"
+        :menu-data="subMenuData"
+        :is-sub-menu="true"
+        @hide="hide"
+      ></content-menu>
     </teleport>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
 
 import { MenuButton, MenuItem } from '@editor/type';
 
@@ -31,9 +37,16 @@ export default defineComponent({
       type: Array as PropType<MenuItem[]>,
       default: () => [],
     },
+
+    isSubMenu: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  setup() {
+  emits: ['hide', 'show'],
+
+  setup(props, { emit }) {
     const menu = ref<HTMLDivElement>();
     const subMenu = ref<any>();
     const visible = ref(false);
@@ -44,20 +57,35 @@ export default defineComponent({
     });
 
     const hide = () => {
+      if (!visible.value) return;
+
       visible.value = false;
+      subMenu.value?.hide();
+
+      emit('hide');
+    };
+
+    const hideHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | undefined;
+      if (!visible.value || !target) {
+        return;
+      }
+      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        return;
+      }
+      hide();
     };
 
     onMounted(() => {
-      globalThis.addEventListener(
-        'mousedown',
-        (e: MouseEvent) => {
-          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
-            return;
-          }
-          hide();
-        },
-        true,
-      );
+      if (props.isSubMenu) return;
+
+      globalThis.addEventListener('mousedown', hideHandler, true);
+    });
+
+    onUnmounted(() => {
+      if (props.isSubMenu) return;
+
+      globalThis.removeEventListener('mousedown', hideHandler, true);
     });
 
     return {
@@ -70,21 +98,26 @@ export default defineComponent({
       hide,
 
       show(e: MouseEvent) {
-        visible.value = true;
+        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+        setTimeout(() => {
+          visible.value = true;
+
+          nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
 
-        nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
+            }
 
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
+            menuStyle.value = {
+              top: `${top}px`,
+              left: `${e.clientX}px`,
+            };
 
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX}px`,
-          };
-        });
+            emit('show');
+          });
+        }, 300);
       },
 
       showSubMenu(item: MenuItem) {

package/src/layouts/sidebar/LayerMenu.vue

@@ -22,6 +22,8 @@ export default defineComponent({
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
 
+    const layerContentMenu = inject<MenuItem[]>('layerContentMenu', []);
+
     const createMenuItems = (group: ComponentGroup): MenuButton[] =>
       group.items.map((component) => ({
         text: component.text,
@@ -101,6 +103,7 @@ export default defineComponent({
             node.value && services?.editorService.remove(node.value);
           },
         },
+        ...layerContentMenu,
       ]),
 
       show(e: MouseEvent) {

package/src/layouts/workspace/ViewerMenu.vue

@@ -27,6 +27,8 @@ export default defineComponent({
     const parent = computed(() => editorService?.get('parent'));
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
 
+    const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
+
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== 'undefined' && !!data;
@@ -150,6 +152,7 @@ export default defineComponent({
             editorService?.get<StageCore>('stage').clearGuides();
           },
         },
+        ...stageContentMenu,
       ]),
 
       show(e: MouseEvent) {

package/src/services/editor.ts

@@ -38,7 +38,6 @@ import {
   initPosition,
   isFixed,
   setLayout,
-  setNewItemId,
 } from '@editor/utils/editor';
 import { log } from '@editor/utils/logger';
 
@@ -495,7 +494,7 @@ class Editor extends BaseService {
       return;
     }
 
-    setNewItemId(config, this.get('root'));
+    await propsService.setNewItemId(config, this.get('root'));
     if (config.style) {
       config.style = {
         ...config.style,
@@ -556,9 +555,9 @@ class Editor extends BaseService {
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
-    if (offset === LayerOffset.BOTTOM) {
+    if (offset === LayerOffset.TOP) {
       brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
-    } else if (offset === LayerOffset.TOP) {
+    } else if (offset === LayerOffset.BOTTOM) {
       brothers.splice(0, 0, brothers.splice(index, 1)[0]);
     } else {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);

package/src/services/props.ts

@@ -17,11 +17,12 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
+import { cloneDeep, mergeWith, random } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+import type { Id, MComponent, MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import { isPop, toLine } from '@tmagic/utils';
 
 import type { PropsState } from '@editor/type';
 import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
@@ -35,7 +36,7 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
+    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -87,7 +88,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, defaultValue = {}) {
+  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -98,13 +99,67 @@ class Props extends BaseService {
       return value;
     }
 
-    return cloneDeep({
-      ...getDefaultPropsValue(type),
-      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
-    });
+    const data = cloneDeep(defaultValue as any);
+
+    await this.setNewItemId(data);
+
+    return {
+      ...getDefaultPropsValue(type, await this.createId(type)),
+      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
+    };
+  }
+
+  public async createId(type: string | number): Promise<string> {
+    return `${type}_${random(10000, false)}`;
+  }
+
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * @param {Object} config 组件配置
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  public async setNewItemId(config: MNode, parent?: MPage) {
+    const oldId = config.id;
+
+    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);
+      }
+    }
   }
 }
 
+/**
+ * 复制页面时，需要把组件下关联的弹窗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);
+    }
+  });
+};
+
 export type PropsService = Props;
 
 export default new Props();

package/src/utils/editor.ts

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import { random } from 'lodash-es';
-
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
@@ -27,8 +25,6 @@ import { Layout } from '@editor/type';
 
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
-export const generateId = (type: string | number): string => `${type}_${random(10000, false)}`;
-
 /**
  * 获取所有页面配置
  * @param app DSL跟节点
@@ -74,51 +70,6 @@ export const generatePageName = (pageNameList: string[]): string => {
  */
 export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
 
-/**
- * 复制页面时，需要把组件下关联的弹窗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);
-    }
-  });
-};
-
-/**
- * 将组件与组件的子元素配置中的id都设置成一个新的ID
- * @param {Object} config 组件配置
- */
-/* eslint no-param-reassign: ["error", { "props": false }] */
-export const setNewItemId = (config: MNode, parent?: MPage) => {
-  const oldId = config.id;
-
-  config.id = generateId(config.type || 'component');
-  config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
-
-  // 只有弹窗在页面下的一级子元素才有效
-  if (isPop(config) && parent?.type === NodeType.PAGE) {
-    updatePopId(oldId, config.id, parent);
-  }
-
-  if (config.items && Array.isArray(config.items)) {
-    config.items.forEach((item) => setNewItemId(item, config as MPage));
-  }
-};
-
 /**
  * @param {Object} node
  * @returns {boolean}
@@ -142,9 +93,13 @@ export const toRelative = (node: MNode) => {
 
 const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
   const style = node.style || {};
-  const height = style.height || 0;
+  let height = style.height || 0;
 
-  if (!stage || typeof style.top !== 'undefined' || !parentNode.style || !isNumber(height)) return style;
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style;
+
+  if (!isNumber(height)) {
+    height = 0;
+  }
 
   const { height: parentHeight } = parentNode.style;
 

package/src/utils/props.ts

@@ -20,7 +20,6 @@ import { FormConfig, FormState } from '@tmagic/form';
 
 import editorService from '@editor/services/editor';
 import eventsService from '@editor/services/events';
-import { generateId } from '@editor/utils/editor';
 
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
@@ -161,6 +160,21 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '变形',
+                name: 'transform',
+                items: [
+                  {
+                    name: 'rotate',
+                    text: '旋转角度',
+                  },
+                  {
+                    name: 'scale',
+                    text: '缩放',
+                  },
+                ],
+              },
             ],
           },
         ],
@@ -229,9 +243,9 @@ export const DEFAULT_CONFIG: FormConfig = fillConfig([]);
  * @param type 组件类型
  * @returns Object
  */
-export const getDefaultPropsValue = (type: string) => ({
+export const getDefaultPropsValue = (type: string, id: string) => ({
   type,
-  id: generateId(type),
+  id,
   style: {},
   name: type,
 });