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

package/src/layouts/workspace/ViewerMenu.vue

@@ -1,47 +1,31 @@
 <template>
-  <div class="magic-editor-content-menu" ref="menu">
-    <div>
-      <div class="magic-editor-content-menu-item" @click="() => center()" v-if="canCenter">水平居中</div>
-      <div class="magic-editor-content-menu-item" @click="() => copy()">复制</div>
-      <div class="magic-editor-content-menu-item" @click="paste" v-if="canPaste">粘贴</div>
-      <template v-if="canMoveZPos">
-        <div class="separation"></div>
-        <div class="magic-editor-content-menu-item" @click="topItem">上移一层</div>
-        <div class="magic-editor-content-menu-item" @click="bottomItem">下移一层</div>
-        <div class="magic-editor-content-menu-item" @click="top">置顶</div>
-        <div class="magic-editor-content-menu-item" @click="bottom">置底</div>
-      </template>
-      <template v-if="canDelete">
-        <div class="separation"></div>
-        <div class="magic-editor-content-menu-item" @click="() => remove()">删除</div>
-      </template>
-      <div class="separation"></div>
-      <div class="magic-editor-content-menu-item" @click="clearGuides">清空参考线</div>
-    </div>
-  </div>
+  <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons';
 
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 
-import { LayerOffset, Layout, Services } from '@editor/type';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 export default defineComponent({
-  name: 'magic-editor-ui-viewer-menu',
+  components: { ContentMenu },
 
   setup() {
     const services = inject<Services>('services');
     const editorService = services?.editorService;
-    const menu = ref<HTMLDivElement>();
+    const menu = ref<InstanceType<typeof ContentMenu>>();
     const canPaste = ref(false);
     const canCenter = ref(false);
 
     const node = computed(() => editorService?.get('node'));
     const parent = computed(() => editorService?.get('parent'));
+    const isPage = computed(() => node.value?.type === NodeType.PAGE);
 
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
@@ -62,49 +46,102 @@ export default defineComponent({
 
     return {
       menu,
-      canPaste,
-
-      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
-      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
-      canCenter,
-
-      center() {
-        node.value && editorService?.alignCenter(node.value);
-      },
-
-      copy() {
-        node.value && editorService?.copy(node.value);
-        canPaste.value = true;
-      },
-
-      paste() {
-        const top = menu.value?.offsetTop || 0;
-        const left = menu.value?.offsetLeft || 0;
-        editorService?.paste({ left, top });
-      },
-
-      remove() {
-        node.value && editorService?.remove(node.value);
-      },
-
-      top() {
-        editorService?.moveLayer(LayerOffset.TOP);
-      },
-
-      bottom() {
-        editorService?.moveLayer(LayerOffset.BOTTOM);
-      },
-
-      topItem() {
-        editorService?.moveLayer(1);
-      },
-
-      bottomItem() {
-        editorService?.moveLayer(-1);
-      },
-
-      clearGuides() {
-        editorService?.get<StageCore>('stage').clearGuides();
+      menuData: reactive<MenuItem[]>([
+        {
+          type: 'button',
+          text: '水平居中',
+          display: () => canCenter.value,
+          handler: () => {
+            node.value && editorService?.alignCenter(node.value);
+          },
+        },
+        {
+          type: 'button',
+          text: '复制',
+          icon: markRaw(DocumentCopy),
+          handler: () => {
+            node.value && editorService?.copy(node.value);
+            canPaste.value = true;
+          },
+        },
+        {
+          type: 'button',
+          text: '粘贴',
+          display: () => canPaste.value,
+          handler: () => {
+            const top = menu.value?.$el.offsetTop || 0;
+            const left = menu.value?.$el.offsetLeft || 0;
+            editorService?.paste({ left, top });
+          },
+        },
+        {
+          type: 'divider',
+          direction: 'horizontal',
+          display: () => !isPage.value,
+        },
+        {
+          type: 'button',
+          text: '上移一层',
+          icon: markRaw(Top),
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(1);
+          },
+        },
+        {
+          type: 'button',
+          text: '下移一层',
+          icon: markRaw(Bottom),
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(-1);
+          },
+        },
+        {
+          type: 'button',
+          text: '置顶',
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.TOP);
+          },
+        },
+        {
+          type: 'button',
+          text: '置底',
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.BOTTOM);
+          },
+        },
+        {
+          type: 'divider',
+          direction: 'horizontal',
+          display: () => !isPage.value,
+        },
+        {
+          type: 'button',
+          text: '删除',
+          icon: Delete,
+          display: () => !isPage.value,
+          handler: () => {
+            node.value && editorService?.remove(node.value);
+          },
+        },
+        {
+          type: 'divider',
+          direction: 'horizontal',
+        },
+        {
+          type: 'button',
+          text: '清空参考线',
+          handler: () => {
+            editorService?.get<StageCore>('stage').clearGuides();
+          },
+        },
+      ]),
+
+      show(e: MouseEvent) {
+        menu.value?.show(e);
       },
     };
   },

package/src/layouts/workspace/Workspace.vue

