@tmagic/editor 1.4.8 → 1.4.10

package/src/layouts/workspace/viewer/Stage.vue

@@ -0,0 +1,246 @@
+<template>
+  <ScrollViewer
+    class="m-editor-stage"
+    ref="stageWrap"
+    tabindex="-1"
+    :width="stageRect?.width"
+    :height="stageRect?.height"
+    :wrap-width="stageContainerRect?.width"
+    :wrap-height="stageContainerRect?.height"
+    :zoom="zoom"
+    :correction-scroll-size="{
+      width: 60,
+      height: 50,
+    }"
+    @click="stageWrap?.container?.focus()"
+  >
+    <div
+      class="m-editor-stage-container"
+      ref="stageContainer"
+      :style="`transform: scale(${zoom});`"
+      @contextmenu="contextmenuHandler"
+      @drop="dropHandler"
+      @dragover="dragoverHandler"
+    ></div>
+
+    <NodeListMenu></NodeListMenu>
+
+    <template #content>
+      <StageOverlay v-if="!disabledStageOverlay"></StageOverlay>
+
+      <Teleport to="body">
+        <ViewerMenu
+          ref="menu"
+          :is-multi-select="isMultiSelect"
+          :stage-content-menu="stageContentMenu"
+          :custom-content-menu="customContentMenu"
+        ></ViewerMenu>
+      </Teleport>
+    </template>
+  </ScrollViewer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { MApp, MContainer } from '@tmagic/schema';
+import StageCore, { getOffset, Runtime } from '@tmagic/stage';
+import { calcValueByFontsize } from '@tmagic/utils';
+
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { useStage } from '@editor/hooks/use-stage';
+import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
+
+import NodeListMenu from './NodeListMenu.vue';
+import StageOverlay from './StageOverlay.vue';
+import ViewerMenu from './ViewerMenu.vue';
+
+defineOptions({
+  name: 'MEditorStage',
+});
+
+withDefaults(
+  defineProps<{
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean;
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    disabledStageOverlay: false,
+  },
+);
+
+let stage: StageCore | null = null;
+let runtime: Runtime | null = null;
+
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
+const stageContainer = ref<HTMLDivElement>();
+const menu = ref<InstanceType<typeof ViewerMenu>>();
+
+const nodes = computed(() => services?.editorService.get('nodes') || []);
+const isMultiSelect = computed(() => nodes.value.length > 1);
+const stageRect = computed(() => services?.uiService.get('stageRect'));
+const stageContainerRect = computed(() => services?.uiService.get('stageContainerRect'));
+const root = computed(() => services?.editorService.get('root'));
+const page = computed(() => services?.editorService.get('page'));
+const zoom = computed(() => services?.uiService.get('zoom') || 1);
+const node = computed(() => services?.editorService.get('node'));
+
+watchEffect(() => {
+  if (stage || !page.value) return;
+
+  if (!stageContainer.value) return;
+  if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
+
+  stage = useStage(stageOptions);
+
+  stage.on('select', () => {
+    stageWrap.value?.container?.focus();
+  });
+
+  services?.editorService.set('stage', markRaw(stage));
+
+  stage.mount(stageContainer.value);
+
+  if (!node.value?.id) {
+    return;
+  }
+
+  stage.on('runtime-ready', (rt) => {
+    runtime = rt;
+    // toRaw返回的值是一个引用而非快照，需要cloneDeep
+    root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
+    page.value?.id && runtime?.updatePageId?.(page.value.id);
+    setTimeout(() => {
+      node.value && stage?.select(toRaw(node.value.id));
+    });
+  });
+});
+
+watch(zoom, (zoom) => {
+  if (!stage || !zoom) return;
+  stage.setZoom(zoom);
+});
+
+watch(page, (page) => {
+  if (runtime && page) {
+    services?.editorService.set('stageLoading', true);
+    runtime.updatePageId?.(page.id);
+    nextTick(() => {
+      stage?.select(page.id);
+    });
+  }
+});
+
+const rootChangeHandler = (root: MApp) => {
+  if (runtime && root) {
+    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+  }
+};
+
+services?.editorService.on('root-change', rootChangeHandler);
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const { contentRect } of entries) {
+    services?.uiService.set('stageContainerRect', {
+      width: contentRect.width,
+      height: contentRect.height,
+    });
+  }
+});
+
+onMounted(() => {
+  if (stageWrap.value?.container) {
+    resizeObserver.observe(stageWrap.value.container);
+    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+  }
+});
+
+onBeforeUnmount(() => {
+  stage?.destroy();
+  resizeObserver.disconnect();
+  services?.editorService.set('stage', null);
+  services?.keybindingService.unregisterEl('stage');
+  services?.editorService.off('root-change', rootChangeHandler);
+});
+
+const parseDSL = getConfig('parseDSL');
+
+const contextmenuHandler = (e: MouseEvent) => {
+  e.preventDefault();
+  menu.value?.show(e);
+};
+
+const dragoverHandler = (e: DragEvent) => {
+  if (!e.dataTransfer) return;
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'move';
+};
+
+const dropHandler = async (e: DragEvent) => {
+  if (!e.dataTransfer) return;
+
+  const data = e.dataTransfer.getData('text/json');
+
+  if (!data) return;
+
+  const config = parseDSL(`(${data})`);
+
+  if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
+
+  e.preventDefault();
+
+  const doc = stage?.renderer.contentWindow?.document;
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+
+  let parent: MContainer | undefined | null = page.value;
+  if (parentEl) {
+    parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+  }
+
+  if (parent && stageContainer.value && stage) {
+    const layout = await services?.editorService.getLayout(parent);
+
+    const containerRect = stageContainer.value.getBoundingClientRect();
+    const { scrollTop, scrollLeft } = stage.mask;
+    const { style = {} } = config.data;
+
+    let top = 0;
+    let left = 0;
+    let position = 'relative';
+
+    if (style.position === 'fixed') {
+      position = 'fixed';
+      top = e.clientY - containerRect.top;
+      left = e.clientX - containerRect.left;
+    } else if (layout === Layout.ABSOLUTE) {
+      position = 'absolute';
+      top = e.clientY - containerRect.top + scrollTop;
+      left = e.clientX - containerRect.left + scrollLeft;
+
+      if (parentEl) {
+        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+        left = left - parentLeft * zoom.value;
+        top = top - parentTop * zoom.value;
+      }
+    }
+
+    config.data.style = {
+      ...style,
+      position,
+      top: calcValueByFontsize(doc, top / zoom.value),
+      left: calcValueByFontsize(doc, left / zoom.value),
+    };
+
+    config.data.inputEvent = e;
+
+    services?.editorService.add(config.data, parent);
+  }
+};
+</script>

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+      ><CloseBold
+    /></TMagicIcon>
+    <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue';
+import { CloseBold } from '@element-plus/icons-vue';
+
+import { TMagicIcon } from '@tmagic/design';
+
+import type { Services, StageOptions } from '@editor/type';
+
+const services = inject<Services>('services');
+
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stageOverlay = ref<HTMLDivElement>();
+
+const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
+const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);
+const wrapHeight = computed(() => services?.stageOverlayService.get('wrapHeight') || 0);
+const stage = computed(() => services?.editorService.get('stage'));
+
+const style = computed(() => ({
+  width: `${wrapWidth.value}px`,
+  height: `${wrapHeight.value}px`,
+}));
+
+watch(stage, (stage) => {
+  if (stage) {
+    stage.on('dblclick', async (event: MouseEvent) => {
+      const el = await stage.actionManager.getElementFromPoint(event);
+      services?.stageOverlayService.openOverlay(el);
+    });
+  } else {
+    services?.stageOverlayService.closeOverlay();
+  }
+});
+
+watch(stageOverlay, (stageOverlay) => {
+  if (!services) return;
+
+  const subStage = services.stageOverlayService.createStage(stageOptions);
+  services?.stageOverlayService.set('stage', subStage);
+
+  if (stageOverlay && subStage) {
+    subStage.mount(stageOverlay);
+
+    const { mask, renderer } = subStage;
+
+    const { contentWindow } = renderer;
+    mask.showRule(false);
+
+    services?.stageOverlayService.updateOverlay();
+
+    contentWindow?.magic.onRuntimeReady({});
+  }
+});
+
+const closeOverlayHandler = () => {
+  services?.stageOverlayService.closeOverlay();
+};
+</script>

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -0,0 +1,145 @@
+<template>
+  <ContentMenu :menu-data="menuData" ref="menu"></ContentMenu>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, markRaw, ref, watch } from 'vue';
+import { Bottom, Top } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import CenterIcon from '@editor/icons/CenterIcon.vue';
+import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
+
+defineOptions({
+  name: 'MEditorViewerMenu',
+});
+
+const props = withDefaults(
+  defineProps<{
+    isMultiSelect?: boolean;
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    isMultiSelect: false,
+    stageContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
+);
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const canCenter = ref(false);
+
+const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes'));
+const parent = computed(() => editorService?.get('parent'));
+
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
+      {
+        type: 'button',
+        text: '水平居中',
+        icon: markRaw(CenterIcon),
+        display: () => canCenter.value,
+        handler: () => {
+          if (!nodes.value) return;
+          editorService?.alignCenter(nodes.value);
+        },
+      },
+      useCopyMenu(),
+      usePasteMenu(menu),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+        display: () => {
+          if (!node.value) return false;
+          return !isPage(node.value) && !isPageFragment(node.value);
+        },
+      },
+      {
+        type: 'button',
+        text: '上移一层',
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(1);
+        },
+      },
+      {
+        type: 'button',
+        text: '下移一层',
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(-1);
+        },
+      },
+      {
+        type: 'button',
+        text: '置顶',
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.TOP);
+        },
+      },
+      {
+        type: 'button',
+        text: '置底',
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.BOTTOM);
+        },
+      },
+      useMoveToMenu(services),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+      },
+      useDeleteMenu(),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+      },
+      {
+        type: 'button',
+        text: '清空参考线',
+        handler: () => {
+          editorService?.get('stage')?.clearGuides();
+        },
+      },
+      ...props.stageContentMenu,
+    ],
+    'viewer',
+  ),
+);
+
+watch(
+  parent,
+  async () => {
+    if (!parent.value || !editorService) return (canCenter.value = false);
+    const layout = await editorService.getLayout(parent.value);
+    const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+    const isTypeConform = nodes.value?.every(
+      (selectedNode) => ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${selectedNode?.type}`),
+    );
+    canCenter.value = isLayoutConform && !!isTypeConform;
+  },
+  { immediate: true },
+);
+
+const show = (e: MouseEvent) => {
+  menu.value?.show(e);
+};
+
+defineExpose({ show });
+</script>

package/src/services/BaseService.ts

@@ -0,0 +1,230 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 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 { EventEmitter } from 'events';
+
+import { compose } from '@editor/utils/compose';
+
+const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+
+const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
+
+const doAction = (
+  args: any[],
+  scope: any,
+  sourceMethod: any,
+  beforeMethodName: string,
+  afterMethodName: string,
+  fn: (args: any[], next?: Function | undefined) => void,
+) => {
+  try {
+    let beforeArgs = args;
+
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = beforeMethod(...beforeArgs) || [];
+
+      if (isError(beforeArgs)) throw beforeArgs;
+
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
+      }
+    }
+
+    let returnValue: any = fn(beforeArgs, sourceMethod.bind(scope));
+
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = afterMethod(returnValue, ...beforeArgs);
+
+      if (isError(returnValue)) throw returnValue;
+    }
+
+    return returnValue;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const doAsyncAction = async (
+  args: any[],
+  scope: any,
+  sourceMethod: any,
+  beforeMethodName: string,
+  afterMethodName: string,
+  fn: (args: any[], next?: Function | undefined) => Promise<void> | void,
+) => {
+  try {
+    let beforeArgs = args;
+
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = (await beforeMethod(...beforeArgs)) || [];
+
+      if (isError(beforeArgs)) throw beforeArgs;
+
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
+      }
+    }
+
+    let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
+
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
+
+      if (isError(returnValue)) throw returnValue;
+    }
+
+    return returnValue;
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * 提供两种方式对Class进行扩展
+ * 方法1：
+ * 给Class中的每个方法都添加before after两个钩子
+ * 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+ *
+ * 例如：
+ *   Class EditorService extends BaseService {
+ *     constructor() {
+ *       super([ { name: 'add', isAsync: true },]);
+ *     }
+ *     add(value) { return result; }
+ *   };
+ *
+ *   const editorService = new EditorService();
+ *
+ *   editorService.usePlugin({
+ *     beforeAdd(value) { return [value] },
+ *     afterAdd(result, value) { return result },
+ *   });
+ *
+ *   editorService.add(); 最终会变成  () => {
+ *    editorService.beforeAdd();
+ *    editorService.add();
+ *    editorService.afterAdd();
+ *   }
+ *
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
+ * 如需终止后续方法调用可以return new Error();
+ *
+ * 方法2：
+ * 给Class中的每个方法都添加中间件
+ * 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
+ *
+ * 例如：
+ *   Class EditorService extends BaseService {
+ *     constructor() {
+ *       super([ { name: 'add', isAsync: true },]);
+ *     }
+ *     add(value) { return result; }
+ *   };
+ *
+ *  const editorService = new EditorService();
+ *  editorService.use({
+ *    add(value, next) { console.log(value); next() },
+ *  });
+ */
+export default class extends EventEmitter {
+  private pluginOptionsList: Record<string, Function[]> = {};
+  private middleware: Record<string, Function[]> = {};
+  private taskList: (() => Promise<void>)[] = [];
+  private doingTask = false;
+
+  constructor(methods: { name: string; isAsync: boolean }[] = [], serialMethods: string[] = []) {
+    super();
+
+    methods.forEach(({ name: propertyName, isAsync }) => {
+      const scope = this as any;
+
+      const sourceMethod = scope[propertyName];
+
+      const beforeMethodName = methodName('before', propertyName);
+      const afterMethodName = methodName('after', propertyName);
+
+      this.pluginOptionsList[beforeMethodName] = [];
+      this.pluginOptionsList[afterMethodName] = [];
+      this.middleware[propertyName] = [];
+
+      const fn = compose(this.middleware[propertyName], isAsync);
+      Object.defineProperty(scope, propertyName, {
+        value: isAsync
+          ? async (...args: any[]) => {
+              if (!serialMethods.includes(propertyName)) {
+                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+              }
+
+              // 由于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 doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                    resolve(value);
+                  } catch (e) {
+                    reject(e);
+                  }
+                });
+              });
+
+              if (!this.doingTask) {
+                this.doTask();
+              }
+
+              return promise;
+            }
+          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn),
+      });
+    });
+  }
+
+  /**
+   * @deprecated 请使用usePlugin代替
+   */
+  public use(options: Record<string, Function>) {
+    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+      if (typeof method === 'function') this.middleware[methodName].push(method);
+    });
+  }
+
+  public usePlugin(options: Record<string, Function>) {
+    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+      if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
+    });
+  }
+
+  public removeAllPlugins() {
+    Object.keys(this.pluginOptionsList).forEach((key) => {
+      this.pluginOptionsList[key] = [];
+    });
+    Object.keys(this.middleware).forEach((key) => {
+      this.middleware[key] = [];
+    });
+  }
+
+  private async doTask() {
+    this.doingTask = true;
+    let task = this.taskList.shift();
+    while (task) {
+      await task();
+      task = this.taskList.shift();
+    }
+    this.doingTask = false;
+  }
+}