@tmagic/editor 1.3.5 → 1.3.7

package/src/layouts/sidebar/layer/LayerMenu.vue

@@ -6,7 +6,7 @@
 import { computed, inject, markRaw, ref } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
@@ -17,9 +17,16 @@ defineOptions({
   name: 'MEditorLayerMenu',
 });
 
-const props = defineProps<{
-  layerContentMenu: (MenuButton | MenuComponent)[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    layerContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
+);
 
 const emit = defineEmits<{
   'collapse-all': [];
@@ -82,29 +89,34 @@ const getSubMenuData = computed<MenuButton[]>(() => {
   return [];
 });
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
-  {
-    type: 'button',
-    text: '全部折叠',
-    icon: FolderMinusIcon,
-    display: () => isPage(node.value),
-    handler: () => {
-      emit('collapse-all');
-    },
-  },
-  {
-    type: 'button',
-    text: '新增',
-    icon: markRaw(Plus),
-    display: () => node.value?.items && nodes.value?.length === 1,
-    items: getSubMenuData.value,
-  },
-  useCopyMenu(),
-  usePasteMenu(),
-  useDeleteMenu(),
-  useMoveToMenu(services),
-  ...props.layerContentMenu,
-]);
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
+      {
+        type: 'button',
+        text: '全部折叠',
+        icon: FolderMinusIcon,
+        display: () => isPage(node.value) || isPageFragment(node.value),
+        handler: () => {
+          emit('collapse-all');
+        },
+      },
+      {
+        type: 'button',
+        text: '新增',
+        icon: markRaw(Plus),
+        display: () => node.value?.items && nodes.value?.length === 1,
+        items: getSubMenuData.value,
+      },
+      useCopyMenu(),
+      usePasteMenu(),
+      useDeleteMenu(),
+      useMoveToMenu(services),
+      ...props.layerContentMenu,
+    ],
+    'layer',
+  ),
+);
 
 const show = (e: MouseEvent) => {
   menu.value?.show(e);

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -8,7 +8,7 @@
       v-if="page && nodeStatusMap"
       tabindex="-1"
       ref="tree"
-      :data="[page]"
+      :data="nodeData"
       :node-status-map="nodeStatusMap"
       @node-dragover="handleDragOver"
       @node-dragstart="handleDragStart"
@@ -18,19 +18,28 @@
       @node-mouseenter="mouseenterHandler"
       @node-click="nodeClickHandler"
     >
+      <template #tree-node-content="{ data: nodeData }">
+        <slot name="layer-node-content" :data="nodeData"> </slot>
+      </template>
+
       <template #tree-node-tool="{ data: nodeData }">
         <slot name="layer-node-tool" :data="nodeData">
           <LayerNodeTool :data="nodeData"></LayerNodeTool>
         </slot>
       </template>
 
-      <template #tree-node-content="{ data: nodeData }">
-        <slot name="layer-node-content" :data="nodeData"> </slot>
+      <template #tree-node-label="{ data: nodeData }">
+        <slot name="layer-node-label" :data="nodeData"></slot>
       </template>
     </Tree>
 
     <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
+      <LayerMenu
+        ref="menu"
+        :layer-content-menu="layerContentMenu"
+        :custom-content-menu="customContentMenu"
+        @collapse-all="collapseAllHandler"
+      ></LayerMenu>
     </Teleport>
   </TMagicScrollbar>
 </template>
@@ -39,16 +48,17 @@
 import { computed, inject, ref } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
+import type { MNode } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
-import { LayerPanelSlots, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useFilter } from '@editor/hooks/use-filter';
+import { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
 import { useClick } from './use-click';
 import { useDrag } from './use-drag';
-import { useFilter } from './use-filter';
 import { useKeybinding } from './use-keybinding';
 import { useNodeStatus } from './use-node-status';
 
@@ -60,6 +70,7 @@ defineOptions({
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');
@@ -68,11 +79,23 @@ const editorService = services?.editorService;
 const tree = ref<InstanceType<typeof Tree>>();
 
 const page = computed(() => editorService?.get('page'));
+const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
-const { nodeStatusMap } = useNodeStatus(services, page);
+const { nodeStatusMap } = useNodeStatus(services);
 const { isCtrlKeyDown } = useKeybinding(services, tree);
 
-const { filterTextChangeHandler } = useFilter(nodeStatusMap, page);
+const filterNodeMethod = (v: string, data: MNode): boolean => {
+  let name = '';
+  if (data.name) {
+    name = data.name;
+  } else if (data.items) {
+    name = 'container';
+  }
+
+  return `${data.id}${name}${data.type}`.includes(v);
+};
+
+const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
 
 const collapseAllHandler = () => {
   if (!page.value || !nodeStatusMap.value) return;

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/schema';
@@ -13,13 +13,15 @@ export const useClick = (
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
 ) => {
+  const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
+
   // 触发画布选中
   const select = async (data: MNode) => {
     if (!data.id) {
       throw new Error('没有id');
     }
 
-    if (isCtrlKeyDown.value) {
+    if (isMultiSelect.value) {
       multiSelect(data);
     } else {
       await services?.editorService.select(data);
@@ -70,7 +72,7 @@ export const useClick = (
       return;
     }
 
-    if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
+    if (data.items && data.items.length > 0 && !isMultiSelect.value) {
       updateStatus(nodeStatusMap.value, data.id, {
         expand: true,
       });

package/src/layouts/sidebar/layer/use-keybinding.ts

@@ -6,7 +6,7 @@ import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 export const useKeybinding = (
   services: Services | undefined,
-  contianer: Ref<InstanceType<typeof Tree> | undefined>,
+  container: Ref<InstanceType<typeof Tree> | undefined>,
 ) => {
   const keybindingService = services?.keybindingService;
 
@@ -17,17 +17,17 @@ export const useKeybinding = (
     isCtrlKeyDown.value = false;
   };
 
-  keybindingService?.registeCommand('layer-panel-global-keyup', () => {
+  keybindingService?.registerCommand('layer-panel-global-keyup', () => {
     isCtrlKeyDown.value = false;
   });
 
-  keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
+  keybindingService?.registerCommand('layer-panel-global-keydown', () => {
     isCtrlKeyDown.value = true;
   });
 
-  keybindingService?.registe([
+  keybindingService?.register([
     {
-      command: 'layer-panel-global-keydwon',
+      command: 'layer-panel-global-keydown',
       keybinding: 'ctrl',
       when: [['global', 'keydown']],
     },
@@ -39,12 +39,12 @@ export const useKeybinding = (
   ]);
 
   watchEffect(() => {
-    if (contianer.value) {
+    if (container.value) {
       globalThis.addEventListener('blur', windowBlurHandler);
-      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value.$el);
+      keybindingService?.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
     } else {
       globalThis.removeEventListener('blur', windowBlurHandler);
-      keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
+      keybindingService?.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
     }
   });
 

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,31 +1,27 @@
-import { computed, type ComputedRef, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
-import type { Id, MNode, MPage } from '@tmagic/schema';
+import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
-const createPageNodeStatus = (
-  services: Services | undefined,
-  pageId: Id,
-  initalLayerNodeStatus?: Map<Id, LayerNodeStatus>,
-) => {
+const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();
 
-  map.set(pageId, {
+  map.set(page.id, {
     visible: true,
     expand: true,
     selected: true,
     draggable: false,
   });
 
-  services?.editorService.getNodeById(pageId)?.items.forEach((node: MNode) =>
-    traverseNode(node, (node) => {
+  page.items.forEach((node: MNode) =>
+    traverseNode<MNode>(node, (node) => {
       map.set(
         node.id,
-        initalLayerNodeStatus?.get(node.id) || {
+        initialLayerNodeStatus?.get(node.id) || {
           visible: true,
           expand: false,
           selected: false,
@@ -38,7 +34,8 @@ const createPageNodeStatus = (
   return map;
 };
 
-export const useNodeStatus = (services: Services | undefined, page: ComputedRef<MPage | null | undefined>) => {
+export const useNodeStatus = (services: Services | undefined) => {
+  const page = computed(() => services?.editorService.get('page'));
   const nodes = computed(() => services?.editorService.get('nodes') || []);
 
   /** 所有页面的节点状态 */
@@ -57,7 +54,7 @@ export const useNodeStatus = (services: Services | undefined, page: ComputedRef<
         return;
       }
       // 生成节点状态
-      nodeStatusMaps.value.set(page.id, createPageNodeStatus(services, page.id, nodeStatusMaps.value.get(page.id)));
+      nodeStatusMaps.value.set(page.id, createPageNodeStatus(page, nodeStatusMaps.value.get(page.id)));
     },
     {
       immediate: true,

package/src/layouts/workspace/Workspace.vue

@@ -3,15 +3,14 @@
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
-      <MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
+      <MagicStage
+        v-if="page"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
-
-    <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>
-    </PageBar>
   </div>
 </template>
 
@@ -22,7 +21,6 @@ import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@edito
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
-import PageBar from './PageBar.vue';
 
 defineSlots<WorkspaceSlots>();
 
@@ -32,6 +30,7 @@ defineOptions({
 
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');

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

@@ -1,175 +1,114 @@
 <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) || [];
+    nextTick(() => unWatch());
 
-        const nodes = getNodes(
-          els.map((el) => el.id),
-          page.value?.items,
-        );
+    stage.on('select', (el: HTMLElement, event: MouseEvent) => {
+      const els = stage.renderer.getElementsFromPoint(event) || [];
+      const ids = els.map((el) => el.id).filter((id) => Boolean(id));
 
-        if (pinned.value && nodes.length === 0) {
-          return;
-        }
+      buttonVisible.value = ids.length > 3;
 
-        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();
   },
   {
     immediate: true,
   },
 );
 
-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,15 +22,21 @@
       @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>
+      <ViewerMenu
+        ref="menu"
+        :is-multi-select="isMultiSelect"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></ViewerMenu>
     </Teleport>
   </ScrollViewer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
+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';
@@ -51,6 +57,7 @@ defineOptions({
 
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 let stage: StageCore | null = null;
@@ -107,6 +114,7 @@ watch(zoom, (zoom) => {
 
 watch(page, (page) => {
   if (runtime && page) {
+    services?.editorService.set('stageLoading', true);
     runtime.updatePageId?.(page.id);
     nextTick(() => {
       stage?.select(page.id);
@@ -134,15 +142,15 @@ const resizeObserver = new ResizeObserver((entries) => {
 onMounted(() => {
   if (stageWrap.value?.container) {
     resizeObserver.observe(stageWrap.value.container);
-    services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   stage?.destroy();
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
-  services?.keybindingService.unregisteEl('stage');
+  services?.keybindingService.unregisterEl('stage');
   services?.editorService.off('root-change', rootChangeHandler);
 });