@tmagic/editor 1.3.0-beta.6 → 1.3.0-beta.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.6",
+  "version": "1.3.0-beta.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -47,13 +47,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.6",
-    "@tmagic/design": "1.3.0-beta.6",
-    "@tmagic/form": "1.3.0-beta.6",
-    "@tmagic/schema": "1.3.0-beta.6",
-    "@tmagic/stage": "1.3.0-beta.6",
-    "@tmagic/table": "1.3.0-beta.6",
-    "@tmagic/utils": "1.3.0-beta.6",
+    "@tmagic/core": "1.3.0-beta.8",
+    "@tmagic/design": "1.3.0-beta.8",
+    "@tmagic/form": "1.3.0-beta.8",
+    "@tmagic/schema": "1.3.0-beta.8",
+    "@tmagic/stage": "1.3.0-beta.8",
+    "@tmagic/table": "1.3.0-beta.8",
+    "@tmagic/utils": "1.3.0-beta.8",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -65,8 +65,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.6",
-    "@tmagic/form": "1.3.0-beta.6",
+    "@tmagic/design": "1.3.0-beta.8",
+    "@tmagic/form": "1.3.0-beta.8",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/Editor.vue

@@ -25,6 +25,10 @@
             <slot name="layer-node-content" :data="data"></slot>
           </template>
 
+          <template #layer-node-tool="{ data }">
+            <slot name="layer-node-tool" :data="data"></slot>
+          </template>
+
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
@@ -40,6 +44,10 @@
           <template #code-block-panel-tool="{ id, data }">
             <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
           </template>
+
+          <template #data-source-panel-tool="{ data }">
+            <slot name="data-source-panel-tool" :data="data"></slot>
+          </template>
         </Sidebar>
       </slot>
     </template>

package/src/components/ContentMenu.vue

@@ -126,17 +126,13 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
   };
 };
 
