@tmagic/editor 1.4.8 → 1.4.9

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

@@ -0,0 +1,167 @@
+import type { Id, MContainer, MNode } from '@tmagic/schema';
+import { addClassName, removeClassName } from '@tmagic/utils';
+
+import { DragType, type Services } from '@editor/type';
+import { getNodeIndex } from '@editor/utils';
+
+export declare type NodeDropType = 'before' | 'after' | 'inner' | 'none';
+
+const dragState: {
+  dragOverNodeId: Id;
+  dropType: NodeDropType | '';
+  container: HTMLElement | null;
+} = {
+  dragOverNodeId: '',
+  dropType: '',
+  container: null,
+};
+
+const getNodeEl = (el: HTMLElement): HTMLElement | void => {
+  if (el.dataset.nodeId) {
+    return el;
+  }
+
+  if (el.parentElement) {
+    return getNodeEl(el.parentElement);
+  }
+};
+
+const removeStatusClass = (el: HTMLElement | null) => {
+  if (!el) return;
+
+  ['drag-before', 'drag-after', 'drag-inner'].forEach((className) => {
+    el.querySelectorAll(`.${className}`).forEach((el) => {
+      removeClassName(el, className);
+    });
+  });
+};
+
+/**
+ * dragstart/dragleave/dragend 属于源节点
+ * dragover 属于目标节点
+ * 这些方法并不是同一个dom事件触发的
+ */
+export const useDrag = (services: Services | undefined) => {
+  const handleDragStart = (event: DragEvent) => {
+    if (!event.dataTransfer || !event.target || !event.currentTarget) return;
+
+    const targetEl = getNodeEl(event.target as HTMLElement);
+
+    if (!targetEl || targetEl !== event.currentTarget) return;
+
+    event.dataTransfer.effectAllowed = 'move';
+
+    try {
+      event.dataTransfer.setData(
+        'text/json',
+        JSON.stringify({
+          dragType: DragType.LAYER_TREE,
+        }),
+      );
+    } catch {}
+  };
+
+  const handleDragOver = (event: DragEvent) => {
+    if (!event.target) return;
+
+    const targetEl = getNodeEl(event.target as HTMLElement);
+    if (!targetEl?.draggable) return;
+
+    const labelEl = targetEl.children[0];
+    if (!labelEl) return;
+
+    const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
+
+    const distance = event.clientY - targetTop;
+    const isContainer = targetEl.dataset.isContainer === 'true';
+
+    if (distance < targetHeight / 3) {
+      dragState.dropType = 'before';
+      addClassName(labelEl, globalThis.document, 'drag-before');
+      removeClassName(labelEl, 'drag-after', 'drag-inner');
+    } else if (distance > (targetHeight * 2) / 3) {
+      dragState.dropType = 'after';
+      addClassName(labelEl, globalThis.document, 'drag-after');
+      removeClassName(labelEl, 'drag-before', 'drag-inner');
+    } else if (isContainer) {
+      dragState.dropType = 'inner';
+      addClassName(labelEl, globalThis.document, 'drag-inner');
+      removeClassName(labelEl, 'drag-before', 'drag-after');
+    }
+
+    if (!dragState.dropType) {
+      return;
+    }
+
+    dragState.dragOverNodeId = targetEl.dataset.nodeId || '';
+    dragState.container = event.currentTarget as HTMLElement;
+
+    event.preventDefault();
+  };
+
+  const handleDragLeave = (event: DragEvent) => {
+    if (!event.target || !event.currentTarget) return;
+
+    const targetEl = getNodeEl(event.target as HTMLElement);
+
+    if (!targetEl || targetEl !== event.currentTarget) return;
+
+    const labelEl = targetEl.children[0];
+
+    removeClassName(labelEl, 'drag-before', 'drag-after', 'drag-inner');
+  };
+
+  const handleDragEnd = (event: DragEvent, node: MNode) => {
+    if (!event.target || !event.currentTarget) return;
+
+    const targetEl = getNodeEl(event.target as HTMLElement);
+
+    if (!targetEl || targetEl !== event.currentTarget) return;
+
+    removeStatusClass(dragState.container);
+
+    if (node && dragState.dragOverNodeId && dragState.dropType && services) {
+      if (dragState.dragOverNodeId === node.id) {
+        return;
+      }
+
+      const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
+      const targetNode = targetInfo.node;
+      let targetParent = targetInfo.parent;
+
+      if (!targetParent || !targetNode) return;
+
+      let targetIndex = -1;
+
+      if (Array.isArray(targetNode.items) && dragState.dropType === 'inner') {
+        targetIndex = targetNode.items.length;
+        targetParent = targetNode as MContainer;
+      } else {
+        targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
+      }
+
+      if (dragState.dropType === 'after') {
+        targetIndex += 1;
+      }
+
+      const selectedNodes = services.editorService.get('nodes');
+
+      if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
+        services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
+      } else {
+        services.editorService.dragTo([node], targetParent, targetIndex);
+      }
+    }
+
+    dragState.dragOverNodeId = '';
+    dragState.dropType = '';
+    dragState.container = null;
+  };
+
+  return {
+    handleDragStart,
+    handleDragEnd,
+    handleDragLeave,
+    handleDragOver,
+  };
+};

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

