@tmagic/editor 1.2.0-beta.9 → 1.2.0

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,9 +1,5 @@
 <template>
-  <TMagicScrollbar
-    class="magic-editor-layer-panel"
-    @mouseenter="addSelectModeListener"
-    @mouseleave="removeSelectModeListener"
-  >
+  <TMagicScrollbar class="magic-editor-layer-panel">
     <slot name="layer-panel-header"></slot>
 
     <TMagicInput
@@ -23,33 +19,28 @@
       node-key="id"
       empty-text="页面空荡荡的"
       draggable
-      :default-expanded-keys="defaultExpandedKeys"
-      :load="loadItems"
+      :default-expanded-keys="expandedKeys"
+      :default-checked-keys="checkedKeys"
+      :current-node-key="currentNodeKey"
       :data="values"
       :expand-on-click-node="false"
-      :highlight-current="true"
-      :props="{
-        children: 'items',
-      }"
+      :highlight-current="!isMultiSelect"
+      :check-on-click-node="true"
+      :props="treeProps"
       :filter-node-method="filterNode"
       :allow-drop="allowDrop"
-      :show-checkbox="isMultiSelectStatus || selectedIds.length > 1"
+      :show-checkbox="isMultiSelect"
       @node-click="clickHandler"
       @node-contextmenu="contextmenu"
       @node-drag-end="handleDragEnd"
       @node-collapse="handleCollapse"
       @node-expand="handleExpand"
-      @check="multiClickHandler"
+      @check="checkHandler"
       @mousedown="toggleClickFlag"
       @mouseup="toggleClickFlag"
     >
       <template #default="{ node, data }">
-        <div
-          :id="data.id"
-          class="cus-tree-node"
-          @mouseenter="highlightHandler(data)"
-          :class="{ 'cus-tree-node-hover': canHighlight(data) }"
-        >
+        <div class="cus-tree-node" :id="data.id" @mouseenter="highlightHandler(data)">
           <slot name="layer-node-content" :node="node" :data="data">
             <span>
               {{ `${data.name} (${data.id})` }}
@@ -59,52 +50,69 @@
       </template>
     </TMagicTree>
 
-    <teleport to="body">
-      <layer-menu ref="menu"></layer-menu>
-    </teleport>
+    <Teleport to="body">
+      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
+    </Teleport>
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup>
-import { computed, inject, nextTick, ref, watch } from 'vue';
+<script lang="ts" setup name="MEditorLayerPanel">
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
-import { throttle } from 'lodash-es';
+import { difference, throttle, union } from 'lodash-es';
 
 import { TMagicInput, TMagicScrollbar, TMagicTree } from '@tmagic/design';
 import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
+import { getNodePath, isPage } from '@tmagic/utils';
 
-import type { Services } from '../../type';
+import type { MenuButton, MenuComponent, Services } from '../../type';
 import { Layout } from '../../type';
 
 import LayerMenu from './LayerMenu.vue';
 