-const show = (e?: MouseEvent) => {
+const show = (e?: { clientY: number; clientX: number }) => {
   // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
   setTimeout(() => {
     visible.value = true;
 
-    if (!e) {
-      return;
-    }
-
     nextTick(() => {
-      setPosition(e);
+      e && setPosition(e);
 
       emit('show');
     });

package/src/components/SplitView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="m-editor-layout">
+  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
     <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -55,14 +55,18 @@ const el = ref<HTMLElement>();
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
 
-const getCenterWidth = (clientWidth: number, left: number, right: number) => {
+const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
+  let right = r > 0 ? r : 0;
+  let left = l > 0 ? l : 0;
   let center = clientWidth - left - right;
+
   if (center < props.minCenter) {
     center = props.minCenter;
-    if (left < right) {
-      right = clientWidth - left - props.minCenter;
+    if (right > center + props.minRight) {
+      right = clientWidth - left - center;
     } else {
-      left = clientWidth - right - props.minCenter;
+      right = props.minRight;
+      left = clientWidth - right - center;
     }
   }
   return {
@@ -141,7 +145,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right = props.right;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+  const columnWidth = getCenterWidth(clientWidth, props.left, right);
 
   center.value = columnWidth.center;
 
@@ -151,4 +155,16 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right: columnWidth.right,
   });
 };
+
+defineExpose({
+  updateWidth() {
+    const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+
+    emit('change', {
+      left: columnWidth.left,
+      center: center.value,
+      right: columnWidth.right,
+    });
+  },
+});
 </script>

package/src/components/Tree.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="m-editor-tree" @dragover="handleDragOver">
+    <template v-if="data?.length">
+      <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
+        <template #tree-node-content="{ data: nodeData }">
+          <slot name="tree-node-content" :data="nodeData"> </slot>
+        </template>
+
+        <template #tree-node-tool="{ data: nodeData }">
+          <slot name="tree-node-tool" :data="nodeData"> </slot>
+        </template>
+      </TreeNode>
+    </template>
+    <div v-else>
+      <p>{{ emptyText }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+import type { Id } from '@tmagic/schema';
+
+import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+
+import TreeNode from './TreeNode.vue';
+
+defineSlots<{
+  'tree-node-content'(props: { data: TreeNodeData }): any;
+  'tree-node-tool'(props: { data: TreeNodeData }): any;
+}>();
+
+defineOptions({
+  name: 'MEditorTree',
+});
+
+const emit = defineEmits<{
+  'node-dragover': [event: DragEvent];
+  'node-dragstart': [event: DragEvent, data: TreeNodeData];
+  'node-dragleave': [event: DragEvent, data: TreeNodeData];
+  'node-dragend': [event: DragEvent, data: TreeNodeData];
+  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
+  'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
+  'node-click': [event: MouseEvent, data: TreeNodeData];
+}>();
+
+provide('treeEmit', emit);
+
+withDefaults(
+  defineProps<{
+    data: TreeNodeData[];
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number;
+    emptyText?: string;
+  }>(),
+  {
+    indent: 0,
+    emptyText: '暂无数据',
+  },
+);
+
+const handleDragOver = (event: DragEvent) => {
+  emit('node-dragover', event);
+};
+</script>

package/src/components/TreeNode.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    v-show="visible"
+    class="m-editor-tree-node"
+    :draggable="draggable"
+    :data-node-id="data.id"
+    :data-is-container="Array.isArray(data.items)"
+    @dragstart="handleDragStart"
+    @dragleave="handleDragLeave"
+    @dragend="handleDragEnd"
+  >
+    <div
+      class="tree-node"
+      :class="{ selected, expanded }"
+      :style="`padding-left: ${indent}px`"
+      @contextmenu="nodeContentmenuHandler"
+      @mouseenter="mouseenterHandler"
+    >
+      <MIcon
+        class="expand-icon"
+        :style="hasChilren ? '' : 'color: transparent; cursor: default'"
+        :icon="expanded ? ArrowDown : ArrowRight"
+        @click="expandHandler"
+      ></MIcon>
+
+      <div class="tree-node-content" @click="nodeClickHandler">
+        <slot name="tree-node-content" :data="data">
+          <div class="tree-node-label">{{ `${data.name} (${data.id})` }}</div>
+          <div class="tree-node-tool">
+            <slot name="tree-node-tool" :data="data"></slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="hasChilren && expanded" class="m-editor-tree-node-children">
+      <TreeNode
+        v-for="item in data.items"
+        :key="item.id"
+        :data="item"
+        :node-status-map="nodeStatusMap"
+        :indent="indent + 11"
+      >
+        <template #tree-node-content="{ data: nodeData }">
+          <slot name="tree-node-content" :data="nodeData"> </slot>
+        </template>
+        <template #tree-node-tool="{ data: nodeData }">
+          <slot name="tree-node-tool" :data="nodeData"> </slot>
+        </template>
+      </TreeNode>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
+
+import type { Id } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+import { updateStatus } from '@editor/utils/tree';
+
+defineSlots<{
+  'tree-node-tool'(props: { data: TreeNodeData }): any;
+  'tree-node-content'(props: { data: TreeNodeData }): any;
+}>();
+
+defineOptions({
+  name: 'MEditorTreeNode',
+});
+
+const emit = defineEmits<{
+  'node-dragstart': [event: DragEvent, data: TreeNodeData];
+  'node-dragleave': [event: DragEvent, data: TreeNodeData];
+  'node-dragend': [event: DragEvent, data: TreeNodeData];
+  'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
+  'node-mouseenter': [event: MouseEvent, data: TreeNodeData];
+  'node-click': [event: MouseEvent, data: TreeNodeData];
+}>();
+
+const treeEmit = inject<typeof emit>('treeEmit');
+
+const props = withDefaults(
+  defineProps<{
+    data: TreeNodeData;
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number;
+  }>(),
+  {
+    indent: 0,
+  },
+);
+
+const nodeStatus = computed(
+  () =>
+    props.nodeStatusMap?.get(props.data.id) || {
+      selected: false,
+      expand: false,
+      visible: false,
+      draggable: false,
+    },
+);
+
+const expanded = computed(() => nodeStatus.value.expand);
+const selected = computed(() => nodeStatus.value.selected);
+const visible = computed(() => nodeStatus.value.visible);
+const draggable = computed(() => nodeStatus.value.draggable);
+
+const hasChilren = computed(() => props.data.items && props.data.items.length > 0);
+
+const handleDragStart = (event: DragEvent) => {
+  treeEmit?.('node-dragstart', event, props.data);
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  treeEmit?.('node-dragleave', event, props.data);
+};
+
+const handleDragEnd = (event: DragEvent) => {
+  treeEmit?.('node-dragend', event, props.data);
+};
+
+const nodeContentmenuHandler = (event: MouseEvent) => {
+  treeEmit?.('node-contextmenu', event, props.data);
+};
+
+const mouseenterHandler = (event: MouseEvent) => {
+  treeEmit?.('node-mouseenter', event, props.data);
+};
+
+const expandHandler = () => {
+  updateStatus(props.nodeStatusMap, props.data.id, {
+    expand: !expanded.value,
+  });
+};
+
+const nodeClickHandler = (event: MouseEvent) => {
+  treeEmit?.('node-click', event, props.data);
+};
+</script>

package/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor" ref="content">
+  <div class="m-editor" ref="content" style="min-width: 180px">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -12,6 +12,7 @@
 
     <SplitView
       v-else
+      ref="splitView"
       class="m-editor-content"
       left-class="m-editor-framework-left"
       center-class="m-editor-framework-center"
@@ -20,6 +21,7 @@
       v-model:right="columnWidth.right"
       :min-left="65"
       :min-right="20"
+      :min-center="100"
       @change="columnWidthChange"
     >
       <template #left>
@@ -70,6 +72,7 @@ const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const content = ref<HTMLDivElement>();
+const splitView = ref<InstanceType<typeof SplitView>>();
 
 const root = computed(() => editorService?.get('root'));
 
@@ -79,8 +82,10 @@ const showSrc = computed(() => uiService?.get('showSrc'));
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 
-const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
-const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+const leftColumnWidthCacheData =
+  Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+const RightColumnWidthCacheData =
+  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
 
 const columnWidth = ref<Partial<GetColumnWidth>>({
   left: leftColumnWidthCacheData,
@@ -89,24 +94,9 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
 });
 
 watch(
-  pageLength,
-  (length) => {
-    const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
-
-    columnWidth.value.left = left;
-
-    const container = content.value || document.body;
-
-    if (length <= 0) {
-      columnWidth.value.right = undefined;
-      columnWidth.value.center = container.clientWidth - left;
-    } else {
-      const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
-      columnWidth.value.right = right;
-      columnWidth.value.center = container.clientWidth - left - right;
-    }
-
-    uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
+  [pageLength, splitView],
+  () => {
+    splitView.value?.updateWidth();
   },
   {
     immediate: true,

package/src/layouts/sidebar/Sidebar.vue

@@ -64,6 +64,19 @@
           <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData"></slot>
           <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :data="nodeData" />
         </template>
+
+        <template #layer-node-tool="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeTool">
+          <slot v-if="config.$key === 'layer'" name="layer-node-tool" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeTool" :is="config.slots.layerNodeTool" :data="nodeData" />
+        </template>
+
+        <template
+          #data-source-panel-tool="{ data }"
+          v-if="config.$key === 'data-source' || config.slots?.codeBlockPanelTool"
+        >
+          <slot v-if="config.$key === 'data-source'" name="data-source-panel-tool" :data="data"></slot>
+          <component v-else-if="config.slots?.DataSourcePanelTool" :is="config.slots.DataSourcePanelTool" />
+        </template>
       </component>
     </div>
   </div>

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -26,7 +26,7 @@
             <TMagicTooltip v-if="editable" effect="dark" content="删除" placement="bottom">
               <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
             </TMagicTooltip>
-            <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+            <slot name="data-source-panel-tool" :data="data"></slot>
           </div>
         </div>
       </div>
@@ -42,7 +42,9 @@ import { tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { Dep, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import { DepTargetType, Services } from '@editor/type';
+import { type DataSourceListSlots, DepTargetType, type Services } from '@editor/type';
+
+defineSlots<DataSourceListSlots>();
 
 defineOptions({
   name: 'MEditorDataSourceList',
@@ -73,6 +75,26 @@ const getNodeTreeConfig = (id: string, dep: Dep[string], type?: string) => ({
   children: getKeyTreeConfig(dep, type),
 });
 
+/**
+ * 生成tree中依赖节点的数据
+ * @param children 节点
+ * @param deps 依赖
+ * @param type 依赖类型
+ */
+const mergeChildren = (children: any[], deps: Dep, type?: string) => {
+  Object.entries(deps).forEach(([id, dep]) => {
+    // 已经生成过的节点
+    const nodeItem = children.find((item) => item.id === id);
+    // 节点存在，则追加依赖的key
+    if (nodeItem) {
+      nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+    } else {
+      // 节点不存在，则生成
+      children.push(getNodeTreeConfig(id, dep, type));
+    }
+  });
+};
+
 const list = computed(() =>
   dataSources.value.map((ds) => {
     const dsDeps = dsDep.value[ds.id].deps;
@@ -80,21 +102,10 @@ const list = computed(() =>
     const dsCondDeps = dsCondDep.value[ds.id].deps;
 
     const children: any[] = [];
-
-    const mergeChildren = (deps: Dep, type?: string) => {
-      Object.entries(deps).forEach(([id, dep]) => {
-        const nodeItem = children.find((item) => item.id === id);
-        if (nodeItem) {
-          nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
-        } else {
-          children.push(getNodeTreeConfig(id, dep, type));
-        }
-      });
-    };
-
-    mergeChildren(dsDeps);
-    mergeChildren(dsMethodDeps, 'method');
-    mergeChildren(dsCondDeps, 'cond');
+    // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
+    mergeChildren(children, dsDeps);
+    mergeChildren(children, dsMethodDeps, 'method');
+    mergeChildren(children, dsCondDeps, 'cond');
 
     return {
       id: ds.id,

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -23,7 +23,11 @@
     </div>
 
     <!-- 数据源列表 -->
-    <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
+    <DataSourceList @edit="editHandler" @remove="removeHandler">
+      <template #data-source-panel-tool="{ data }">
+        <slot name="data-source-panel-tool" :data="data"></slot>
+      </template>
+    </DataSourceList>
 
     <DataSourceConfigPanel
       ref="editDialog"
@@ -44,11 +48,13 @@ import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { Services } from '@editor/type';
+import type { DataSourceListSlots, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
 
+defineSlots<DataSourceListSlots>();
+
 defineOptions({
   name: 'MEditorDataSourceListPanel',
 });

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

@@ -1,22 +1,33 @@
 <template>
-  <TMagicScrollbar class="magic-editor-layer-panel">
+  <TMagicScrollbar class="m-editor-layer-panel">
     <slot name="layer-panel-header"></slot>
 
     <SearchInput @search="filterTextChangeHandler"></SearchInput>
 
-    <div class="magic-editor-layer-tree" ref="layerTreeContainer" 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>
+    <Tree
+      v-if="page && nodeStatusMap"
+      tabindex="-1"
+      ref="tree"
+      :data="[page]"
+      :node-status-map="nodeStatusMap"
+      @node-dragover="handleDragOver"
+      @node-dragstart="handleDragStart"
+      @node-dragleave="handleDragLeave"
+      @node-dragend="handleDragEnd"
+      @node-contextmenu="nodeContentmenuHandler"
+      @node-mouseenter="mouseenterHandler"
+      @node-click="nodeClickHandler"
+    >
+      <template #tree-node-tool="{ data: nodeData }">
+        <slot name="layer-node-tool" :data="nodeData">
+          <LayerNodeTool :data="nodeData"></LayerNodeTool>
+        </slot>
+      </template>
+
+      <template #tree-node-content="{ data: nodeData }">
+        <slot name="layer-node-content" :data="nodeData"> </slot>
+      </template>
+    </Tree>
 
     <Teleport to="body">
       <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
@@ -25,15 +36,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, provide, ref } from 'vue';
+import { computed, inject, 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 Tree from '@editor/components/Tree.vue';
+import { LayerPanelSlots, MenuButton, MenuComponent, Services } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
-import LayerNode from './LayerNode.vue';
+import LayerNodeTool from './LayerNodeTool.vue';
+import { useClick } from './use-click';
 import { useDrag } from './use-drag';
 import { useFilter } from './use-filter';
 import { useKeybinding } from './use-keybinding';
@@ -52,17 +65,14 @@ defineProps<{
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const layerTreeContainer = ref<HTMLDivElement>();
+const tree = ref<InstanceType<typeof Tree>>();
 
 const page = computed(() => editorService?.get('page'));
-const root = computed(() => editorService?.get('root'));
 
 const { nodeStatusMap } = useNodeStatus(services, page);
-const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer);
+const { isCtrlKeyDown } = useKeybinding(services, tree);
 
-provide('nodeStatusMap', nodeStatusMap);
-
-const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
+const { filterTextChangeHandler } = useFilter(nodeStatusMap, page);
 
 const collapseAllHandler = () => {
   if (!page.value || !nodeStatusMap.value) return;
@@ -75,13 +85,12 @@ const collapseAllHandler = () => {
   }
 };
 
-// 右键菜单
-const menu = ref<InstanceType<typeof LayerMenu>>();
-const contextmenu = (event: MouseEvent): void => {
-  event.preventDefault();
-
-  menu.value?.show(event);
-};
+const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
 
-const { handleDragOver } = useDrag(services);
+const {
+  menu,
+  nodeClickHandler,
+  nodeContentmenuHandler,
+  highlightHandler: mouseenterHandler,
+} = useClick(services, isCtrlKeyDown, nodeStatusMap);
 </script>