@@ -84,11 +84,11 @@ export default defineComponent({
           e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
         })
-        .keyup([ctrl, 'v'], (e) => {
+        .keydown([ctrl, 'v'], (e) => {
           e.inputEvent.preventDefault();
           node.value && services?.editorService.paste();
         })
-        .keyup([ctrl, 'x'], (e) => {
+        .keydown([ctrl, 'x'], (e) => {
           e.inputEvent.preventDefault();
           if (!node.value || isPage(node.value)) return;
           services?.editorService.copy(node.value);

package/src/services/editor.ts

@@ -54,6 +54,7 @@ class Editor extends BaseService {
     stage: null,
     highlightNode: null,
     modifiedNodeIds: new Map(),
+    pageLength: 0,
   });
 
   constructor() {
@@ -69,6 +70,7 @@ class Editor extends BaseService {
         'paste',
         'alignCenter',
         'moveLayer',
+        'move',
         'undo',
         'redo',
         'highlight',
@@ -89,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);
     }
   }
@@ -190,6 +193,9 @@ class Editor extends BaseService {
     } else {
       historyService.empty();
     }
+
+    this.emit('select', node);
+
     return node!;
   }
 
@@ -249,8 +255,9 @@ class Editor extends BaseService {
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MNode | undefined;
+    const isPage = type === NodeType.PAGE;
 
-    if (type === NodeType.PAGE) {
+    if (isPage) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -290,6 +297,12 @@ class Editor extends BaseService {
 
     stage?.select(newNode.id);
 
+    if (isPage) {
+      this.state.pageLength += 1;
+    }
+
+    this.emit('add', newNode);
+
     return newNode;
   }
 
@@ -318,9 +331,23 @@ class Editor extends BaseService {
     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);
@@ -330,6 +357,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
 
+    this.emit('remove', node);
+
     return node;
   }
 
@@ -391,6 +420,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(newConfig.id);
     this.pushHistoryState();
 
+    this.emit('update', newConfig);
+
     return newConfig;
   }
 

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';
@@ -100,8 +100,7 @@ class Props extends BaseService {
 
     return cloneDeep({
       ...getDefaultPropsValue(type),
-      ...defaultValue,
-      ...(this.state.propsValueMap[type] || {}),
+      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
     });
   }
 }

package/src/theme/common/var.scss

@@ -2,6 +2,7 @@ $--theme-color: #2882e0;
 
 $--font-color: #070303;
 $--border-color: #d9dbdd;
+$--hover-color: #f3f5f9;
 
 $--nav-height: 35px;
 $--nav-color: #070303;

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

@@ -56,7 +56,7 @@
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {
-  background-color: #f3f5f9;
+  background-color: $--hover-color;
   width: 100%;
 }
 

package/src/theme/page-bar.scss

@@ -40,7 +40,7 @@
       z-index: 1;
     }
 
-    .m-editor-page-bar-title {
+    &-title {
       max-width: 150px;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -48,3 +48,24 @@
     }
   }
 }
+
+.page-bar-popover {
+  &.el-popper.el-popover {
+    padding: 10px 0;
+  }
+
+  .menu-item {
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
+}

package/src/type.ts

@@ -53,6 +53,7 @@ export interface StoreState {
   highlightNode: MNode | null;
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
+  pageLength: number;
 }
 
 export interface PropsState {
@@ -125,6 +126,8 @@ export interface MenuButton {
    * zoom: 放大缩小
    */
   type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  /** 当type为divider时有效，分割线方向, 默认vertical */
+  direction?: 'horizontal' | 'vertical';
   /** 展示的文案 */
   text?: string;
   /** 鼠标悬浮是显示的气泡中的文案 */
@@ -136,14 +139,9 @@ export interface MenuButton {
   /** 是否显示，默认为true */
   display?: boolean | ((data?: Services) => boolean);
   /** type为button/dropdown时点击运行的方法 */
-  handler?: (data?: Services) => Promise<any> | any;
-  /** type为dropdown时，下拉的菜单列表 */
-  items?: {
-    /** 展示的文案 */
-    text: string;
-    /** 点击运行的方法 */
-    handler(data: Services): any;
-  }[];
+  handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
+  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+  items?: MenuButton[];
 }
 
 export interface MenuComponent {

package/src/utils/editor.ts

@@ -144,7 +144,7 @@ const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
   const style = node.style || {};
   const height = style.height || 0;
 
-  if (!stage || style.top || !parentNode.style || !isNumber(height)) return style;
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style || !isNumber(height)) return style;
 
   const { height: parentHeight } = parentNode.style;
 

package/src/utils/polyfills.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+// serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
+if (typeof (window as any).global === 'undefined') {
+  (window as any).global = window;
+}

package/src/utils/props.ts

@@ -142,6 +142,25 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '字体',
+                items: [
+                  {
+                    name: 'color',
+                    text: '颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    name: 'fontSize',
+                    text: '大小',
+                  },
+                  {
+                    name: 'fontWeight',
+                    text: '粗细',
+                  },
+                ],
+              },
             ],
           },
         ],