@tmagic/editor 1.5.7 → 1.5.8

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -20,9 +20,6 @@
     </template>
 
     <template #tree-node-tool="{ data }">
-      <TMagicTag v-if="collecting && data.type === 'code'" type="info" size="small" style="margin-right: 5px"
-        >依赖收集中</TMagicTag
-      >
       <TMagicTooltip v-if="data.type === 'code'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -35,18 +32,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import type { Id, MNode } from '@tmagic/core';
 import { DepTargetType } from '@tmagic/core';
-import { tMagicMessage, tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useNodeStatus } from '@editor/hooks/use-node-status';
-import { type CodeBlockListSlots, CodeDeleteErrorType, type Services, type TreeNodeData } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import { type CodeBlockListSlots, CodeDeleteErrorType, type TreeNodeData } from '@editor/type';
 
 defineSlots<CodeBlockListSlots>();
 
@@ -66,19 +64,16 @@ const emit = defineEmits<{
   'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
 }>();
 
-const services = inject<Services>('services');
-const { codeBlockService, depService, editorService } = services || {};
-
-const collecting = computed(() => depService?.get('collecting'));
+const { codeBlockService, depService, editorService } = useServices();
 
 // 代码块列表
 const codeList = computed<TreeNodeData[]>(() =>
-  Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
-    const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
+  Object.entries(codeBlockService.getCodeDsl() || {}).map(([codeId, code]) => {
+    const target = depService.getTarget(codeId, DepTargetType.CODE_BLOCK);
 
     // 按页面分类显示
     const pageList: TreeNodeData[] =
-      editorService?.get('root')?.items.map((page) => ({
+      editorService.get('root')?.items.map((page) => ({
         name: page.devconfig?.tabName || page.name,
         type: 'node',
         id: `${codeId}_${page.id}`,
@@ -108,7 +103,7 @@ const codeList = computed<TreeNodeData[]>(() =>
       key: codeId,
       name: code.name,
       type: 'code',
-      codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+      codeBlockContent: codeBlockService.getCodeContentById(codeId),
       // 只有一个页面不显示页面分类
       items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || [],
     };
@@ -127,12 +122,12 @@ const filterNode = (value: string, data: MNode): boolean => {
 const { nodeStatusMap } = useNodeStatus(codeList);
 const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
 
-const editable = computed(() => codeBlockService?.getEditStatus());
+const editable = computed(() => codeBlockService.getEditStatus());
 
 // 选中组件
 const selectComp = (compId: Id) => {
-  const stage = editorService?.get('stage');
-  editorService?.select(compId);
+  const stage = editorService.get('stage');
+  editorService.select(compId);
   stage?.select(compId);
 };
 
@@ -150,7 +145,7 @@ const editCode = (id: string) => {
 const deleteCode = async (id: string) => {
   const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
   const existBinds = Boolean(currentCode?.items?.length);
-  const undeleteableList = codeBlockService?.getUndeletableList() || [];
+  const undeleteableList = codeBlockService.getUndeletableList() || [];
   if (!existBinds && !undeleteableList.includes(id)) {
     await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
       confirmButtonText: '确定',

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -55,6 +55,7 @@ import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
+import { useServices } from '@editor/hooks/use-services';
 import type {
   CodeBlockListPanelSlots,
   CodeDeleteErrorType,
@@ -62,7 +63,6 @@ import type {
   EventBus,
   MenuButton,
   MenuComponent,
-  Services,
 } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
@@ -82,9 +82,10 @@ const props = defineProps<{
 }>();
 
 const eventBus = inject<EventBus>('eventBus');
-const { codeBlockService } = inject<Services>('services') || {};
 
-const editable = computed(() => codeBlockService?.getEditStatus());
+const { codeBlockService } = useServices();
+
+const editable = computed(() => codeBlockService.getEditStatus());
 
 const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);

package/src/layouts/sidebar/code-block/useContentMenu.ts

@@ -3,7 +3,7 @@ import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { EventBus, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+import type { EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = (deleteCode: (id: string) => void) => {
   const eventBus = inject<EventBus>('eventBus');
@@ -16,7 +16,7 @@ export const useContentMenu = (deleteCode: (id: string) => void) => {
       type: 'button',
       text: '编辑',
       icon: Edit,
-      display: (services) => services?.codeBlockService?.getEditStatus() ?? true,
+      display: ({ codeBlockService }) => codeBlockService.getEditStatus(),
       handler: () => {
         if (!selectId) {
           return;
@@ -29,7 +29,7 @@ export const useContentMenu = (deleteCode: (id: string) => void) => {
       type: 'button',
       text: '复制并粘贴至当前',
       icon: markRaw(CopyDocument),
-      handler: async ({ codeBlockService }: Services) => {
+      handler: async ({ codeBlockService }) => {
         if (!selectId) {
           return;
         }

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

@@ -29,9 +29,9 @@ import { tMagicMessage } from '@tmagic/design';
 import { type ContainerChangeEventData, type FormConfig, MFormBox } from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
-import { useEditorContentHeight } from '@editor/hooks';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 defineOptions({
   name: 'MEditorDataSourceConfigPanel',
@@ -50,7 +50,7 @@ const emit = defineEmits<{
   submit: [v: any, eventData: ContainerChangeEventData];
 }>();
 
-const services = inject<Services>('services');
+const { uiService, dataSourceService } = useServices();
 
 const initValues = ref<Partial<DataSourceSchema>>({});
 const dataSourceConfig = ref<FormConfig>([]);
@@ -58,11 +58,11 @@ const dataSourceConfig = ref<FormConfig>([]);
 const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 
 watchEffect(() => {
   initValues.value = props.values;
-  dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
+  dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
 });
 
 const submitHandler = (values: any, data: ContainerChangeEventData) => {

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

@@ -19,9 +19,6 @@
       </div>
     </template>
     <template #tree-node-tool="{ data }">
-      <TMagicTag v-if="collecting && data.type === 'ds'" type="info" size="small" style="margin-right: 5px"
-        >依赖收集中</TMagicTag
-      >
       <TMagicTooltip v-if="data.type === 'ds'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -34,17 +31,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
-import { TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useNodeStatus } from '@editor/hooks/use-node-status';
-import type { DataSourceListSlots, Services, TreeNodeData } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { DataSourceListSlots, TreeNodeData } from '@editor/type';
 
 defineSlots<DataSourceListSlots>();
 
@@ -63,17 +61,15 @@ const emit = defineEmits<{
   'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
 }>();
 
-const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
-
-const collecting = computed(() => depService?.get('collecting'));
+const { depService, editorService, dataSourceService } = useServices();
 
-const editable = computed(() => dataSourceService?.get('editable') ?? true);
+const editable = computed(() => dataSourceService.get('editable'));
 
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+const dataSources = computed(() => dataSourceService.get('dataSources'));
 
-const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
-const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
-const dsCondDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
+const dsDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE));
+const dsMethodDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE_METHOD));
+const dsCondDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE_COND));
 
 const getKeyTreeConfig = (dep: DepData[string], type?: string, parentKey?: Id) =>
   dep.keys.map((key) => ({
@@ -122,7 +118,7 @@ const list = computed(() =>
     const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
 
     const items =
-      editorService?.get('root')?.items.map((page) => ({
+      editorService.get('root')?.items.map((page) => ({
         name: page.devconfig?.tabName || page.name,
         type: 'node',
         id: `${ds.id}_${page.id}`,
@@ -166,8 +162,8 @@ const removeHandler = async (id: string) => {
 
 // 选中组件
 const selectComp = (compId: Id) => {
-  const stage = editorService?.get('stage');
-  editorService?.select(compId);
+  const stage = editorService.get('stage');
+  editorService.select(compId);
   stage?.select(compId);
 };
 

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

@@ -68,14 +68,8 @@ import ContentMenu from '@editor/components/ContentMenu.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import type {
-  CustomContentMenuFunction,
-  DataSourceListSlots,
-  EventBus,
-  MenuButton,
-  MenuComponent,
-  Services,
-} from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CustomContentMenuFunction, DataSourceListSlots, EventBus, MenuButton, MenuComponent } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -94,7 +88,7 @@ const props = defineProps<{
 }>();
 
 const eventBus = inject<EventBus>('eventBus');
-const { dataSourceService } = inject<Services>('services') || {};
+const { dataSourceService } = useServices();
 
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
@@ -103,7 +97,7 @@ const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },
     { text: 'HTTP', type: 'http' },
-  ].concat(dataSourceService?.get('datasourceTypeList') ?? []),
+  ].concat(dataSourceService.get('datasourceTypeList')),
 );
 
 const addHandler = (type: string) => {
@@ -113,7 +107,7 @@ const addHandler = (type: string) => {
 
   dataSourceValues.value = mergeWith(
     { type, title: datasourceType?.text },
-    dataSourceService?.getFormValue(type) || {},
+    dataSourceService.getFormValue(type),
     (objValue, srcValue) => {
       if (Array.isArray(srcValue)) {
         return srcValue;
@@ -133,7 +127,7 @@ const removeHandler = async (id: string) => {
     type: 'warning',
   });
 
-  dataSourceService?.remove(id);
+  dataSourceService.remove(id);
 };
 
 const dataSourceList = ref<InstanceType<typeof DataSourceList>>();

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -3,7 +3,7 @@ import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { EventBus, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+import type { EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = () => {
   const eventBus = inject<EventBus>('eventBus');
@@ -16,7 +16,7 @@ export const useContentMenu = () => {
       type: 'button',
       text: '编辑',
       icon: Edit,
-      display: (services) => services?.dataSourceService?.get('editable') ?? true,
+      display: ({ dataSourceService }) => dataSourceService.get('editable'),
       handler: () => {
         if (!selectId) {
           return;
@@ -29,7 +29,7 @@ export const useContentMenu = () => {
       type: 'button',
       text: '复制并粘贴至当前',
       icon: markRaw(CopyDocument),
-      handler: ({ dataSourceService }: Services) => {
+      handler: ({ dataSourceService }) => {
         if (!selectId) {
           return;
         }

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

@@ -3,14 +3,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, useTemplateRef } from 'vue';
+import { computed, markRaw, useTemplateRef } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import { useServices } from '@editor/hooks/use-services';
 import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
-import type { ComponentGroup, CustomContentMenuFunction, MenuButton, MenuComponent, Services } from '@editor/type';
+import type { ComponentGroup, CustomContentMenuFunction, MenuButton, MenuComponent } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
@@ -26,11 +27,13 @@ const emit = defineEmits<{
   'collapse-all': [];
 }>();
 
-const services = inject<Services>('services');
+const services = useServices();
+const { editorService, componentListService } = services;
+
 const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
-const node = computed(() => services?.editorService.get('node'));
-const nodes = computed(() => services?.editorService.get('nodes'));
-const componentList = computed(() => services?.componentListService.getList() || []);
+const node = computed(() => editorService.get('node'));
+const nodes = computed(() => editorService.get('nodes'));
+const componentList = computed(() => componentListService.getList());
 
 const createMenuItems = (group: ComponentGroup): MenuButton[] =>
   group.items.map((component) => ({
@@ -38,7 +41,7 @@ const createMenuItems = (group: ComponentGroup): MenuButton[] =>
     type: 'button',
     icon: component.icon,
     handler: () => {
-      services?.editorService.add({
+      editorService.add({
         name: component.text,
         type: component.type,
         ...(component.data || {}),
@@ -54,7 +57,7 @@ const getSubMenuData = computed<MenuButton[]>(() => {
         type: 'button',
         icon: Files,
         handler: () => {
-          services?.editorService.add({
+          editorService.add({
             type: 'tab-pane',
           });
         },

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

@@ -6,24 +6,20 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
 import { Hide, View } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
-import { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 const props = defineProps<{
   data: MNode;
 }>();
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
+const { editorService } = useServices();
 
 const setNodeVisible = (visible: boolean) => {
-  if (!editorService) return;
-
   editorService.update({
     id: props.data.id,
     visible,

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

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
@@ -55,14 +55,8 @@ import { TMagicScrollbar } from '@tmagic/design';
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
-import type {
-  CustomContentMenuFunction,
-  LayerPanelSlots,
-  MenuButton,
-  MenuComponent,
-  Services,
-  TreeNodeData,
-} from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CustomContentMenuFunction, LayerPanelSlots, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
@@ -84,12 +78,12 @@ defineProps<{
   customContentMenu: CustomContentMenuFunction;
 }>();
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
+const services = useServices();
+const { editorService } = services;
 
 const treeRef = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
-const page = computed(() => editorService?.get('page'));
+const page = computed(() => editorService.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
 const { nodeStatusMap } = useNodeStatus(services);

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

@@ -4,18 +4,19 @@ import { throttle } from 'lodash-es';
 import { Id, MNode } from '@tmagic/core';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
-import { LayerNodeStatus, Services, TreeNodeData, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
+import type { LayerNodeStatus, Services, TreeNodeData } from '@editor/type';
+import { UI_SELECT_MODE_EVENT_NAME } from '@editor/utils/const';
 import { updateStatus } from '@editor/utils/tree';
 
 import LayerMenu from './LayerMenu.vue';
 
 export const useClick = (
-  services: Services | undefined,
+  { editorService, stageOverlayService, uiService }: Services,
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
   menuRef: ShallowRef<InstanceType<typeof LayerMenu> | null>,
 ) => {
-  const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
+  const isMultiSelect = computed(() => isCtrlKeyDown.value && !editorService.get('disabledMultiSelect'));
 
   // 触发画布选中
   const select = async (data: MNode) => {
@@ -26,9 +27,9 @@ export const useClick = (
     if (isMultiSelect.value) {
       multiSelect(data);
     } else {
-      await services?.editorService.select(data);
-      services?.editorService.get('stage')?.select(data.id);
-      services?.stageOverlayService.get('stage')?.select(data.id);
+      await editorService.select(data);
+      editorService.get('stage')?.select(data.id);
+      stageOverlayService.get('stage')?.select(data.id);
     }
   };
 
@@ -37,7 +38,7 @@ export const useClick = (
       return;
     }
 
-    const nodes = services?.editorService.get('nodes') || [];
+    const nodes = editorService.get('nodes') || [];
 
     const newNodes: Id[] = [];
     let isCancel = false;
@@ -59,9 +60,9 @@ export const useClick = (
       newNodes.push(data.id);
     }
 
-    await services?.editorService.multiSelect(newNodes);
-    services?.editorService.get('stage')?.multiSelect(newNodes);
-    services?.stageOverlayService.get('stage')?.multiSelect(newNodes);
+    await editorService.multiSelect(newNodes);
+    editorService.get('stage')?.multiSelect(newNodes);
+    stageOverlayService.get('stage')?.multiSelect(newNodes);
   };
 
   const throttleTime = 300;
@@ -75,15 +76,15 @@ export const useClick = (
 
   // 触发画布高亮
   const highlight = (data: TreeNodeData) => {
-    services?.editorService?.highlight(data);
-    services?.editorService?.get('stage')?.highlight(data.id);
-    services?.stageOverlayService?.get('stage')?.highlight(data.id);
+    editorService.highlight(data);
+    editorService.get('stage')?.highlight(data.id);
+    stageOverlayService.get('stage')?.highlight(data.id);
   };
 
   const nodeClickHandler = (event: MouseEvent, data: TreeNodeData): void => {
     if (!nodeStatusMap?.value) return;
 
-    if (services?.uiService.get('uiSelectMode')) {
+    if (uiService.get('uiSelectMode')) {
       document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
       return;
     }
@@ -107,7 +108,7 @@ export const useClick = (
     nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData): void {
       event.preventDefault();
 
-      const nodes = services?.editorService.get('nodes') || [];
+      const nodes = editorService.get('nodes') || [];
       if (nodes.length < 2 || !nodes.includes(data)) {
         nodeClickHandler(event, data);
       }

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

@@ -42,7 +42,7 @@ const removeStatusClass = (el: HTMLElement | null) => {
  * dragover 属于目标节点
  * 这些方法并不是同一个dom事件触发的
  */
-export const useDrag = (services: Services | undefined) => {
+export const useDrag = ({ editorService }: Services) => {
   const handleDragStart = (event: DragEvent) => {
     if (!event.dataTransfer || !event.target || !event.currentTarget) return;
 
@@ -144,12 +144,12 @@ export const useDrag = (services: Services | undefined) => {
 
     removeStatusClass(dragState.container);
 
-    if (node && dragState.dragOverNodeId && dragState.dropType && services) {
+    if (node && dragState.dragOverNodeId && dragState.dropType) {
       if (dragState.dragOverNodeId === node.id) {
         return;
       }
 
-      const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
+      const targetInfo = editorService.getNodeInfo(dragState.dragOverNodeId, false);
       const targetNode = targetInfo.node;
       let targetParent = targetInfo.parent;
 
@@ -168,12 +168,12 @@ export const useDrag = (services: Services | undefined) => {
         targetIndex += 1;
       }
 
-      const selectedNodes = services.editorService.get('nodes');
+      const selectedNodes = editorService.get('nodes');
 
       if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
-        services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
+        editorService.dragTo(selectedNodes, targetParent, targetIndex);
       } else {
-        services.editorService.dragTo([node], targetParent, targetIndex);
+        editorService.dragTo([node], targetParent, targetIndex);
       }
     }
 

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

@@ -5,11 +5,9 @@ import type { Services } from '@editor/type';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 export const useKeybinding = (
-  services: Services | undefined,
+  { keybindingService }: Services,
   container: ShallowRef<InstanceType<typeof Tree> | null>,
 ) => {
-  const keybindingService = services?.keybindingService;
-
   // 是否多选
   const isCtrlKeyDown = ref(false);
 
@@ -17,15 +15,15 @@ export const useKeybinding = (
     isCtrlKeyDown.value = false;
   };
 
-  keybindingService?.registerCommand('layer-panel-global-keyup', () => {
+  keybindingService.registerCommand('layer-panel-global-keyup', () => {
     isCtrlKeyDown.value = false;
   });
 
-  keybindingService?.registerCommand('layer-panel-global-keydown', () => {
+  keybindingService.registerCommand('layer-panel-global-keydown', () => {
     isCtrlKeyDown.value = true;
   });
 
-  keybindingService?.register([
+  keybindingService.register([
     {
       command: 'layer-panel-global-keydown',
       keybinding: 'ctrl',
@@ -41,10 +39,10 @@ export const useKeybinding = (
   watchEffect(() => {
     if (container.value) {
       globalThis.addEventListener('blur', windowBlurHandler);
-      keybindingService?.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
+      keybindingService.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
     } else {
       globalThis.removeEventListener('blur', windowBlurHandler);
-      keybindingService?.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
+      keybindingService.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
     }
   });