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

package/src/layouts/workspace/PageBar.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="m-editor-page-bar">
-    <div class="m-editor-page-bar-item" @click="addPage">
-      <el-icon class="m-editor-page-bar-menu-add-icon"><plus></plus></el-icon>
+  <div class="m-editor-page-bar" ref="pageBar">
+    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
+      <el-icon><plus></plus></el-icon>
     </div>
-    <template v-if="root">
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
+      <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
+    </div>
+    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
       <div
         v-for="item in root.items"
         :key="item.key"
@@ -11,9 +14,13 @@
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item)"
       >
-        <slot name="page-bar-title" :page="item">
-          <span>{{ item.name }}</span>
-        </slot>
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <el-tooltip effect="dark" placement="top-start" :content="item.name">
+              <span>{{ item.name }}</span>
+            </el-tooltip>
+          </slot>
+        </div>
 
         <el-popover placement="top" :width="160" trigger="hover">
           <div>
@@ -29,28 +36,120 @@
           </template>
         </el-popover>
       </div>
-    </template>
+    </div>
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+      <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, toRaw } from 'vue';
-import { CaretBottom, Plus } from '@element-plus/icons';
+import { computed, ComputedRef, defineComponent, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
+import { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus } from '@element-plus/icons';
 
-import type { MPage } from '@tmagic/schema';
+import type { MApp, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
+const useScroll = (root: ComputedRef<MApp | undefined>) => {
+  const pageBar = ref<HTMLDivElement>();
+  const itemsContainer = ref<HTMLDivElement>();
+
+  const pageBarWidth = ref(0);
+  const canScroll = ref(false);
+
+  const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+
+  let translateLeft = 0;
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      const { width } = contentRect;
+      pageBarWidth.value = width || 0;
+
+      setCanScroll();
+    }
+  });
+
+  const setCanScroll = () => {
+    if (itemsContainer.value) {
+      canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+    }
+  };
+
+  const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
+    if (!itemsContainer.value) return;
+
+    const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+    if (type === 'left') {
+      translateLeft += 100;
+
+      if (translateLeft > 0) {
+        translateLeft = 0;
+      }
+    } else if (type === 'right') {
+      translateLeft -= 100;
+
+      if (-translateLeft > maxScrollLeft) {
+        translateLeft = -maxScrollLeft;
+      }
+    } else if (type === 'start') {
+      translateLeft = 0;
+    } else if (type === 'end') {
+      translateLeft = -maxScrollLeft;
+    }
+
+    itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+  };
+
+  onMounted(() => {
+    pageBar.value && resizeObserver.observe(pageBar.value);
+  });
+
+  onUnmounted(() => {
+    resizeObserver.disconnect();
+  });
+
+  watch(
+    () => root.value?.items.length,
+    (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll('start');
+        } else {
+          scroll('end');
+        }
+      });
+    },
+  );
+
+  return {
+    pageBar,
+    itemsContainer,
+    canScroll,
+
+    itemsContainerWidth,
+
+    scroll,
+  };
+};
+
 export default defineComponent({
-  components: { CaretBottom, Plus },
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus },
 
   setup() {
     const services = inject<Services>('services');
     const editorService = services?.editorService;
 
+    const root = computed(() => editorService?.get<MApp>('root'));
+
     return {
-      root: computed(() => editorService?.get('root')),
+      ...useScroll(root),
+
+      root,
       page: computed(() => editorService?.get('page')),
 
       switchPage(page: MPage) {
@@ -60,7 +159,7 @@ export default defineComponent({
       addPage() {
         if (!editorService) return;
         const pageConfig = {
-          type: 'page',
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get('root'))),
         };
         editorService.add(pageConfig);

package/src/layouts/workspace/Stage.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="m-editor-stage">
+  <scroll-viewer
+    class="m-editor-stage"
+    ref="stageWrap"
+    :width="stageRect?.width"
+    :height="stageRect?.height"
+    :zoom="zoom"
+  >
     <div
       class="m-editor-stage-container"
       ref="stageContainer"
-      :style="stageStyle"
       @contextmenu="contextmenuHandler"
+      :style="`transform: scale(${zoom})`"
     ></div>
     <teleport to="body">
       <viewer-menu ref="menu" :style="menuStyle"></viewer-menu>
     </teleport>
-  </div>
+  </scroll-viewer>
 </template>
 
 <script lang="ts">
@@ -17,6 +23,7 @@ import {
   computed,
   defineComponent,
   inject,
+  markRaw,
   onMounted,
   onUnmounted,
   PropType,
@@ -31,7 +38,8 @@ import type { MApp, MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
-import type { Services } from '@editor/type';
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import type { Services, StageRect } from '@editor/type';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -79,6 +87,7 @@ export default defineComponent({
 
   components: {
     ViewerMenu,
+    ScrollViewer,
   },
 
   props: {
@@ -88,26 +97,6 @@ export default defineComponent({
 
     runtimeUrl: String,
 
-    root: {
-      type: Object as PropType<MApp>,
-    },
-
-    page: {
-      type: Object as PropType<MPage>,
-    },
-
-    node: {
-      type: Object as PropType<MNode>,
-    },
-
-    uiSelectMode: {
-      type: Boolean,
-    },
-
-    zoom: {
-      type: Number,
-    },
-
     canSelect: {
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
       default: (el: HTMLElement) => Boolean(el.id),
@@ -121,16 +110,18 @@ export default defineComponent({
     },
   },
 
-  emits: ['select', 'update', 'sort'],
-
-  setup(props, { emit }) {
+  setup(props) {
     const services = inject<Services>('services');
+
+    const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
 
-    const stageStyle = computed(() => ({
-      ...services?.uiService.get<Record<string, string | number>>('stageStyle'),
-      transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`,
-    }));
+    const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
+    const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
+    const root = computed(() => services?.editorService.get<MApp>('root'));
+    const page = computed(() => services?.editorService.get<MPage>('page'));
+    const zoom = computed(() => services?.uiService.get<number>('zoom'));
+    const node = computed(() => services?.editorService.get<MNode>('node'));
 
     let stage: StageCore | null = null;
     let runtime: Runtime | null = null;
@@ -139,16 +130,16 @@ export default defineComponent({
       if (stage) return;
 
       if (!stageContainer.value) return;
-      if (!(props.runtimeUrl || props.render) || !props.root) return;
+      if (!(props.runtimeUrl || props.render) || !root.value) return;
 
       stage = new StageCore({
         render: props.render,
         runtimeUrl: props.runtimeUrl,
-        zoom: props.zoom,
-        canSelect: (el, stop) => {
+        zoom: zoom.value,
+        canSelect: (el, event, stop) => {
           const elCanSelect = props.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
-          if (props.uiSelectMode && elCanSelect) {
+          if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
             document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
             return stop();
           }
@@ -158,63 +149,78 @@ export default defineComponent({
         moveableOptions: props.moveableOptions,
       });
 
-      services?.editorService.set('stage', stage);
+      services?.editorService.set('stage', markRaw(stage));
 
       stage?.mount(stageContainer.value);
 
-      stage?.on('select', (el: HTMLElement) => emit('select', el));
+      stage?.on('select', (el: HTMLElement) => {
+        services?.editorService.select(el.id);
+      });
+
+      stage?.on('highlight', (el: HTMLElement) => {
+        services?.editorService.highlight(el.id);
+      });
 
       stage?.on('update', (ev: UpdateEventData) => {
-        emit('update', { id: ev.el.id, style: ev.style });
+        services?.editorService.update({ id: ev.el.id, style: ev.style });
       });
 
       stage?.on('sort', (ev: SortEventData) => {
-        emit('sort', ev);
+        services?.editorService.sort(ev.src, ev.dist);
       });
 
       stage?.on('changeGuides', () => {
         services?.uiService.set('showGuides', true);
       });
 
-      if (!props.node?.id) return;
+      if (!node.value?.id) return;
       stage?.on('runtime-ready', (rt) => {
         runtime = rt;
         // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        props.root && runtime?.updateRootConfig(cloneDeep(toRaw(props.root)));
-        props.page?.id && runtime?.updatePageId?.(props.page.id);
+        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
-          props.node && stage?.select(toRaw(props.node.id));
+          node.value && stage?.select(toRaw(node.value.id));
         });
       });
     });
 
-    watch(
-      () => props.zoom,
-      (zoom) => {
-        if (!stage || !zoom) return;
-        stage?.setZoom(zoom);
-      },
-    );
+    watch(zoom, (zoom) => {
+      if (!stage || !zoom) return;
+      stage.setZoom(zoom);
+    });
 
-    watch(
-      () => props.root,
-      (root) => {
-        if (runtime && root) {
-          runtime.updateRootConfig(cloneDeep(toRaw(root)));
-        }
-      },
-    );
+    watch(root, (root) => {
+      if (runtime && root) {
+        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+      }
+    });
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        services?.uiService.set('stageContainerRect', {
+          width: contentRect.width,
+          height: contentRect.height,
+        });
+      }
+    });
+
+    onMounted(() => {
+      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+    });
 
     onUnmounted(() => {
       stage?.destroy();
+      resizeObserver.disconnect();
       services?.editorService.set('stage', null);
     });
 
     return {
-      stageStyle,
-      ...useMenu(),
-
+      stageWrap,
       stageContainer,
+      stageRect,
+      zoom,
+      ...useMenu(),
     };
   },
 });

package/src/layouts/workspace/ViewerMenu.vue

@@ -24,6 +24,7 @@
 <script lang="ts">
 import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
 
+import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 
 import { LayerOffset, Layout, Services } from '@editor/type';
@@ -53,7 +54,8 @@ export default defineComponent({
         if (!parent.value || !editorService) return (canCenter.value = false);
         const layout = await editorService.getLayout(parent.value);
         canCenter.value =
-          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !['app', 'page', 'pop'].includes(`${node.value?.type}`);
+          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) &&
+          ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${node.value?.type}`);
       },
       { immediate: true },
     );
@@ -62,8 +64,8 @@ export default defineComponent({
       menu,
       canPaste,
 
-      canDelete: computed(() => node.value?.type !== 'page'),
-      canMoveZPos: computed(() => node.value?.type !== 'page'),
+      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
+      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
       canCenter,
 
       center() {

package/src/layouts/workspace/Workspace.vue

@@ -1,19 +1,11 @@
 <template>
-  <div class="m-editor-workspace">
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
       :render="render"
-      :ui-select-mode="uiSelectMode"
-      :root="root"
-      :page="page"
-      :node="node"
-      :zoom="zoom"
       :moveable-options="moveableOptions"
       :can-select="canSelect"
-      @select="selectHandler"
-      @update="updateNodeHandler"
-      @sort="sortNodeHandler"
     ></magic-stage>
 
     <slot name="workspace-content"></slot>
@@ -26,10 +18,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, nextTick, PropType, watch } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import KeyController from 'keycon';
 
-import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import type { MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
 import type { Services } from '@editor/type';
@@ -63,35 +56,53 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
+    const workspace = ref<HTMLDivElement>();
     const node = computed(() => services?.editorService.get<MNode>('node'));
-    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+    let keycon: KeyController;
 
-    watch([() => node.value?.id, stage], ([id, stage]) => {
-      nextTick(() => {
-        // 等待相关dom变更完成后，再select，适用大多数场景
-        id && stage?.select(id);
-      });
-    });
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
 
-    return {
-      uiSelectMode: computed(() => services?.uiService.get<boolean>('uiSelectMode')),
-      root: computed(() => services?.editorService.get<MApp>('root')),
-      page: computed(() => services?.editorService.get<MPage>('page')),
-      zoom: computed(() => services?.uiService.get<number>('zoom')),
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
 
-      node,
+    onMounted(() => {
+      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+      keycon = new KeyController(workspace.value);
+
+      keycon
+        .keyup('delete', () => {
+          node.value && services?.editorService.remove(node.value);
+        })
+        .keyup(['ctrl', 'c'], () => {
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keyup(['ctrl', 'v'], () => {
+          node.value && services?.editorService.paste();
+        })
+        .keyup(['ctrl', 'x'], () => {
+          if (node.value && services) {
+            services.editorService.copy(node.value);
+            services.editorService.remove(node.value);
+          }
+        });
+    });
 
-      selectHandler(el: HTMLElement) {
-        services?.editorService.select(el.id);
-      },
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+      keycon.destroy();
+    });
 
-      updateNodeHandler(node: MComponent | MContainer | MPage) {
-        services?.editorService.update(node);
-      },
+    return {
+      workspace,
 
-      sortNodeHandler(ev: SortEventData) {
-        services?.editorService.sort(ev.src, ev.dist);
-      },
+      page: computed(() => services?.editorService.get<MPage>('page')),
     };
   },
 });

package/src/services/BaseService.ts

@@ -24,6 +24,46 @@ const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpper
 
 const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
 
+const doAction = async (
+  args: any[],
+  scope: any,
+  sourceMethod: any,
+  beforeMethodName: string,
+  afterMethodName: string,
+  fn: (args: any[], next?: Function | undefined) => Promise<void>,
+) => {
+  try {
+    let beforeArgs = args;
+
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
+
+      if (isError(beforeReturnValue)) throw beforeReturnValue;
+
+      if (!Array.isArray(beforeReturnValue)) {
+        beforeReturnValue = [beforeReturnValue];
+      }
+
+      beforeArgs = beforeArgs.map((v: any, index: number) => {
+        if (typeof beforeReturnValue[index] === 'undefined') return v;
+        return beforeReturnValue[index];
+      });
+    }
+
+    let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
+
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(...beforeArgs, returnValue);
+
+      if (isError(returnValue)) throw returnValue;
+    }
+
+    return returnValue;
+  } catch (error) {
+    throw error;
+  }
+};
+
 /**
  * 提供两种方式对Class进行扩展
  * 方法1：
@@ -74,8 +114,10 @@ const isError = (error: any): boolean => Object.prototype.toString.call(error) =
 export default class extends EventEmitter {
   private pluginOptionsList: Record<string, Function[]> = {};
   private middleware: Record<string, Function[]> = {};
+  private taskList: (() => Promise<void>)[] = [];
+  private doingTask = false;
 
-  constructor(methods: string[]) {
+  constructor(methods: string[] = [], serialMethods: string[] = []) {
     super();
 
     methods.forEach((propertyName: string) => {
@@ -93,32 +135,28 @@ export default class extends EventEmitter {
       const fn = compose(this.middleware[propertyName]);
       Object.defineProperty(scope, propertyName, {
         value: async (...args: any[]) => {
-          let beforeArgs = args;
-
-          for (const beforeMethod of this.pluginOptionsList[beforeMethodName]) {
-            let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
-
-            if (isError(beforeReturnValue)) throw beforeReturnValue;
-
-            if (!Array.isArray(beforeReturnValue)) {
-              beforeReturnValue = [beforeReturnValue];
-            }
-
-            beforeArgs = beforeArgs.map((v: any, index: number) => {
-              if (typeof beforeReturnValue[index] === 'undefined') return v;
-              return beforeReturnValue[index];
-            });
+          if (!serialMethods.includes(propertyName)) {
+            return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
           }
 
-          let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-
-          for (const afterMethod of this.pluginOptionsList[afterMethodName]) {
-            returnValue = await afterMethod(...beforeArgs, returnValue);
+          // 由于async await，所以会出现函数执行到await时让出线程，导致执行顺序出错，例如调用了select(1) -> update -> select(2)，这个时候就有可能出现update了2；
+          // 这里保证函数调用严格按顺序执行；
+          const promise = new Promise<any>((resolve, reject) => {
+            this.taskList.push(async () => {
+              try {
+                const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                resolve(value);
+              } catch (e) {
+                reject(e);
+              }
+            });
+          });
 
-            if (isError(returnValue)) throw returnValue;
+          if (!this.doingTask) {
+            this.doTask();
           }
 
-          return returnValue;
+          return promise;
         },
       });
     });
@@ -135,4 +173,14 @@ export default class extends EventEmitter {
       if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
     });
   }
+
+  private async doTask() {
+    this.doingTask = true;
+    let task = this.taskList.shift();
+    while (task) {
+      await task();
+      task = this.taskList.shift();
+    }
+    this.doingTask = false;
+  }
 }