@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.3

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

@@ -1,6 +1,8 @@
 <template>
-  <content-menu
+  <ContentMenu
     ref="menu"
+    class="magic-editor-node-list-menu"
+    style="max-width: 280px"
     :menu-data="menuData"
     :active="node?.id"
     :auto-hide="!pinned"
@@ -9,7 +11,7 @@
     <template #title>
       <NodeListMenuTitle v-model:pinned="pinned" @change="dragMenuHandler" @close="closeHandler"></NodeListMenuTitle>
     </template>
-  </content-menu>
+  </ContentMenu>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +55,14 @@ const cancel = () => {
   menu.value?.hide();
 };
 
+const clearTimeoutLazy = () => {
+  globalThis.setTimeout(() => {
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+    }
+  }, 300);
+};
+
 const unWatch = watch(
   stage,
   (stage) => {
@@ -70,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),
@@ -90,7 +100,8 @@ const unWatch = watch(
     });
 
     stage.on('mouseleave', () => {
-      cancel();
+      // mouseleave后，大概率还有最后一个mousemove事件，这里延迟清除
+      clearTimeoutLazy();
     });
 
     unWatch();
@@ -135,11 +146,7 @@ const menuData = computed<MenuButton[]>(() =>
 
 const mouseenterHandler = () => {
   // menu的mouseenter后，大概率还有最后一个mousemove事件，这里延迟清除
-  globalThis.setTimeout(() => {
-    if (timeout) {
-      globalThis.clearTimeout(timeout);
-    }
-  }, 300);
+  clearTimeoutLazy();
 };
 
 const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {

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/layouts/workspace/viewer/ViewerMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <content-menu :menu-data="menuData" ref="menu"></content-menu>
+  <ContentMenu :menu-data="menuData" ref="menu"></ContentMenu>
 </template>
 
 <script lang="ts" setup>

package/src/services/dataSource.ts

@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
@@ -16,6 +17,8 @@ interface State {
   editable: boolean;
   configs: Record<string, FormConfig>;
   values: Record<string, Partial<DataSourceSchema>>;
+  events: Record<string, EventOption[]>;
+  methods: Record<string, EventOption[]>;
 }
 
 type StateKey = keyof State;
@@ -26,6 +29,8 @@ class DataSource extends BaseService {
     editable: true,
     configs: {},
     values: {},
+    events: {},
+    methods: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -52,6 +57,22 @@ class DataSource extends BaseService {
     this.get('values')[type] = value;
   }
 
+  public getFormEvent(type = 'base') {
+    return this.get('events')[type] || [];
+  }
+
+  public setFormEvent(type: string, value: EventOption[] = []) {
+    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,