@@ -0,0 +1,54 @@
+import { type Ref, ref, watchEffect } from 'vue';
+
+import Tree from '@editor/components/Tree.vue';
+import type { Services } from '@editor/type';
+import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
+
+export const useKeybinding = (
+  services: Services | undefined,
+  container: Ref<InstanceType<typeof Tree> | undefined>,
+) => {
+  const keybindingService = services?.keybindingService;
+
+  // 是否多选
+  const isCtrlKeyDown = ref(false);
+
+  const windowBlurHandler = () => {
+    isCtrlKeyDown.value = false;
+  };
+
+  keybindingService?.registerCommand('layer-panel-global-keyup', () => {
+    isCtrlKeyDown.value = false;
+  });
+
+  keybindingService?.registerCommand('layer-panel-global-keydown', () => {
+    isCtrlKeyDown.value = true;
+  });
+
+  keybindingService?.register([
+    {
+      command: 'layer-panel-global-keydown',
+      keybinding: 'ctrl',
+      when: [['global', 'keydown']],
+    },
+    {
+      command: 'layer-panel-global-keyup',
+      keybinding: 'ctrl',
+      when: [['global', 'keyup']],
+    },
+  ]);
+
+  watchEffect(() => {
+    if (container.value) {
+      globalThis.addEventListener('blur', windowBlurHandler);
+      keybindingService?.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
+    } else {
+      globalThis.removeEventListener('blur', windowBlurHandler);
+      keybindingService?.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
+    }
+  });
+
+  return {
+    isCtrlKeyDown,
+  };
+};

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

