From 900b701c807dc4f8b8223a0c847e1e1cbf108edd Mon Sep 17 00:00:00 2001 From: roymondchen Date: Tue, 11 Feb 2025 16:24:24 +0800 Subject: [PATCH] =?UTF-8?q?refactor(editor):=20=E6=96=B0=E5=A2=9EuseServic?= =?UTF-8?q?es=20hook=EF=BC=8C=E5=87=8F=E5=B0=91=E4=BD=BF=E7=94=A8=E5=8F=AF?= =?UTF-8?q?=E9=80=89=E9=93=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor/src/components/CodeBlockEditor.vue | 8 +-- .../editor/src/components/FloatingBox.vue | 8 +-- packages/editor/src/components/ToolButton.vue | 10 ++-- packages/editor/src/components/TreeNode.vue | 4 +- packages/editor/src/fields/CodeSelect.vue | 12 ++-- packages/editor/src/fields/CodeSelectCol.vue | 9 +-- packages/editor/src/fields/CondOpSelect.vue | 9 +-- .../DataSourceFieldSelect/FieldSelect.vue | 11 ++-- .../fields/DataSourceFieldSelect/Index.vue | 7 ++- .../editor/src/fields/DataSourceFields.vue | 6 +- .../editor/src/fields/DataSourceInput.vue | 8 +-- .../src/fields/DataSourceMethodSelect.vue | 17 +++--- .../editor/src/fields/DataSourceMocks.vue | 6 +- .../editor/src/fields/DataSourceSelect.vue | 11 ++-- packages/editor/src/fields/DisplayConds.vue | 8 +-- packages/editor/src/fields/EventSelect.vue | 40 ++++++------- .../editor/src/fields/PageFragmentSelect.vue | 11 ++-- packages/editor/src/fields/UISelect.vue | 35 +++++------ packages/editor/src/hooks/index.ts | 1 + .../editor/src/hooks/use-code-block-edit.ts | 15 ++--- .../editor/src/hooks/use-data-source-edit.ts | 12 ++-- .../src/hooks/use-editor-content-height.ts | 10 ++-- packages/editor/src/hooks/use-float-box.ts | 10 ++-- .../src/hooks/use-next-float-box-position.ts | 18 +++--- packages/editor/src/hooks/use-services.ts | 13 +++++ packages/editor/src/hooks/use-stage.ts | 8 +-- packages/editor/src/layouts/AddPageBox.vue | 10 +--- packages/editor/src/layouts/Framework.vue | 34 +++++------ packages/editor/src/layouts/NavMenu.vue | 32 +++++----- .../editor/src/layouts/page-bar/AddButton.vue | 11 ++-- .../editor/src/layouts/page-bar/PageBar.vue | 20 +++---- .../page-bar/PageBarScrollContainer.vue | 15 +++-- .../editor/src/layouts/page-bar/PageList.vue | 14 ++--- .../src/layouts/props-panel/FormPanel.vue | 10 ++-- .../src/layouts/props-panel/PropsPanel.vue | 37 ++++++------ .../layouts/props-panel/use-style-panel.ts | 22 +++---- .../layouts/sidebar/ComponentListPanel.vue | 10 ++-- .../editor/src/layouts/sidebar/Sidebar.vue | 16 ++--- .../sidebar/code-block/CodeBlockList.vue | 26 ++++----- .../sidebar/code-block/CodeBlockListPanel.vue | 7 ++- .../sidebar/code-block/useContentMenu.ts | 6 +- .../data-source/DataSourceConfigPanel.vue | 10 ++-- .../sidebar/data-source/DataSourceList.vue | 25 ++++---- .../data-source/DataSourceListPanel.vue | 18 ++---- .../sidebar/data-source/useContentMenu.ts | 6 +- .../src/layouts/sidebar/layer/LayerMenu.vue | 19 +++--- .../layouts/sidebar/layer/LayerNodeTool.vue | 8 +-- .../src/layouts/sidebar/layer/LayerPanel.vue | 18 ++---- .../src/layouts/sidebar/layer/use-click.ts | 31 +++++----- .../src/layouts/sidebar/layer/use-drag.ts | 12 ++-- .../layouts/sidebar/layer/use-keybinding.ts | 14 ++--- .../layouts/sidebar/layer/use-node-status.ts | 23 +++++--- .../src/layouts/workspace/Breadcrumb.vue | 17 +++--- .../src/layouts/workspace/Workspace.vue | 14 ++--- .../layouts/workspace/viewer/NodeListMenu.vue | 17 +++--- .../src/layouts/workspace/viewer/Stage.vue | 48 +++++++-------- .../layouts/workspace/viewer/StageOverlay.vue | 31 +++++----- .../layouts/workspace/viewer/ViewerMenu.vue | 29 +++++----- packages/editor/src/type.ts | 12 +--- packages/editor/src/utils/const.ts | 6 ++ packages/editor/src/utils/content-menu.ts | 58 +++++++++---------- packages/editor/src/utils/index.ts | 1 + 62 files changed, 486 insertions(+), 508 deletions(-) create mode 100644 packages/editor/src/hooks/use-services.ts diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue index 665a06af..7f991bb6 100644 --- a/packages/editor/src/components/CodeBlockEditor.vue +++ b/packages/editor/src/components/CodeBlockEditor.vue @@ -74,9 +74,9 @@ import { import FloatingBox from '@editor/components/FloatingBox.vue'; import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'; import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position'; +import { useServices } from '@editor/hooks/use-services'; import { useWindowRect } from '@editor/hooks/use-window-rect'; import CodeEditor from '@editor/layouts/CodeEditor.vue'; -import type { Services } from '@editor/type'; import { getEditorConfig } from '@editor/utils/config'; defineOptions({ @@ -97,7 +97,7 @@ const emit = defineEmits<{ submit: [values: CodeBlockContent, eventData: ContainerChangeEventData]; }>(); -const services = inject('services'); +const { codeBlockService, uiService } = useServices(); const { height: codeBlockEditorHeight } = useEditorContentHeight(); @@ -192,7 +192,7 @@ const functionConfig = computed(() => [ label: '描述', name: 'extra', }, - services?.codeBlockService.getParamsColConfig() || defaultParamColConfig, + codeBlockService.getParamsColConfig() || defaultParamColConfig, ], }, { @@ -259,7 +259,7 @@ const closedHandler = () => { }; const parentFloating = inject>('parentFloating', ref(null)); -const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating); +const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating); defineExpose({ async show() { diff --git a/packages/editor/src/components/FloatingBox.vue b/packages/editor/src/components/FloatingBox.vue index 0afc402d..d4b3a4bc 100644 --- a/packages/editor/src/components/FloatingBox.vue +++ b/packages/editor/src/components/FloatingBox.vue @@ -17,14 +17,14 @@ diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue index df31061d..49592024 100644 --- a/packages/editor/src/fields/DataSourceInput.vue +++ b/packages/editor/src/fields/DataSourceInput.vue @@ -48,7 +48,7 @@ diff --git a/packages/editor/src/fields/DataSourceSelect.vue b/packages/editor/src/fields/DataSourceSelect.vue index 4fb8cf00..75bcaad4 100644 --- a/packages/editor/src/fields/DataSourceSelect.vue +++ b/packages/editor/src/fields/DataSourceSelect.vue @@ -27,7 +27,8 @@ import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form'; import MIcon from '@editor/components/Icon.vue'; -import type { DataSourceSelect, EventBus, Services } from '@editor/type'; +import { useServices } from '@editor/hooks/use-services'; +import type { DataSourceSelect, EventBus } from '@editor/type'; import { SideItemKey } from '@editor/type'; defineOptions({ @@ -41,15 +42,15 @@ const props = withDefaults(defineProps>(), { }); const mForm = inject('mForm'); -const { dataSourceService, uiService } = inject('services') || {}; +const { dataSourceService, uiService } = useServices(); const eventBus = inject('eventBus'); -const dataSources = computed(() => dataSourceService?.get('dataSources') || []); +const dataSources = computed(() => dataSourceService.get('dataSources')); const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props)); const hasDataSourceSidePanel = computed(() => - (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE), + uiService.get('sideBarItems').find((item) => item.$key === SideItemKey.DATA_SOURCE), ); const selectConfig = computed(() => { @@ -87,7 +88,7 @@ const editHandler = () => { const id = typeof value === 'string' ? value : value.dataSourceId; - const dataSource = dataSourceService?.getDataSourceById(id); + const dataSource = dataSourceService.getDataSourceById(id); if (!dataSource) return; diff --git a/packages/editor/src/fields/DisplayConds.vue b/packages/editor/src/fields/DisplayConds.vue index bd1752ef..ec48fe1f 100644 --- a/packages/editor/src/fields/DisplayConds.vue +++ b/packages/editor/src/fields/DisplayConds.vue @@ -26,7 +26,7 @@ import { MGroupList, } from '@tmagic/form'; -import type { Services } from '@editor/type'; +import { useServices } from '@editor/hooks/use-services'; import { getCascaderOptionsFromFields } from '@editor/utils'; defineOptions({ @@ -49,7 +49,7 @@ const props = withDefaults( }, ); -const { dataSourceService } = inject('services') || {}; +const { dataSourceService } = useServices(); const mForm = inject('mForm'); const parentFields = computed(() => filterFunction(mForm, props.config.parentFields, props) || []); @@ -71,7 +71,7 @@ const config = computed(() => ({ type: 'cascader', options: () => { const [dsId, ...keys] = parentFields.value; - const ds = dataSourceService?.getDataSourceById(dsId); + const ds = dataSourceService.getDataSourceById(dsId); if (!ds) { return []; } @@ -113,7 +113,7 @@ const config = computed(() => ({ type: (mForm, { model }) => { const [id, ...fieldNames] = [...parentFields.value, ...model.field]; - const ds = dataSourceService?.getDataSourceById(id); + const ds = dataSourceService.getDataSourceById(id); let fields = ds?.fields || []; let type = ''; diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue index fae970aa..ce0c78af 100644 --- a/packages/editor/src/fields/EventSelect.vue +++ b/packages/editor/src/fields/EventSelect.vue @@ -50,7 +50,7 @@ diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue index 25c75570..6cd79554 100644 --- a/packages/editor/src/fields/UISelect.vue +++ b/packages/editor/src/fields/UISelect.vue @@ -50,7 +50,8 @@ import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import type { FieldProps, FormItem, FormState } from '@tmagic/form'; import { getIdFromEl } from '@tmagic/utils'; -import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type'; +import { useServices } from '@editor/hooks/use-services'; +import { UI_SELECT_MODE_EVENT_NAME } from '@editor/utils/const'; defineOptions({ name: 'MFieldsUISelect', @@ -60,14 +61,14 @@ const props = defineProps>(); const emit = defineEmits(['change']); -const services = inject('services'); +const { editorService, uiService, stageOverlayService } = useServices(); const mForm = inject('mForm'); + const val = computed(() => props.model[props.name]); const uiSelectMode = ref(false); const cancelHandler = () => { - if (!services?.uiService) return; - services.uiService.set('uiSelectMode', false); + uiService.set('uiSelectMode', false); uiSelectMode.value = false; globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener); }; @@ -89,13 +90,12 @@ const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => { }; const toName = computed(() => { - const config = services?.editorService.getNodeById(val.value); + const config = editorService.getNodeById(val.value); return config?.name || ''; }); const startSelect = () => { - if (!services?.uiService) return; - services.uiService.set('uiSelectMode', true); + uiService.set('uiSelectMode', true); uiSelectMode.value = true; globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener); }; @@ -109,24 +109,21 @@ const deleteHandler = () => { }; const selectNode = async (id: Id) => { - if (!services) return; - await services.editorService.select(id); - services.editorService.get('stage')?.select(id); - services.stageOverlayService.get('stage')?.select(id); + await editorService.select(id); + editorService.get('stage')?.select(id); + stageOverlayService.get('stage')?.select(id); }; const highlight = throttle((id: Id) => { - if (!services) return; - services.editorService.highlight(id); - services.editorService.get('stage')?.highlight(id); - services.stageOverlayService.get('stage')?.highlight(id); + editorService.highlight(id); + editorService.get('stage')?.highlight(id); + stageOverlayService.get('stage')?.highlight(id); }, 150); const unhighlight = () => { - if (!services) return; - services.editorService.set('highlightNode', null); - services.editorService.get('stage')?.clearHighlight(); - services.stageOverlayService.get('stage')?.clearHighlight(); + editorService.set('highlightNode', null); + editorService.get('stage')?.clearHighlight(); + stageOverlayService.get('stage')?.clearHighlight(); }; diff --git a/packages/editor/src/hooks/index.ts b/packages/editor/src/hooks/index.ts index 8b56bc7e..47a587b5 100644 --- a/packages/editor/src/hooks/index.ts +++ b/packages/editor/src/hooks/index.ts @@ -28,3 +28,4 @@ export * from './use-next-float-box-position'; export * from './use-node-status'; export * from './use-stage'; export * from './use-window-rect'; +export * from './use-services'; diff --git a/packages/editor/src/hooks/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts index a32afb67..d644a25b 100644 --- a/packages/editor/src/hooks/use-code-block-edit.ts +++ b/packages/editor/src/hooks/use-code-block-edit.ts @@ -5,20 +5,15 @@ import type { CodeBlockContent } from '@tmagic/core'; import { tMagicMessage } from '@tmagic/design'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; -import type { CodeBlockService } from '@editor/services/codeBlock'; +import type { Services } from '@editor/type'; -export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => { +export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService']) => { const codeConfig = ref(); const codeId = ref(); const codeBlockEditorRef = useTemplateRef>('codeBlockEditor'); // 新增代码块 const createCodeBlock = async () => { - if (!codeBlockService) { - tMagicMessage.error('新增代码块失败'); - return; - } - codeConfig.value = { name: '', content: `({app, params, flowState}) => {\n // place your code here\n}`, @@ -34,7 +29,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => { // 编辑代码块 const editCode = async (id: string) => { - const codeBlock = await codeBlockService?.getCodeContentById(id); + const codeBlock = await codeBlockService.getCodeContentById(id); if (!codeBlock) { tMagicMessage.error('获取代码块内容失败'); @@ -59,13 +54,13 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => { // 删除代码块 const deleteCode = async (key: string) => { - codeBlockService?.deleteCodeDslByIds([key]); + codeBlockService.deleteCodeDslByIds([key]); }; const submitCodeBlockHandler = async (values: CodeBlockContent) => { if (!codeId.value) return; - await codeBlockService?.setCodeDslById(codeId.value, values); + await codeBlockService.setCodeDslById(codeId.value, values); codeBlockEditorRef.value?.hide(); }; diff --git a/packages/editor/src/hooks/use-data-source-edit.ts b/packages/editor/src/hooks/use-data-source-edit.ts index 8c9b0d19..96954cf8 100644 --- a/packages/editor/src/hooks/use-data-source-edit.ts +++ b/packages/editor/src/hooks/use-data-source-edit.ts @@ -4,20 +4,20 @@ import type { DataSourceSchema } from '@tmagic/core'; import type { ContainerChangeEventData } from '@tmagic/form'; import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue'; -import type { DataSourceService } from '@editor/services/dataSource'; +import type { Services } from '@editor/type'; -export const useDataSourceEdit = (dataSourceService?: DataSourceService) => { +export const useDataSourceEdit = (dataSourceService: Services['dataSourceService']) => { const dialogTitle = ref(''); const editDialog = ref>(); const dataSourceValues = ref>({}); - const editable = computed(() => dataSourceService?.get('editable') ?? true); + const editable = computed(() => dataSourceService.get('editable')); const editHandler = (id: string) => { if (!editDialog.value) return; dataSourceValues.value = { - ...dataSourceService?.getDataSourceById(id), + ...(dataSourceService.getDataSourceById(id) || {}), }; dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`; @@ -27,9 +27,9 @@ export const useDataSourceEdit = (dataSourceService?: DataSourceService) => { const submitDataSourceHandler = (value: DataSourceSchema, eventData: ContainerChangeEventData) => { if (value.id) { - dataSourceService?.update(value, { changeRecords: eventData.changeRecords }); + dataSourceService.update(value, { changeRecords: eventData.changeRecords }); } else { - dataSourceService?.add(value); + dataSourceService.add(value); } editDialog.value?.hide(); diff --git a/packages/editor/src/hooks/use-editor-content-height.ts b/packages/editor/src/hooks/use-editor-content-height.ts index d582a9ee..bf5e55a1 100644 --- a/packages/editor/src/hooks/use-editor-content-height.ts +++ b/packages/editor/src/hooks/use-editor-content-height.ts @@ -1,11 +1,11 @@ -import { computed, inject, ref, watch } from 'vue'; +import { computed, ref, watch } from 'vue'; -import type { Services } from '@editor/type'; +import { useServices } from './use-services'; export const useEditorContentHeight = () => { - const services = inject('services'); - const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0); - const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0); + const { uiService } = useServices(); + const frameworkHeight = computed(() => uiService.get('frameworkRect').height); + const navMenuHeight = computed(() => uiService.get('navMenuRect').height); const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value); const height = ref(0); diff --git a/packages/editor/src/hooks/use-float-box.ts b/packages/editor/src/hooks/use-float-box.ts index c212d64a..832d4215 100644 --- a/packages/editor/src/hooks/use-float-box.ts +++ b/packages/editor/src/hooks/use-float-box.ts @@ -1,6 +1,6 @@ -import { computed, ComputedRef, inject, onBeforeUnmount, ref, watch } from 'vue'; +import { computed, ComputedRef, onBeforeUnmount, ref, watch } from 'vue'; -import type { Services } from '@editor/type'; +import { useServices } from './use-services'; interface State { status: boolean; @@ -9,7 +9,7 @@ interface State { } export const useFloatBox = (slideKeys: ComputedRef) => { - const services = inject('services'); + const { uiService } = useServices(); const floatBoxStates = ref<{ [key in (typeof slideKeys.value)[number]]: State; @@ -57,10 +57,10 @@ export const useFloatBox = (slideKeys: ComputedRef) => { Math.abs(startOffset.x - e.clientX) > effectiveDistance || Math.abs(startOffset.y - e.clientY) > effectiveDistance ) { - const navMenuRect = services?.uiService?.get('navMenuRect'); + const navMenuRect = uiService.get('navMenuRect'); floatBoxStates.value[key] = { left: e.clientX, - top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0), + top: navMenuRect.top + navMenuRect.height, status: true, }; } diff --git a/packages/editor/src/hooks/use-next-float-box-position.ts b/packages/editor/src/hooks/use-next-float-box-position.ts index b4eb98f4..6bba47ef 100644 --- a/packages/editor/src/hooks/use-next-float-box-position.ts +++ b/packages/editor/src/hooks/use-next-float-box-position.ts @@ -1,24 +1,24 @@ -import { Ref, ref } from 'vue'; +import { type Ref, ref } from 'vue'; -import { UiService } from '@editor/services/ui'; +import type { Services } from '@editor/type'; -export const useNextFloatBoxPosition = (uiService?: UiService, parent?: Ref) => { +export const useNextFloatBoxPosition = (uiService: Services['uiService'], parent?: Ref) => { const boxPosition = ref({ left: 0, top: 0, }); const calcBoxPosition = () => { - const columnWidth = uiService?.get('columnWidth'); - const navMenuRect = uiService?.get('navMenuRect'); - let left = columnWidth?.left ?? 0; + const columnWidth = uiService.get('columnWidth'); + const navMenuRect = uiService.get('navMenuRect'); + let left = columnWidth.left ?? 0; if (parent?.value) { - const rect = parent?.value?.getBoundingClientRect(); - left = (rect?.left ?? 0) + (rect?.width ?? 0); + const rect = parent.value.getBoundingClientRect(); + left = rect.left + rect.width; } boxPosition.value = { left, - top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0), + top: navMenuRect.top + navMenuRect.height, }; }; diff --git a/packages/editor/src/hooks/use-services.ts b/packages/editor/src/hooks/use-services.ts new file mode 100644 index 00000000..2308fdd9 --- /dev/null +++ b/packages/editor/src/hooks/use-services.ts @@ -0,0 +1,13 @@ +import { inject } from 'vue'; + +import type { Services } from '@editor/type'; + +export const useServices = () => { + const services = inject('services'); + + if (!services) { + throw new Error('services is required'); + } + + return services; +}; diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts index ebd93637..ca819019 100644 --- a/packages/editor/src/hooks/use-stage.ts +++ b/packages/editor/src/hooks/use-stage.ts @@ -6,12 +6,8 @@ import { getIdFromEl } from '@tmagic/utils'; import editorService from '@editor/services/editor'; import uiService from '@editor/services/ui'; -import { - H_GUIDE_LINE_STORAGE_KEY, - StageOptions, - UI_SELECT_MODE_EVENT_NAME, - V_GUIDE_LINE_STORAGE_KEY, -} from '@editor/type'; +import type { StageOptions } from '@editor/type'; +import { H_GUIDE_LINE_STORAGE_KEY, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY } from '@editor/utils/const'; import { getGuideLineFromCache } from '@editor/utils/editor'; const root = computed(() => editorService.get('root')); diff --git a/packages/editor/src/layouts/AddPageBox.vue b/packages/editor/src/layouts/AddPageBox.vue index e4f23b78..73f47c0d 100644 --- a/packages/editor/src/layouts/AddPageBox.vue +++ b/packages/editor/src/layouts/AddPageBox.vue @@ -19,13 +19,13 @@ diff --git a/packages/editor/src/layouts/props-panel/FormPanel.vue b/packages/editor/src/layouts/props-panel/FormPanel.vue index a3f378ab..65c03a6f 100644 --- a/packages/editor/src/layouts/props-panel/FormPanel.vue +++ b/packages/editor/src/layouts/props-panel/FormPanel.vue @@ -51,7 +51,7 @@ import { MForm } from '@tmagic/form'; import MIcon from '@editor/components/Icon.vue'; import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'; -import type { Services } from '@editor/type'; +import { useServices } from '@editor/hooks/use-services'; import CodeEditor from '../CodeEditor.vue'; @@ -80,13 +80,15 @@ const emit = defineEmits<{ mounted: [internalInstance: any]; }>(); -const services = inject('services'); +const services = useServices(); +const { editorService, uiService } = services; + const codeOptions = inject('codeOptions', {}); const showSrc = ref(false); -const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small'); +const propsPanelSize = computed(() => uiService.get('propsPanelSize') || 'small'); const { height: editorContentHeight } = useEditorContentHeight(); -const stage = computed(() => services?.editorService.get('stage')); +const stage = computed(() => editorService.get('stage')); const configFormRef = useTemplateRef>('configForm'); diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue index a2556777..c7f3fcaf 100644 --- a/packages/editor/src/layouts/props-panel/PropsPanel.vue +++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue @@ -52,7 +52,7 @@ diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue index 06d815e8..95a71876 100644 --- a/packages/editor/src/layouts/workspace/Workspace.vue +++ b/packages/editor/src/layouts/workspace/Workspace.vue @@ -19,14 +19,8 @@ diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue index 917724d2..21df53b7 100644 --- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue +++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue @@ -22,7 +22,7 @@ diff --git a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue index e85639e0..b19a0e41 100644 --- a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue +++ b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue @@ -13,18 +13,19 @@ import { CloseBold } from '@element-plus/icons-vue'; import { TMagicIcon } from '@tmagic/design'; -import type { Services, StageOptions } from '@editor/type'; +import { useServices } from '@editor/hooks/use-services'; +import type { StageOptions } from '@editor/type'; -const services = inject('services'); +const { stageOverlayService, editorService } = useServices(); const stageOptions = inject('stageOptions'); const stageOverlayEl = useTemplateRef('stageOverlay'); -const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible')); -const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0); -const wrapHeight = computed(() => services?.stageOverlayService.get('wrapHeight') || 0); -const stage = computed(() => services?.editorService.get('stage')); +const stageOverlayVisible = computed(() => stageOverlayService.get('stageOverlayVisible')); +const wrapWidth = computed(() => stageOverlayService.get('wrapWidth')); +const wrapHeight = computed(() => stageOverlayService.get('wrapHeight')); +const stage = computed(() => editorService.get('stage')); const style = computed(() => ({ width: `${wrapWidth.value}px`, @@ -35,18 +36,16 @@ watch(stage, (stage) => { if (stage) { stage.on('dblclick', async (event: MouseEvent) => { const el = (await stage.actionManager?.getElementFromPoint(event)) || null; - services?.stageOverlayService.openOverlay(el); + stageOverlayService.openOverlay(el); }); } else { - services?.stageOverlayService.closeOverlay(); + stageOverlayService.closeOverlay(); } }); watch(stageOverlayEl, (stageOverlay) => { - if (!services) return; - - const subStage = services.stageOverlayService.createStage(stageOptions); - services?.stageOverlayService.set('stage', subStage); + const subStage = stageOverlayService.createStage(stageOptions); + stageOverlayService.set('stage', subStage); if (stageOverlay && subStage) { subStage.mount(stageOverlay); @@ -56,18 +55,18 @@ watch(stageOverlayEl, (stageOverlay) => { const { contentWindow } = renderer!; mask?.showRule(false); - services?.stageOverlayService.updateOverlay(); + stageOverlayService.updateOverlay(); contentWindow?.magic.onRuntimeReady({}); } }); onBeforeUnmount(() => { - services?.stageOverlayService.get('stage')?.destroy(); - services?.stageOverlayService.set('stage', null); + stageOverlayService.get('stage')?.destroy(); + stageOverlayService.set('stage', null); }); const closeOverlayHandler = () => { - services?.stageOverlayService.closeOverlay(); + stageOverlayService.closeOverlay(); }; diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue index 13121e1b..c1f15520 100644 --- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue +++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue @@ -3,15 +3,16 @@