@tmagic/editor 1.3.0-beta.2 → 1.3.0-beta.4

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

@@ -0,0 +1,85 @@
+<template>
+  <TMagicScrollbar class="magic-editor-layer-panel">
+    <slot name="layer-panel-header"></slot>
+
+    <SearchInput @search="filterTextChangeHandler"></SearchInput>
+
+    <div class="magic-editor-layer-tree" tabindex="-1" @dragover="handleDragOver">
+      <LayerNode
+        v-if="page && root"
+        :data="page"
+        :filter-text="filterText"
+        :is-ctrl-key-down="isCtrlKeyDown"
+        @node-contextmenu="contextmenu"
+      >
+        <template #layer-node-content="{ data: nodeData }">
+          <slot name="layer-node-content" :data="nodeData"> </slot>
+        </template>
+      </LayerNode>
+    </div>
+
+    <Teleport to="body">
+      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
+    </Teleport>
+  </TMagicScrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, provide, ref } from 'vue';
+
+import { TMagicScrollbar } from '@tmagic/design';
+
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { LayerPanelSlots, MenuButton, MenuComponent, Services } from '@editor/type';
+
+import LayerMenu from './LayerMenu.vue';
+import LayerNode from './LayerNode.vue';
+import { useDrag } from './use-drag';
+import { useFilter } from './use-filter';
+import { useKeybinding } from './use-keybinding';
+import { useNodeStatus } from './use-node-status';
+
+defineSlots<LayerPanelSlots>();
+
+defineOptions({
+  name: 'MEditorLayerPanel',
+});
+
+defineProps<{
+  layerContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const page = computed(() => editorService?.get('page'));
+const root = computed(() => editorService?.get('root'));
+
+const { nodeStatusMap } = useNodeStatus(services, page);
+const { isCtrlKeyDown } = useKeybinding(services);
+
+provide('nodeStatusMap', nodeStatusMap);
+
+const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
+
+const collapseAllHandler = () => {
+  if (!page.value || !nodeStatusMap.value) return;
+  const items = nodeStatusMap.value.entries();
+  for (const [id, status] of items) {
+    if (id === page.value.id) {
+      continue;
+    }
+    status.expand = false;
+  }
+};
+
+// 右键菜单
+const menu = ref<InstanceType<typeof LayerMenu>>();
+const contextmenu = (event: MouseEvent): void => {
+  event.preventDefault();
+
+  menu.value?.show(event);
+};
+
+const { handleDragOver } = useDrag(services);
+</script>

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

@@ -0,0 +1,157 @@
+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) 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) {
+      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-filter.ts

@@ -0,0 +1,70 @@
+import { type ComputedRef, ref } from 'vue';
+
+import { Id, MNode, MPage } from '@tmagic/schema';
+import { getKeys } from '@tmagic/utils';
+
+import { LayerNodeStatus } from '@editor/type';
+import { traverseNode } from '@editor/utils';
+
+export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => {
+  const nodeStatus = nodeStatusMap.get(id);
+
+  if (!nodeStatus) return;
+  getKeys(status).forEach((key) => {
+    if (nodeStatus[key] !== undefined && status[key] !== undefined) {
+      nodeStatus[key] = Boolean(status[key]);
+    }
+  });
+};
+
+export const useFilter = (
+  nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
+  page: ComputedRef<MPage | null | undefined>,
+) => {
+  // tree方法：对树节点进行筛选时执行的方法
+  const filterIsMatch = (value: string, data: MNode): boolean => {
+    if (!value) {
+      return true;
+    }
+    let name = '';
+    if (data.name) {
+      name = data.name;
+    } else if (data.items) {
+      name = 'container';
+    }
+    return `${data.id}${name}${data.type}`.includes(value);
+  };
+
+  const filterNode = (text: string) => (node: MNode, parents: MNode[]) => {
+    if (!nodeStatusMap.value) return;
+
+    const visible = filterIsMatch(text, node);
+    if (visible && parents.length) {
+      parents.forEach((parent) => {
+        updateStatus(nodeStatusMap.value!, parent.id, {
+          visible,
+          expand: true,
+        });
+      });
+    }
+
+    updateStatus(nodeStatusMap.value, node.id, {
+      visible,
+    });
+  };
+
+  const filter = (text: string) => {
+    if (!page.value?.items?.length) return;
+
+    page.value.items.forEach((node) => {
+      traverseNode(node, filterNode(text));
+    });
+  };
+
+  return {
+    filterText: ref(''),
+    filterTextChangeHandler(text: string) {
+      filter(text);
+    },
+  };
+};

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

@@ -0,0 +1,47 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+import type { Services } from '@editor/type';
+
+export const useKeybinding = (services: Services | undefined) => {
+  const keybindingService = services?.keybindingService;
+
+  // 是否多选
+  const isCtrlKeyDown = ref(false);
+
+  const windowBlurHandler = () => {
+    isCtrlKeyDown.value = false;
+  };
+
+  keybindingService?.registeCommand('layer-panel-global-keyup', () => {
+    isCtrlKeyDown.value = false;
+  });
+
+  keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
+    isCtrlKeyDown.value = true;
+  });
+
+  keybindingService?.registe([
+    {
+      command: 'layer-panel-global-keydwon',
+      keybinding: 'ctrl',
+      when: [['global', 'keydown']],
+    },
+    {
+      command: 'layer-panel-global-keyup',
+      keybinding: 'ctrl',
+      when: [['global', 'keyup']],
+    },
+  ]);
+
+  onMounted(() => {
+    globalThis.addEventListener('blur', windowBlurHandler);
+  });
+
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener('blur', windowBlurHandler);
+  });
+
+  return {
+    isCtrlKeyDown,
+  };
+};

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