@@ -0,0 +1,114 @@
+import { computed, ref, watch } from 'vue';
+
+import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
+
+import { LayerNodeStatus, Services } from '@editor/type';
+import { traverseNode } from '@editor/utils';
+import { updateStatus } from '@editor/utils/tree';
+
+const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
+  const map = new Map<Id, LayerNodeStatus>();
+
+  map.set(page.id, {
+    visible: true,
+    expand: true,
+    selected: true,
+    draggable: false,
+  });
+
+  page.items.forEach((node: MNode) =>
+    traverseNode<MNode>(node, (node) => {
+      map.set(
+        node.id,
+        initialLayerNodeStatus?.get(node.id) || {
+          visible: true,
+          expand: false,
+          selected: false,
+          draggable: true,
+        },
+      );
+    }),
+  );
+
+  return map;
+};
+
+export const useNodeStatus = (services: Services | undefined) => {
+  const page = computed(() => services?.editorService.get('page'));
+  const nodes = computed(() => services?.editorService.get('nodes') || []);
+
+  /** 所有页面的节点状态 */
+  const nodeStatusMaps = ref(new Map<Id, Map<Id, LayerNodeStatus>>());
+
+  /** 当前页面的节点状态 */
+  const nodeStatusMap = computed(() =>
+    page.value ? nodeStatusMaps.value.get(page.value.id) : new Map<Id, LayerNodeStatus>(),
+  );
+
+  // 切换页面或者新增页面，重新生成节点状态
+  watch(
+    () => page.value?.id,
+    (pageId) => {
+      if (!pageId) {
+        return;
+      }
+
+      // 生成节点状态
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value!, nodeStatusMaps.value.get(pageId)));
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  // 选中状态变化，更新节点状态
+  watch(
+    nodes,
+    (nodes) => {
+      if (!nodeStatusMap.value) return;
+
+      for (const [id, status] of nodeStatusMap.value.entries()) {
+        status.selected = nodes.some((node) => node.id === id);
+        if (status.selected) {
+          getNodePath(id, page.value?.items).forEach((node) => {
+            updateStatus(nodeStatusMap.value!, node.id, {
+              expand: true,
+            });
+          });
+        }
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  services?.editorService.on('add', (newNodes: MNode[]) => {
+    newNodes.forEach((node) => {
+      if (isPage(node) || isPageFragment(node)) return;
+
+      traverseNode(node, (node: MNode) => {
+        nodeStatusMap.value?.set(node.id, {
+          visible: true,
+          expand: Array.isArray(node.items),
+          selected: true,
+          draggable: true,
+        });
+      });
+    });
+  });
+
+  services?.editorService.on('remove', (nodes: MNode[]) => {
+    nodes.forEach((node) => {
+      traverseNode(node, (node: MNode) => {
+        nodeStatusMap.value?.delete(node.id);
+      });
+    });
+  });
+
+  return {
+    nodeStatusMaps,
+    nodeStatusMap,
+  };
+};

package/src/layouts/workspace/Breadcrumb.vue

@@ -0,0 +1,35 @@
+<template>
+  <div v-if="nodes.length === 1" class="m-editor-breadcrumb">
+    <template v-for="(item, index) in path" :key="item.id">
+      <TMagicButton link :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
+      ><span v-if="index < path.length - 1">/</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { MNode } from '@tmagic/schema';
+import { getNodePath } from '@tmagic/utils';
+
+import type { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorBreadcrumb',
+});
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes') || []);
+const root = computed(() => editorService?.get('root'));
+const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
+
+const select = async (node: MNode) => {
+  await editorService?.select(node);
+  editorService?.get('stage')?.select(node.id);
+};
+</script>

package/src/layouts/workspace/Workspace.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="m-editor-workspace">
+    <Breadcrumb></Breadcrumb>
+
+    <slot name="stage">
+      <MagicStage
+        v-if="page"
+        :disabled-stage-overlay="disabledStageOverlay"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></MagicStage>
+    </slot>
+
+    <slot name="workspace-content"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@editor/type';
+
+import MagicStage from './viewer/Stage.vue';
+import Breadcrumb from './Breadcrumb.vue';
+
+defineSlots<WorkspaceSlots>();
+
+defineOptions({
+  name: 'MEditorWorkspace',
+});
+
+withDefaults(
+  defineProps<{
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean;
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    disabledStageOverlay: false,
+  },
+);
+
+const services = inject<Services>('services');
+
+const page = computed(() => services?.editorService.get('page'));
+</script>

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

@@ -0,0 +1,115 @@
+<template>
+  <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 #body>
+      <Tree
+        class="m-editor-node-list-menu magic-editor-layer-tree"
+        :data="nodeData"
+        :node-status-map="nodeStatusMap"
+        @node-click="clickHandler"
+      ></Tree>
+    </template>
+  </FloatingBox>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, nextTick, ref, watch } from 'vue';
+
+import { TMagicTooltip } from '@tmagic/design';
+import type { MNode } from '@tmagic/schema';
+
+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 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 nodes = computed(() => editorService?.get('nodes') || []);
+const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
+
+const { nodeStatusMap } = useNodeStatus(services);
+
+const filterNodeMethod = (value: string, data: MNode): boolean => data.id === value;
+
+const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
+
+const unWatch = watch(
+  stage,
+  (stage) => {
+    if (!stage) return;
+
+    nextTick(() => unWatch());
+
+    stage.on('select', (el: HTMLElement, event: MouseEvent) => {
+      const els = stage.renderer.getElementsFromPoint(event) || [];
+      const ids = els.map((el) => el.id).filter((id) => Boolean(id));
+
+      buttonVisible.value = ids.length > 3;
+
+      filterTextChangeHandler(ids);
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  nodes,
+  (nodes) => {
+    if (!nodeStatusMap.value) return;
+
+    for (const [id, status] of nodeStatusMap.value.entries()) {
+      status.selected = nodes.some((node) => node.id === id);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const clickHandler = async (event: MouseEvent, data: TreeNodeData) => {
+  await editorService?.select(data.id);
+  stage.value?.select(data.id);
+};
+
+const menuPosition = ref({
+  left: 0,
+  top: 0,
+});
+
+watch(visible, async (visible) => {
+  if (!button.value || !visible) {
+    return;
+  }
+
+  await nextTick();
+
+  const rect = button.value.getBoundingClientRect();
+  const height = box.value?.target?.clientHeight || 0;
+
+  menuPosition.value = {
+    left: rect.left + rect.width + 5,
+    top: rect.top - height / 2 + rect.height / 2,
+  };
+});
+</script>