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

package/src/layouts/workspace/Workspace.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <slot name="stage">
-      <magic-stage :key="page?.id"></magic-stage>
+      <MagicStage :key="page?.id"></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
 
-    <page-bar>
+    <PageBar>
       <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
       <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
-    </page-bar>
+    </PageBar>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
 import type { MNode, MPage } from '@tmagic/schema';
@@ -25,140 +25,133 @@ import type { Services } from '../../type';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
-export default defineComponent({
-  name: 'm-editor-workspace',
-
-  components: {
-    PageBar,
-    MagicStage,
-  },
-
-  setup() {
-    const services = inject<Services>('services');
-    const workspace = ref<HTMLDivElement>();
-    const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
-    let keycon: KeyController;
-
-    const mouseenterHandler = () => {
-      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', (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || isPage(nodes.value[0])) return;
-          services?.editorService.remove(nodes.value);
-        })
-        .keyup('backspace', (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || isPage(nodes.value[0])) return;
-          services?.editorService.remove(nodes.value);
-        })
-        .keydown([ctrl, 'c'], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.copy(nodes.value);
-        })
-        .keydown([ctrl, 'v'], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-        })
-        .keydown([ctrl, 'x'], (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || isPage(nodes.value[0])) return;
-          services?.editorService.copy(nodes.value);
-          services?.editorService.remove(nodes.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, 'numpadplus'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        })
-        .keydown([ctrl, '-'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        })
-        .keydown([ctrl, 'numpad-'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        });
+const services = inject<Services>('services');
+const workspace = ref<HTMLDivElement>();
+const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
+const page = computed(() => services?.editorService.get<MPage>('page'));
+
+const mouseenterHandler = () => {
+  workspace.value?.focus();
+};
+
+const mouseleaveHandler = () => {
+  workspace.value?.blur();
+};
+
+let keycon: KeyController;
+
+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', (e) => {
+      e.inputEvent.preventDefault();
+      if (!nodes.value || isPage(nodes.value[0])) return;
+      services?.editorService.remove(nodes.value);
+    })
+    .keyup('backspace', (e) => {
+      e.inputEvent.preventDefault();
+      if (!nodes.value || isPage(nodes.value[0])) return;
+      services?.editorService.remove(nodes.value);
+    })
+    .keydown([ctrl, 'c'], (e) => {
+      e.inputEvent.preventDefault();
+      nodes.value && services?.editorService.copy(nodes.value);
+    })
+    .keydown([ctrl, 'v'], (e) => {
+      e.inputEvent.preventDefault();
+      nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
+    })
+    .keydown([ctrl, 'x'], (e) => {
+      e.inputEvent.preventDefault();
+      if (!nodes.value || isPage(nodes.value[0])) return;
+      services?.editorService.copy(nodes.value);
+      services?.editorService.remove(nodes.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, 'numpadplus'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(0.1);
+    })
+    .keydown([ctrl, '-'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(-0.1);
+    })
+    .keydown([ctrl, 'numpad-'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(-0.1);
+    })
+    .keydown([ctrl, '0'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.set('zoom', services.uiService.calcZoom());
+    })
+    .keydown([ctrl, '1'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.set('zoom', 1);
     });
+});
 
-    onUnmounted(() => {
-      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
-      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
-      keycon.destroy();
-    });
-
-    return {
-      workspace,
-
-      page: computed(() => services?.editorService.get<MPage>('page')),
-    };
-  },
+onUnmounted(() => {
+  workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+  workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+  keycon.destroy();
 });
 </script>

package/src/services/ui.ts

@@ -98,10 +98,6 @@ class Ui extends BaseService {
     }
 
     (state as any)[name] = value;
-
-    if (name === 'stageContainerRect') {
-      state.zoom = this.calcZoom();
-    }
   }
 
   public get<T>(name: keyof typeof state): T {
@@ -113,6 +109,22 @@ class Ui extends BaseService {
     if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
   }
 
+  public calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height) return 1;
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
+      return 1;
+    }
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+  }
+
   private setColumnWidth({ left, center, right }: SetColumnWidth) {
     const columnWidth = {
       ...toRaw(this.get<GetColumnWidth>('columnWidth')),
@@ -150,22 +162,6 @@ class Ui extends BaseService {
     };
     state.zoom = this.calcZoom();
   }
-
-  private calcZoom() {
-    const { stageRect, stageContainerRect } = state;
-    const { height, width } = stageContainerRect;
-    if (!width || !height) return 1;
-
-    // 30为标尺的大小
-    const stageWidth = stageRect.width + 30;
-    const stageHeight = stageRect.height + 30;
-
-    if (width > stageWidth && height > stageHeight) {
-      return 1;
-    }
-    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
-    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-  }
 }
 
 export type UiService = Ui;

package/src/theme/nav-menu.scss

@@ -69,5 +69,11 @@
     .menu-item-text {
       color: $--nav-color;
     }
+
+    &.rule {
+      .el-icon {
+        transform: rotate(-90deg);
+      }
+    }
   }
 }

package/src/type.ts

@@ -82,16 +82,22 @@ export interface ComponentGroupState {
   list: ComponentGroup[];
 }
 
+export enum ColumnLayout {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+}
+
 export interface SetColumnWidth {
-  left?: number;
-  center?: number | 'auto';
-  right?: number;
+  [ColumnLayout.LEFT]?: number;
+  [ColumnLayout.CENTER]?: number | 'auto';
+  [ColumnLayout.RIGHT]?: number;
 }
 
 export interface GetColumnWidth {
-  left: number;
-  center: number;
-  right: number;
+  [ColumnLayout.LEFT]: number;
+  [ColumnLayout.CENTER]: number;
+  [ColumnLayout.RIGHT]: number;
 }
 
 export interface StageRect {
@@ -174,6 +180,7 @@ export interface MenuButton {
   /** type为button/dropdown时点击运行的方法 */
   handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
   /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+  className?: string;
   items?: MenuButton[];
 }
 
@@ -187,6 +194,7 @@ export interface MenuComponent {
   listeners?: Record<string, Function>;
   slots?: Record<string, any>;
   /** 是否显示，默认为true */
+  className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
 }
 
@@ -209,16 +217,17 @@ export type MenuItem =
   | 'guides'
   | 'rule'
   | MenuButton
-  | MenuComponent;
+  | MenuComponent
+  | string;
 
 /** 工具栏 */
 export interface MenuBarData {
   /** 顶部工具栏左边项 */
-  left?: MenuItem[];
+  [ColumnLayout.LEFT]?: MenuItem[];
   /** 顶部工具栏中间项 */
-  center?: MenuItem[];
+  [ColumnLayout.CENTER]?: MenuItem[];
   /** 顶部工具栏右边项 */
-  right?: MenuItem[];
+  [ColumnLayout.RIGHT]?: MenuItem[];
 }
 
 export interface SideComponent extends MenuComponent {
@@ -287,3 +296,10 @@ export enum Keys {
 
 export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
 export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';
+
+export interface ScrollViewerEvent {
+  scrollLeft: number;
+  scrollTop: number;
+  scrollHeight: number;
+  scrollWidth: number;
+}

package/src/utils/index.ts

@@ -20,3 +20,4 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
+export * from './stage';