@@ -0,0 +1,103 @@
+import { computed, type ComputedRef, ref, watch } from 'vue';
+
+import type { Id, MNode, MPage } from '@tmagic/schema';
+import { getNodePath } from '@tmagic/utils';
+
+import { LayerNodeStatus, Services } from '@editor/type';
+import { traverseNode } from '@editor/utils';
+
+import { updateStatus } from './use-filter';
+
+const createPageNodeStatus = (services: Services | undefined, pageId: Id) => {
+  const map = new Map<Id, LayerNodeStatus>();
+
+  map.set(pageId, {
+    visible: true,
+    expand: true,
+    selected: true,
+  });
+
+  services?.editorService.getNodeById(pageId)?.items.forEach((node: MNode) =>
+    traverseNode(node, (node) => {
+      map.set(node.id, {
+        visible: true,
+        expand: false,
+        selected: false,
+      });
+    }),
+  );
+
+  return map;
+};
+
+export const useNodeStatus = (services: Services | undefined, page: ComputedRef<MPage | null | undefined>) => {
+  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 || nodeStatusMaps.value.has(pageId)) {
+        return;
+      }
+
+      // 新增页面，生成节点状态
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(services, 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) => {
+      nodeStatusMap.value?.set(node.id, {
+        visible: true,
+        expand: Array.isArray(node.items),
+        selected: true,
+      });
+    });
+  });
+
+  services?.editorService.on('remove', (nodes: MNode[]) => {
+    nodes.forEach((node) => {
+      nodeStatusMap.value?.delete(node.id);
+    });
+  });
+
+  return {
+    nodeStatusMaps,
+    nodeStatusMap,
+  };
+};

package/src/layouts/workspace/Workspace.vue

@@ -18,12 +18,14 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import { MenuButton, MenuComponent, Services } from '@editor/type';
+import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@editor/type';
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 
+defineSlots<WorkspaceSlots>();
+
 defineOptions({
   name: 'MEditorWorkspace',
 });

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

