@tmagic/editor 1.4.6 → 1.4.8

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

@@ -1,246 +0,0 @@
-<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

@@ -1,68 +0,0 @@
-<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

@@ -1,145 +0,0 @@
-<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

@@ -1,230 +0,0 @@
-/*
- * 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;
-  }
-}