+defineProps<{
+  layerContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 const throttleTime = 150;
 const services = inject<Services>('services');
+const editorService = services?.editorService;
+
 const tree = ref<InstanceType<typeof TMagicTree>>();
 const menu = ref<InstanceType<typeof LayerMenu>>();
-const editorService = services?.editorService;
-const page = computed(() => editorService?.get('page'));
-const values = computed(() => (page.value ? [page.value] : []));
-// 多选选中的节点数组
-const selectedNodes = ref<MNode[]>([]);
+
 // 多选选中的组件id数组
-const selectedIds = computed(() => selectedNodes.value.map((node: MNode) => node.id));
+const checkedKeys = ref<Id[]>([]);
 // 是否多选
-const isMultiSelectStatus = ref(false);
-// 多选场景 取消选中的那个节点id
-const spliceNodeKey = ref<Id>();
+const isCtrlKeyDown = ref(false);
 const filterText = ref('');
 // 默认展开节点
-const defaultExpandedKeys = computed(() => (selectedIds.value.length > 0 ? selectedIds.value : []));
+const expandedKeys = ref<Id[]>([]);
+const currentNodeKey = ref<Id>();
+// 鼠标是否按下标志，用于高亮状态互斥
+const clicked = ref(false);
 
-editorService?.on('remove', () => {
-  setTimeout(() => {
-    tree.value?.getNode(editorService.get('node').id)?.updateChildren();
-  }, 0);
-});
+const treeProps = {
+  children: 'items',
+  disabled: (data: MNode) => Boolean(data.items?.length),
+  class: (data: MNode) => {
+    if (clicked.value || isPage(data)) return '';
+    if (data.id === highlightNode?.value?.id && !checkedKeys.value.includes(data.id)) {
+      return 'cus-tree-node-hover';
+    }
+  },
+};
+
+const isMultiSelect = computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
+
+const nodes = computed(() => editorService?.get<MNode[]>('nodes') || []);
+const page = computed(() => editorService?.get<MPage>('page'));
+const values = computed(() => (page.value ? [page.value] : []));
+// 高亮的节点
+const highlightNode = computed(() => editorService?.get('highlightNode'));
 
 // 触发画布单选
 const select = async (data: MNode) => {
@@ -131,8 +139,6 @@ const highlight = (data: MNode) => {
   editorService?.get<StageCore>('stage')?.highlight(data.id);
 };
 
-const expandedKeys = new Map<Id, Id>();
-
 // tree方法：拖拽时判定目标节点能否成为拖动目标位置
 const allowDrop = (draggingNode: any, dropNode: any, type: string): boolean => {
   const { data } = dropNode || {};
@@ -165,27 +171,22 @@ const handleDragEnd = async (e: any) => {
   editorService?.update(page);
 };
 
-// tree方法： 加载子树数据的方法
-const loadItems = (node: any, resolve: Function) => {
-  if (Array.isArray(node.data)) {
-    return resolve(node.data);
-  }
-  if (Array.isArray(node.data?.items)) {
-    return resolve(node.data?.items);
-  }
-  resolve([]);
-};
-
 // tree事件：节点被关闭时触发的事件
 const handleCollapse = (data: MNode) => {
-  expandedKeys.delete(data.id);
+  expandedKeys.value = expandedKeys.value.filter((id) => id !== data.id);
 };
 
 // tree事件：节点被展开时触发的事件
 const handleExpand = (data: MNode) => {
-  const parent = editorService?.getParentById(data.id);
-  if (!parent?.id) return;
-  expandedKeys.set(parent.id, parent.id);
+  if (!page.value) {
+    expandedKeys.value = [];
+    return;
+  }
+
+  expandedKeys.value = union(
+    expandedKeys.value,
+    getNodePath(data.id, [page.value]).map((node) => node.id),
+  );
 };
 
 // tree方法：对树节点进行筛选时执行的方法
@@ -207,89 +208,74 @@ const filterTextChangeHandler = (val: string) => {
   tree.value?.filter(val);
 };
 
-// 树节点更新后展开上次展开过的节点
-const expandNodes = async () => {
-  if (!tree.value) return;
-  await nextTick();
-  tree.value &&
-    Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]: [string, any]) => {
-      if (node.expanded && node.data.items) {
-        expandedKeys.set(id, id);
-      }
-    });
-  expandedKeys.forEach((key) => {
-    if (!tree.value) return;
-    tree.value.getNode(key)?.expand();
-  });
-};
+watch(nodes, (nodes) => {
+  const ids = nodes?.map((node) => node.id) || [];
 
-watch(
-  () => editorService?.get<MNode[]>('nodes'),
-  (nodes) => {
-    selectedNodes.value = nodes ?? [];
-  },
-);
+  const idsLength = ids.length;
+  const checkedKeysLength = checkedKeys.value.length;
 
-// 设置树节点选中状态
-const setTreeKeyStatus = () => {
-  if (!tree.value) return;
-  if (selectedIds.value.length === 0) {
-    tree.value.setCheckedKeys([]);
-    tree.value.setCurrentKey();
-  } else if (selectedIds.value.length === 1 && !isMultiSelectStatus.value) {
-    // 选中1个
-    tree.value.setCurrentKey(selectedIds.value[0], true);
-    tree.value.setCheckedKeys([]);
-  } else {
-    // 多选框选中多个
-    tree.value.setCheckedKeys(selectedIds.value);
-    tree.value.setCurrentKey();
+  if (
+    difference(
+      idsLength > checkedKeysLength ? ids : checkedKeys.value,
+      idsLength > checkedKeysLength ? checkedKeys.value : ids,
+    ).length
+  ) {
+    tree.value?.setCheckedKeys([], false);
+
+    [currentNodeKey.value] = ids;
+    checkedKeys.value = ids.filter((id) => id !== page.value?.id);
+    expandedKeys.value = union(expandedKeys.value, ids);
+  }
+});
+
+watch(isMultiSelect, (isMultiSelect) => {
+  if (!isMultiSelect) {
+    currentNodeKey.value = editorService?.get<MNode>('node').id;
+    tree.value?.setCurrentKey(currentNodeKey.value);
   }
+});
+
+const editorServiceRemoveHandler = () => {
+  setTimeout(() => {
+    tree.value?.getNode(editorService?.get('node').id)?.updateChildren();
+  }, 0);
 };
 
-watch([selectedIds, tree], async () => {
-  if (!tree.value || !editorService) return;
-  const parent = editorService.get('parent');
-  if (!parent?.id) return;
+const windowBlurHandler = () => {
+  isCtrlKeyDown.value = false;
+};
 
-  const treeNode = tree.value.getNode(parent.id);
-  treeNode?.updateChildren();
-  await expandNodes();
+let keycon: KeyController;
 
-  // 设置高亮节点操作一定要在刷新展开状态之后，否则可能导致设置的高亮无效
-  setTreeKeyStatus();
-});
+onMounted(() => {
+  editorService?.on('remove', editorServiceRemoveHandler);
 
-const keycon = ref<KeyController>();
-// 监听模式选择
-const addSelectModeListener = () => {
+  keycon = new KeyController();
   const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
   const ctrl = isMac ? 'meta' : 'ctrl';
-  keycon.value = new KeyController();
-  keycon.value.keydown(ctrl, (e) => {
-    e.inputEvent.preventDefault();
-    isMultiSelectStatus.value = true;
-  });
-  // ctrl+tab切到其他窗口，需要将多选状态置为false
-  keycon.value.on('blur', () => {
-    isMultiSelectStatus.value = false;
-  });
-  keycon.value.keyup(ctrl, (e) => {
-    e.inputEvent.preventDefault();
-    isMultiSelectStatus.value = false;
-  });
-};
-// 移除监听
-const removeSelectModeListener = () => {
-  keycon.value?.destroy();
-  // 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况)
-  if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
-};
 
-// 鼠标是否按下标志，用于高亮状态互斥
-const clicked = ref(false);
-// 高亮的节点
-const highlightNode = computed(() => editorService?.get('highlightNode'));
+  keycon
+    .keydown((e) => {
+      if (e.key !== ctrl) {
+        isCtrlKeyDown.value = false;
+      }
+    })
+    .keydown(ctrl, () => {
+      isCtrlKeyDown.value = true;
+    })
+    .keyup(ctrl, () => {
+      isCtrlKeyDown.value = false;
+    });
+
+  globalThis.addEventListener('blur', windowBlurHandler);
+});
+
+onUnmounted(() => {
+  keycon.destroy();
+
+  editorService?.off('remove', editorServiceRemoveHandler);
+  globalThis.removeEventListener('blur', windowBlurHandler);
+});
 
 // 鼠标在组件树移动触发高亮
 const highlightHandler = throttle((data: MNode) => {
@@ -300,58 +286,25 @@ const toggleClickFlag = () => {
   clicked.value = !clicked.value;
 };
 
-// 是否满足展示高亮
-const canHighlight = (data: MNode) => {
-  if (clicked.value) return false;
-  return (
-    data.id === highlightNode?.value?.id && !selectedIds.value.includes(data.id) && spliceNodeKey.value !== data.id
-  );
-};
-
-// 监听选择模式，针对多选情况做一些处理
-watch(isMultiSelectStatus, () => {
-  // 多选模式如果已存在第一个选中的元素是页面(magic-ui-page) 剔除页面选中状态
-  if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === NodeType.PAGE) {
-    selectedNodes.value = [];
-  }
-});
-
 // 选择节点多选框
-const multiClickHandler = (data: MNode): void => {
-  if (!data?.id) {
-    throw new Error('没有id');
-  }
-
-  // 页面(magic-ui-page)不可选中
-  if (data.type === NodeType.PAGE) {
-    tree.value?.setCheckedKeys([]);
-    return;
-  }
-
-  const index = selectedNodes.value.findIndex((node) => node.id === data.id);
-  if (index !== -1) {
-    // 已经包含就移除掉
-    selectedNodes.value.splice(index, 1);
-    spliceNodeKey.value = data.id;
+const checkHandler = (data: MNode, { checkedNodes }: any): void => {
+  if (checkedNodes.length > 0) {
+    multiSelect(checkedNodes.map((node: MNode) => node.id));
   } else {
-    selectedNodes.value = [...selectedNodes.value, data];
+    multiSelect(nodes.value.map((node: MNode) => node.id));
   }
-  tree.value?.setCheckedKeys(selectedIds.value);
-  multiSelect(selectedIds.value);
 };
 
 // 点击节点
 const clickHandler = (data: MNode): void => {
-  if (!isMultiSelectStatus.value) {
-    if (services?.uiService.get<boolean>('uiSelectMode')) {
-      document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
-      return;
-    }
-    tree.value?.setCurrentKey(data.id);
-    select(data);
-  } else {
-    multiClickHandler(data);
+  if (isCtrlKeyDown.value) {
+    return;
+  }
+  if (services?.uiService.get<boolean>('uiSelectMode')) {
+    document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
+    return;
   }
+  select(data);
 };
 
 // 右键菜单

package/src/layouts/sidebar/Sidebar.vue

@@ -6,58 +6,142 @@
     type="card"
     tab-position="left"
   >
-    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
-      <template #layer-panel-header v-if="item === 'layer'">
-        <slot name="layer-panel-header"></slot>
+    <component :is="uiComponent.component" v-for="(config, index) in sideBarItems" :key="index" :name="config.text">
+      <template #label>
+        <div :key="config.text">
+          <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+          <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+        </div>
       </template>
 
-      <template #layer-node-content="{ node, data }" v-if="item === 'layer'">
-        <slot name="layer-node-content" :data="data" :node="node"></slot>
-      </template>
+      <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+        <template
+          #component-list-panel-header
+          v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-panel-header"></slot>
+          <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
+        </template>
 
-      <template #component-list-panel-header v-if="item === 'component-list'">
-        <slot name="component-list-panel-header"></slot>
-      </template>
+        <template
+          #component-list-item="{ component }"
+          v-if="config.$key === 'component-list' || config.slots?.componentListItem"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-item" :component="component"></slot>
+          <component
+            v-else-if="config.slots?.componentListItem"
+            :is="config.slots.componentListItem"
+            :component="component"
+          />
+        </template>
 
-      <template #component-list-item="{ component }" v-if="item === 'component-list'">
-        <slot name="component-list-item" :component="component"></slot>
-      </template>
+        <template #layer-panel-header v-if="config.$key === 'layer' || config.slots?.layerPanelHeader">
+          <slot v-if="config.$key === 'layer'" name="layer-panel-header"></slot>
+          <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
+        </template>
 
-      <template #code-block-panel-header v-if="item === 'code-block'">
-        <slot name="code-block-panel-header"></slot>
-      </template>
+        <template #code-block-panel-header v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelHeader">
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-header"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
+        </template>
 
-      <template #code-block-panel-tool="{ id, data }" v-if="item === 'code-block'">
-        <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
-      </template>
+        <template
+          #code-block-panel-tool="{ id, data }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelTool"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
+        </template>
 
-      <template #code-block-edit-panel-header="{ id }" v-if="item === 'code-block'">
-        <slot name="code-block-edit-panel-header" :id="id"></slot>
-      </template>
-    </tab-pane>
+        <template
+          #code-block-edit-panel-header="{ id }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockEditPanelHeader"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
+          <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
+        </template>
+
+        <template
+          #layer-node-content="{ data: nodeData, node }"
+          v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
+        >
+          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
+          <component
+            v-else-if="config.slots?.layerNodeContent"
+            :is="config.slots.layerNodeContent"
+            :data="nodeData"
+            :node="node"
+          />
+        </template>
+      </component>
+    </component>
   </TMagicTabs>
 </template>
 
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
+<script lang="ts" setup name="MEditorSidebar">
+import { computed, ref, watch } from 'vue';
+import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
-import { TMagicTabs } from '@tmagic/design';
+import { getConfig, TMagicTabs } from '@tmagic/design';
 
+import MIcon from '../../components/Icon.vue';
+import type { MenuButton, MenuComponent, SideComponent, SideItem } from '../../type';
 import { SideBarData } from '../../type';
 
-import TabPane from './TabPane.vue';
+import CodeBlockList from './code-block/CodeBlockList.vue';
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
 
 const props = withDefaults(
   defineProps<{
     data?: SideBarData;
+    layerContentMenu: (MenuButton | MenuComponent)[];
   }>(),
   {
     data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
   },
 );
 
+const uiComponent = getConfig('components').tabPane;
+
 const activeTabName = ref(props.data?.status);
 
+const getItemConfig = (data: SideItem): SideComponent => {
+  const map: Record<string, SideComponent> = {
+    'component-list': {
+      $key: 'component-list',
+      type: 'component',
+      icon: Coin,
+      text: '组件',
+      component: ComponentListPanel,
+      slots: {},
+    },
+    layer: {
+      $key: 'layer',
+      type: 'component',
+      icon: Files,
+      text: '已选组件',
+      props: {
+        layerContentMenu: props.layerContentMenu,
+      },
+      component: LayerPanel,
+      slots: {},
+    },
+    'code-block': {
+      $key: 'code-block',
+      type: 'component',
+      icon: EditPen,
+      text: '代码编辑',
+      component: CodeBlockList,
+      slots: {},
+    },
+  };
+
+  return typeof data === 'string' ? map[data] : data;
+};
+
+const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+
 watch(
   () => props.data.status,
   (status) => {