@tmagic/editor 1.3.4 → 1.3.6

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

@@ -1,112 +1,68 @@
 <template>
-  <ContentMenu
-    ref="menu"
-    class="magic-editor-node-list-menu"
-    style="max-width: 280px"
-    :menu-data="menuData"
-    :active="node?.id"
-    :auto-hide="!pinned"
-    @mouseenter="mouseenterHandler()"
+  <TMagicTooltip v-if="page && buttonVisible" content="点击查看当前位置下的组件">
+    <div ref="button" class="m-editor-stage-float-button" @click="visible = true">可选组件</div>
+  </TMagicTooltip>
+  <FloatingBox
+    v-if="page && nodeStatusMap && buttonVisible"
+    ref="box"
+    v-model:visible="visible"
+    title="当前位置下的组件"
+    :position="menuPosition"
   >
-    <template #title>
-      <NodeListMenuTitle v-model:pinned="pinned" @change="dragMenuHandler" @close="closeHandler"></NodeListMenuTitle>
+    <template #body>
+      <Tree
+        class="m-editor-node-list-menu magic-editor-layer-tree"
+        :data="nodeData"
+        :node-status-map="nodeStatusMap"
+        @node-click="clickHandler"
+      ></Tree>
     </template>
-  </ContentMenu>
+  </FloatingBox>
 </template>
 
 <script lang="ts" setup>
-import { Component, computed, inject, ref, watch } from 'vue';
-import type { OnDrag } from 'gesto';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 
+import { TMagicTooltip } from '@tmagic/design';
 import type { MNode } from '@tmagic/schema';
-import { StageDragStatus } from '@tmagic/stage';
-import { getNodes } from '@tmagic/utils';
 
-import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { ComponentItem, MenuButton, Services } from '@editor/type';
-
-import NodeListMenuTitle from './NodeListMenuTitle.vue';
-
-const PINNED_STATUE_CACHE_KEY = 'tmagic-pinned-node-list-pinned-status';
-
-const props = defineProps<{ isMultiSelect?: boolean }>();
-
-const menu = ref<InstanceType<typeof ContentMenu>>();
-const nodeList = ref<MNode[]>([]);
-const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
-const firstShow = ref(true);
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import Tree from '@editor/components/Tree.vue';
+import { useFilter } from '@editor/hooks/use-filter';
+import { useNodeStatus } from '@editor/layouts/sidebar/layer/use-node-status';
+import type { Services, TreeNodeData } from '@editor/type';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const componentListService = services?.componentListService;
+
+const visible = ref(false);
+const buttonVisible = ref(false);
+const button = ref<HTMLDivElement>();
+const box = ref<InstanceType<typeof FloatingBox>>();
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));
-const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes') || []);
+const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
-let timeout: NodeJS.Timeout | null = null;
+const { nodeStatusMap } = useNodeStatus(services);
 
