@tmagic/editor 1.4.6 → 1.4.8

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

@@ -1,161 +0,0 @@
-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;
-      }
-
-      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

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

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

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

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

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