@@ -80,7 +80,7 @@ const unWatch = watch(
       }
 
       timeout = globalThis.setTimeout(() => {
-        const els = stage?.renderer.getElementsFromPoint(event);
+        const els = stage.renderer.getElementsFromPoint(event) || [];
 
         const nodes = getNodes(
           els.map((el) => el.id),

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

@@ -38,7 +38,7 @@ import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stag
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
-import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 import NodeListMenu from './NodeListMenu.vue';
@@ -142,18 +142,30 @@ onUnmounted(() => {
   services?.keybindingService.unregisteEl('stage');
 });
 
+const parseDSL = getConfig('parseDSL');
+
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
   menu.value?.show(e);
 };
 
 const dragoverHandler = (e: DragEvent) => {
-  e.preventDefault();
   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;
@@ -164,22 +176,12 @@ const dropHandler = async (e: DragEvent) => {
     parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
   }
 
-  if (e.dataTransfer && parent && stageContainer.value && stage) {
-    const parseDSL = getConfig('parseDSL');
-
-    const data = e.dataTransfer.getData('text/json');
-
-    if (!data) return;
-
-    const config = parseDSL(`(${data})`);
-
-    if (!config) return;
-
+  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;
+    const { style = {} } = config.data;
 
     let top = 0;
     let left = 0;
@@ -197,16 +199,16 @@ const dropHandler = async (e: DragEvent) => {
       }
     }
 
-    config.style = {
+    config.data.style = {
       ...style,
       position,
       top: top / zoom.value,
       left: left / zoom.value,
     };
 
-    config.inputEvent = e;
+    config.data.inputEvent = e;
 
-    services?.editorService.add(config, parent);
+    services?.editorService.add(config.data, parent);
   }
 };
 </script>

package/src/services/dataSource.ts

@@ -18,6 +18,7 @@ interface State {
   configs: Record<string, FormConfig>;
   values: Record<string, Partial<DataSourceSchema>>;
   events: Record<string, EventOption[]>;
+  methods: Record<string, EventOption[]>;
 }
 
 type StateKey = keyof State;
@@ -29,6 +30,7 @@ class DataSource extends BaseService {
     configs: {},
     values: {},
     events: {},
+    methods: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -63,6 +65,14 @@ class DataSource extends BaseService {
     this.get('events')[type] = value;
   }
 
+  public getFormMethod(type = 'base') {
+    return this.get('methods')[type] || [];
+  }
+
+  public setFormMethod(type: string, value: EventOption[] = []) {
+    this.get('methods')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

package/src/services/editor.ts

@@ -80,6 +80,7 @@ class Editor extends BaseService {
         'undo',
         'redo',
         'highlight',
+        'dragTo',
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
@@ -253,7 +254,7 @@ class Editor extends BaseService {
 
     if (!parent) return node;
 
-    const index = getNodeIndex(node, parent);
+    const index = getNodeIndex(node.id, parent);
 
     const nextNode = parent.items[index + 1] || parent.items[0];
 
@@ -270,7 +271,7 @@ class Editor extends BaseService {
     if (!page) throw new Error('page不能为空');
     if (!root) throw new Error('root不能为空');
 
-    const index = getNodeIndex(page, root);
+    const index = getNodeIndex(page.id, root);
 
     const nextPage = root.items[index + 1] || root.items[0];
 
@@ -418,7 +419,7 @@ class Editor extends BaseService {
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
-    const index = getNodeIndex(curNode, parent);
+    const index = getNodeIndex(curNode.id, parent);
 
     if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
 
@@ -503,7 +504,7 @@ class Editor extends BaseService {
     if (!parent) throw new Error('获取不到父级节点');
 
     const parentNodeItems = parent.items;
-    const index = getNodeIndex(newConfig, parent);
+    const index = getNodeIndex(newConfig.id, parent);
 
     if (!parentNodeItems || typeof index === 'undefined' || index === -1) throw new Error('更新的节点未找到');
 
@@ -737,7 +738,7 @@ class Editor extends BaseService {
 
     const stage = this.get('stage');
     if (root && node && parent && stage) {
-      const index = getNodeIndex(node, parent);
+      const index = getNodeIndex(node.id, parent);
       parent.items?.splice(index, 1);
 
       await stage.remove({ id: node.id, parentId: parent.id, root });
@@ -769,6 +770,45 @@ class Editor extends BaseService {
     }
   }
 
+  public async dragTo(config: MNode, targetParent: MContainer, targetIndex: number) {
+    if (!targetParent || !Array.isArray(targetParent.items)) return;
+
+    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
+    if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+    const index = getNodeIndex(curNode.id, parent);
+
+    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+
+    if (parent.id === targetParent.id) {
+      if (index === targetIndex) return;
+
+      if (index < targetIndex) {
+        targetIndex -= 1;
+      }
+    }
+
+    parent.items?.splice(index, 1);
+    targetParent.items?.splice(targetIndex, 0, config);
+
+    const page = this.get('page');
+    const root = this.get('root');
+    const stage = this.get('stage');
+
+    if (stage && page && root) {
+      stage.update({
+        config: cloneDeep(page),
+        parentId: root.id,
+        root: cloneDeep(root),
+      });
+    }
+
+    this.addModifiedNodeId(config.id);
+    this.addModifiedNodeId(parent.id);
+
+    this.pushHistoryState();
+  }
+
   /**
    * 撤销当前操作
    * @returns 上一次数据