-const cancel = () => {
-  if (timeout) {
-    globalThis.clearTimeout(timeout);
-  }
+const filterNodeMethod = (value: string, data: MNode): boolean => data.id === value;
 
-  if (pinned.value) {
-    return;
-  }
-
-  nodeList.value = [];
-  menu.value?.hide();
-};
-
-const clearTimeoutLazy = () => {
-  globalThis.setTimeout(() => {
-    if (timeout) {
-      globalThis.clearTimeout(timeout);
-    }
-  }, 300);
-};
+const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
 
 const unWatch = watch(
   stage,
   (stage) => {
     if (!stage) return;
 
-    stage.on('drag-start', () => {
-      cancel();
-    });
-
-    stage.on('mousemove', (event: MouseEvent) => {
-      cancel();
-
-      if (props.isMultiSelect || stage.getDragStatus() !== StageDragStatus.END) {
-        return;
-      }
-
-      timeout = globalThis.setTimeout(() => {
-        const els = stage.renderer.getElementsFromPoint(event) || [];
+    stage.on('select', (el: HTMLElement, event: MouseEvent) => {
+      const els = stage.renderer.getElementsFromPoint(event) || [];
+      const ids = els.map((el) => el.id).filter((id) => Boolean(id));
 
-        const nodes = getNodes(
-          els.map((el) => el.id),
-          page.value?.items,
-        );
+      buttonVisible.value = ids.length > 3;
 
-        if (pinned.value && nodes.length === 0) {
-          return;
-        }
-
-        nodeList.value = nodes;
-
-        if (nodeList.value.length > 1) {
-          menu.value?.show(pinned.value && !firstShow.value ? undefined : event);
-          firstShow.value = false;
-        }
-      }, 1500);
-    });
-
-    stage.on('mouseleave', () => {
-      // mouseleave后，大概率还有最后一个mousemove事件，这里延迟清除
-      clearTimeoutLazy();
+      filterTextChangeHandler(ids);
     });
 
     unWatch();
@@ -116,60 +72,43 @@ const unWatch = watch(
   },
 );
 
-const componentMap = computed(() => {
-  const map: Record<string, ComponentItem> = {};
-  componentListService?.getList().forEach((group) => {
-    group.items.forEach((item) => {
-      map[item.type] = item;
-    });
-  });
-  return map;
-});
+watch(
+  nodes,
+  (nodes) => {
+    if (!nodeStatusMap.value) return;
 
-const menuData = computed<MenuButton[]>(() =>
-  nodeList.value.map((node: MNode) => {
-    let text = node.name;
-    let icon: string | Component<{}, {}, any> | undefined;
-    if (node.type) {
-      const item = componentMap.value[node.type];
-      text += ` (${item?.text})`;
-      icon = item?.icon;
+    for (const [id, status] of nodeStatusMap.value.entries()) {
+      status.selected = nodes.some((node) => node.id === id);
     }
-
-    return {
-      type: 'button',
-      text,
-      id: node.id,
-      icon,
-      handler: async () => {
-        await editorService?.select(node);
-        stage.value?.select(node.id);
-      },
-    };
-  }),
+  },
+  {
+    immediate: true,
+  },
 );
 
-const mouseenterHandler = () => {
-  // menu的mouseenter后，大概率还有最后一个mousemove事件，这里延迟清除
-  clearTimeoutLazy();
+const clickHandler = async (event: MouseEvent, data: TreeNodeData) => {
+  await editorService?.select(data.id);
+  stage.value?.select(data.id);
 };
 
-const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {
-  if (!menu.value) return;
+const menuPosition = ref({
+  left: 0,
+  top: 0,
+});
 
-  const { menuPosition } = menu.value;
+watch(visible, async (visible) => {
+  if (!button.value || !visible) {
+    return;
+  }
 
-  menu.value?.setPosition({
-    clientY: menuPosition.top + deltaY,
-    clientX: menuPosition.left + deltaX,
-  });
-};
+  await nextTick();
 
-const closeHandler = () => {
-  menu.value?.hide();
-};
+  const rect = button.value.getBoundingClientRect();
+  const height = box.value?.target?.clientHeight || 0;
 
-watch(pinned, () => {
-  globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+  menuPosition.value = {
+    left: rect.left + rect.width + 5,
+    top: rect.top - height / 2 + rect.height / 2,
+  };
 });
 </script>

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

@@ -22,9 +22,10 @@
       @drop="dropHandler"
       @dragover="dragoverHandler"
     ></div>
+    <NodeListMenu></NodeListMenu>
+
     <Teleport to="body">
       <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
-      <NodeListMenu ref="nodeList" :is-multi-select="isMultiSelect"></NodeListMenu>
     </Teleport>
   </ScrollViewer>
 </template>

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

@@ -11,10 +11,8 @@ import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import CenterIcon from '@editor/icons/CenterIcon.vue';
-import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
-import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 defineOptions({
   name: 'MEditorViewerMenu',
@@ -28,7 +26,6 @@ const props = withDefaults(
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const menu = ref<InstanceType<typeof ContentMenu>>();
-const canPaste = ref(false);
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));
@@ -127,10 +124,8 @@ watch(
   { immediate: true },
 );
 
-const show = async (e: MouseEvent) => {
+const show = (e: MouseEvent) => {
   menu.value?.show(e);
-  const data = await storageService.getItem(COPY_STORAGE_KEY);
-  canPaste.value = data !== 'undefined' && !!data;
 };
 
 defineExpose({ show });

package/src/services/BaseService.ts

@@ -24,13 +24,48 @@ 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 (
+const doAction = (
   args: any[],
   scope: any,
   sourceMethod: any,
   beforeMethodName: string,
   afterMethodName: string,
-  fn: (args: any[], next?: Function | undefined) => Promise<void>,
+  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;
@@ -112,10 +147,10 @@ export default class extends EventEmitter {
   private taskList: (() => Promise<void>)[] = [];
   private doingTask = false;
 
-  constructor(methods: string[] = [], serialMethods: string[] = []) {
+  constructor(methods: { name: string; isAsync: boolean }[] = [], serialMethods: string[] = []) {
     super();
 
-    methods.forEach((propertyName: string) => {
+    methods.forEach(({ name: propertyName, isAsync }) => {
       const scope = this as any;
 
       const sourceMethod = scope[propertyName];
@@ -127,32 +162,34 @@ export default class extends EventEmitter {
       this.pluginOptionsList[afterMethodName] = [];
       this.middleware[propertyName] = [];
 
-      const fn = compose(this.middleware[propertyName]);
+      const fn = compose(this.middleware[propertyName], isAsync);
       Object.defineProperty(scope, propertyName, {
-        value: async (...args: any[]) => {
-          if (!serialMethods.includes(propertyName)) {
-            return doAction(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 doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
-                resolve(value);
-              } catch (e) {
-                reject(e);
+        value: isAsync
+          ? async (...args: any[]) => {
+              if (!serialMethods.includes(propertyName)) {
+                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
               }
-            });
-          });
 
-          if (!this.doingTask) {
-            this.doTask();
-          }
+              // 由于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;
-        },
+              return promise;
+            }
+          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn),
       });
     });
   }

package/src/services/codeBlock.ts

@@ -38,7 +38,13 @@ class CodeBlock extends BaseService {
   });
 
   constructor() {
-    super(['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds']);
+    super([
+      { name: 'setCodeDslById', isAsync: true },
+      { name: 'setEditStatus', isAsync: true },
+      { name: 'setCombineIds', isAsync: true },
+      { name: 'setUndeleteableList', isAsync: true },
+      { name: 'deleteCodeDslByIds', isAsync: true },
+    ]);
   }
 
   /**

package/src/services/dep.ts

@@ -35,8 +35,8 @@ class Dep extends BaseService {
     return this.watcher.getTargets(type);
   }
 
-  public getTarget(id: Id) {
-    return this.watcher.getTarget(id);
+  public getTarget(id: Id, type: string = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
   }
 
   public addTarget(target: Target) {
@@ -44,8 +44,8 @@ class Dep extends BaseService {
     this.emit('add-target', target);
   }
 
-  public removeTarget(id: Id) {
-    this.watcher.removeTarget(id);
+  public removeTarget(id: Id, type: string = DepTargetType.DEFAULT) {
+    this.watcher.removeTarget(id, type);
     this.emit('remove-target');
   }
 
@@ -53,8 +53,8 @@ class Dep extends BaseService {
     this.watcher.clearTargets();
   }
 
-  public collect(nodes: MNode[], deep = false) {
-    this.watcher.collect(nodes, deep);
+  public collect(nodes: MNode[], deep = false, type?: DepTargetType) {
+    this.watcher.collect(nodes, deep, type);
     this.emit('collected', nodes, deep);
   }
 
@@ -62,8 +62,12 @@ class Dep extends BaseService {
     return this.watcher.clear(nodes);
   }
 
-  public hasTarget(id: Id) {
-    return this.watcher.hasTarget(id);
+  public hasTarget(id: Id, type: string = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
+  }
+
+  public hasSpecifiedTypeTarget(type: string = DepTargetType.DEFAULT): boolean {
+    return this.watcher.hasSpecifiedTypeTarget(type);
   }
 }
 

package/src/services/editor.ts

@@ -17,13 +17,15 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep, isObject, mergeWith, uniq } from 'lodash-es';
+import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 
+import { DepTargetType } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
+import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
 import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '@editor/type';
@@ -61,27 +63,27 @@ class Editor extends BaseService {
   constructor() {
     super(
       [
-        'getLayout',
-        'select',
-        'doAdd',
-        'add',
-        'doRemove',
-        'remove',
-        'doUpdate',
-        'update',
-        'sort',
-        'copy',
-        'paste',
-        'doPaste',
-        'doAlignCenter',
-        'alignCenter',
-        'moveLayer',
-        'moveToContainer',
-        'move',
-        'undo',
-        'redo',
-        'highlight',
-        'dragTo',
+        { name: 'getLayout', isAsync: true },
+        { name: 'select', isAsync: true },
+        { name: 'doAdd', isAsync: true },
+        { name: 'add', isAsync: true },
+        { name: 'doRemove', isAsync: true },
+        { name: 'remove', isAsync: true },
+        { name: 'doUpdate', isAsync: true },
+        { name: 'update', isAsync: true },
+        { name: 'sort', isAsync: true },
+        { name: 'copy', isAsync: true },
+        { name: 'paste', isAsync: true },
+        { name: 'doPaste', isAsync: true },
+        { name: 'doAlignCenter', isAsync: true },
+        { name: 'alignCenter', isAsync: true },
+        { name: 'moveLayer', isAsync: true },
+        { name: 'moveToContainer', isAsync: true },
+        { name: 'move', isAsync: true },
+        { name: 'undo', isAsync: true },
+        { name: 'redo', isAsync: true },
+        { name: 'highlight', isAsync: true },
+        { name: 'dragTo', isAsync: true },
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
@@ -593,12 +595,47 @@ class Editor extends BaseService {
   }
 
   /**
-   * 将组将节点配置转化成string，然后存储到localStorage中
+   * 将组件节点配置存储到localStorage中
    * @param config 组件节点配置
-   * @returns 组件节点配置
+   * @returns
    */
-  public async copy(config: MNode | MNode[]): Promise<void> {
-    await storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+  public copy(config: MNode | MNode[]): void {
+    storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+      protocol: Protocol.OBJECT,
+    });
+  }
+
+  /**
+   * 复制时会带上组件关联的依赖
+   * @param config 组件节点配置
+   * @returns
+   */
+  public copyWithRelated(config: MNode | MNode[]): void {
+    const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
+    // 关联的组件也一并复制
+    depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
+    const customTarget = depService.getTarget(
+      DepTargetType.RELATED_COMP_WHEN_COPY,
+      DepTargetType.RELATED_COMP_WHEN_COPY,
+    );
+    if (customTarget) {
+      Object.keys(customTarget.deps).forEach((nodeId: Id) => {
+        const node = this.getNodeById(nodeId);
+        if (!node) return;
+        customTarget!.deps[nodeId].keys.forEach((key) => {
+          const relateNodeId = get(node, key);
+          const isExist = copyNodes.find((node) => node.id === relateNodeId);
+          if (!isExist) {
+            const relateNode = this.getNodeById(relateNodeId);
+            if (relateNode) {
+              copyNodes.push(relateNode);
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
       protocol: Protocol.OBJECT,
     });
   }
@@ -609,8 +646,7 @@ class Editor extends BaseService {
    * @returns 添加后的组件节点配置
    */
   public async paste(position: PastePosition = {}): Promise<MNode | MNode[] | void> {
-    const config: MNode[] = await storageService.getItem(COPY_STORAGE_KEY);
-
+    const config: MNode[] = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config)) return;
 
     const node = this.get('node');
@@ -623,13 +659,13 @@ class Editor extends BaseService {
         parent = this.get('page');
       }
     }
-
     const pasteConfigs = await this.doPaste(config, position);
-
+    propsService.replaceRelateId(config, pasteConfigs);
     return this.add(pasteConfigs, parent);
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
+    propsService.clearRelateId();
     const pasteConfigs = await beforePaste(position, cloneDeep(config));
     return pasteConfigs;
   }