@tmagic/editor 1.5.7 → 1.5.8

package/src/fields/EventSelect.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
@@ -68,7 +68,8 @@ import type {
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
-import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig } from '@editor/type';
 import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
@@ -81,12 +82,7 @@ const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
 }>();
 
-const services = inject<Services>('services');
-
-const editorService = services?.editorService;
-const dataSourceService = services?.dataSourceService;
-const eventsService = services?.eventsService;
-const codeBlockService = services?.codeBlockService;
+const { editorService, dataSourceService, eventsService, codeBlockService } = useServices();
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
@@ -108,13 +104,11 @@ const eventNameConfig = computed(() => {
     options: (mForm: FormState, { formValue }: any) => {
       let events: EventOption[] | CascaderOption[] = [];
 
-      if (!eventsService || !dataSourceService) return events;
-
       if (props.config.src === 'component') {
         events = eventsService.getEvent(formValue.type);
 
         if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
-          const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+          const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
           if (pageFragment) {
             events = [
               {
@@ -185,7 +179,7 @@ const actionTypeConfig = computed(() => {
       {
         text: '代码',
         label: '代码',
-        disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
+        disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
         value: ActionType.CODE,
       },
       {
@@ -193,7 +187,7 @@ const actionTypeConfig = computed(() => {
         label: '数据源',
         disabled: !dataSourceService
           ?.get('dataSources')
-          ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
+          ?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length).length,
         value: ActionType.DATA_SOURCE,
       },
     ],
@@ -222,7 +216,7 @@ const compActionConfig = computed(() => {
     name: 'method',
     text: '动作',
     type: (mForm, { model }: any) => {
-      const to = editorService?.getNodeById(model.to);
+      const to = editorService.getNodeById(model.to);
 
       if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
         return 'cascader';
@@ -233,20 +227,20 @@ const compActionConfig = computed(() => {
     checkStrictly: () => props.config.src !== 'component',
     display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
-      const node = editorService?.getNodeById(model.to);
+      const node = editorService.getNodeById(model.to);
       if (!node?.type) return [];
 
       let methods: EventOption[] | CascaderOption[] = [];
 
-      methods = eventsService?.getMethod(node.type) || [];
+      methods = eventsService.getMethod(node.type);
 
       if (node.type === 'page-fragment-container' && node.pageFragmentId) {
-        const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+        const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
         if (pageFragment) {
           methods = [];
           pageFragment.items.forEach((node: MComponent | MContainer) => {
             traverseNode<MComponent | MContainer>(node, (node) => {
-              const nodeMethods = (node.type && eventsService?.getMethod(node.type)) || [];
+              const nodeMethods = (node.type && eventsService.getMethod(node.type)) || [];
 
               if (nodeMethods.length) {
                 methods.push({
@@ -277,7 +271,7 @@ const codeActionConfig = computed(() => {
     type: 'code-select-col',
     text: '代码块',
     name: 'codeId',
-    notEditable: () => !codeBlockService?.getEditStatus(),
+    notEditable: () => !codeBlockService.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -289,7 +283,7 @@ const dataSourceActionConfig = computed(() => {
     type: 'data-source-method-select',
     text: '数据源方法',
     name: 'dataSourceMethod',
-    notEditable: () => !services?.dataSourceService.get('editable'),
+    notEditable: () => !dataSourceService.get('editable'),
     display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
   };
   return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
@@ -305,7 +299,7 @@ const tableConfig = computed(() => ({
       label: '事件名',
       type: eventNameConfig.value.type,
       options: (mForm: FormState, { formValue }: any) =>
-        eventsService?.getEvent(formValue.type).map((option: any) => ({
+        eventsService.getEvent(formValue.type).map((option: any) => ({
           text: option.label,
           value: option.value,
         })),
@@ -320,10 +314,10 @@ const tableConfig = computed(() => ({
       label: '动作',
       type: compActionConfig.value.type,
       options: (mForm: FormState, { model }: any) => {
-        const node = editorService?.getNodeById(model.to);
+        const node = editorService.getNodeById(model.to);
         if (!node?.type) return [];
 
-        return eventsService?.getMethod(node.type).map((option: any) => ({
+        return eventsService.getMethod(node.type).map((option: any) => ({
           text: option.label,
           value: option.value,
         }));

package/src/fields/PageFragmentSelect.vue

@@ -16,27 +16,28 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { Id, NodeType } from '@tmagic/core';
 import { FieldProps } from '@tmagic/form';
 
 import Icon from '@editor/components/Icon.vue';
-import type { PageFragmentSelectConfig, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { PageFragmentSelectConfig } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsPageFragmentSelect',
 });
 
-const services = inject<Services>('services');
+const { editorService } = useServices();
 const emit = defineEmits(['change']);
 
 const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
   disabled: false,
 });
 const pageList = computed(() =>
-  services?.editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
+  editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
 );
 
 const selectConfig = {
@@ -58,6 +59,6 @@ const changeHandler = async () => {
 };
 
 const editPageFragment = (id: Id) => {
-  services?.editorService.select(id);
+  editorService.select(id);
 };
 </script>

package/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<FieldProps<{ type: 'ui-select' } & FormItem>>();
 
 const emit = defineEmits(['change']);
 
-const services = inject<Services>('services');
+const { editorService, uiService, stageOverlayService } = useServices();
 const mForm = inject<FormState>('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();
 };
 </script>
 

package/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';

package/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<CodeBlockContent>();
   const codeId = ref<string>();
   const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('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();
   };

package/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<InstanceType<typeof DataSourceConfigPanel>>();
   const dataSourceValues = ref<Record<string, any>>({});
 
-  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();

package/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>('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);

package/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<string[]>) => {
-  const services = inject<Services>('services');
+  const { uiService } = useServices();
 
   const floatBoxStates = ref<{
     [key in (typeof slideKeys.value)[number]]: State;
@@ -57,10 +57,10 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
       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,
       };
     }

package/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<HTMLDivElement | null>) => {
+export const useNextFloatBoxPosition = (uiService: Services['uiService'], parent?: Ref<HTMLDivElement | null>) => {
   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,
     };
   };
 

package/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>('services');
+
+  if (!services) {
+    throw new Error('services is required');
+  }
+
+  return services;
+};

package/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'));

package/src/layouts/AddPageBox.vue

@@ -19,13 +19,13 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, toRaw } from 'vue';
+import { toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 import { generatePageNameByApp } from '@editor/utils';
 
 defineOptions({
@@ -36,13 +36,9 @@ defineProps<{
   disabledPageFragment: boolean;
 }>();
 
-const services = inject<Services>('services');
+const { editorService } = useServices();
 
 const clickHandler = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
-  const { editorService } = services || {};
-
-  if (!editorService) return;
-
   const root = toRaw(editorService.get('root'));
   if (!root) throw new Error('root 不能为空');
 

package/src/layouts/Framework.vue

@@ -19,10 +19,10 @@
       right-class="m-editor-framework-right"
       :left="columnWidth.left"
       :right="columnWidth.right"
-      :min-left="200"
-      :min-right="300"
-      :min-center="400"
-      :width="frameworkRect?.width || 0"
+      :min-left="MIN_LEFT_COLUMN_WIDTH"
+      :min-right="MIN_RIGHT_COLUMN_WIDTH"
+      :min-center="MIN_CENTER_COLUMN_WIDTH"
+      :width="frameworkRect.width"
       @change="columnWidthChange"
     >
       <template #left>
@@ -65,11 +65,16 @@ import { computed, inject, onBeforeUnmount, onMounted, useTemplateRef, watch } f
 import type { MPage, MPageFragment } from '@tmagic/core';
 
 import SplitView from '@editor/components/SplitView.vue';
-import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import { Protocol } from '@editor/services/storage';
+import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import {
   DEFAULT_LEFT_COLUMN_WIDTH,
   LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  MIN_CENTER_COLUMN_WIDTH,
+  MIN_LEFT_COLUMN_WIDTH,
+  MIN_RIGHT_COLUMN_WIDTH,
   RIGHT_COLUMN_WIDTH_STORAGE_KEY,
 } from '@editor/utils/const';
 
@@ -90,53 +95,48 @@ defineProps<{
 }>();
 
 const codeOptions = inject('codeOptions', {});
-const { editorService, uiService } = inject<Services>('services') || {};
+const { editorService, uiService, storageService } = useServices();
 
 const contentEl = useTemplateRef<HTMLDivElement>('content');
 const splitViewRef = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
 
-const root = computed(() => editorService?.get('root'));
-const page = computed(() => editorService?.get('page'));
+const root = computed(() => editorService.get('root'));
+const page = computed(() => editorService.get('page'));
 
-const pageLength = computed(() => editorService?.get('pageLength') || 0);
-const showSrc = computed(() => uiService?.get('showSrc'));
+const pageLength = computed(() => editorService.get('pageLength') || 0);
+const showSrc = computed(() => uiService.get('showSrc'));
 
-const columnWidth = computed(
-  () =>
-    uiService?.get('columnWidth') || {
-      left: 0,
-      center: 0,
-      right: 0,
-    },
-);
+const columnWidth = computed(() => uiService.get('columnWidth'));
 
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
 });
 
 watch(
-  () => uiService?.get('hideSlideBar'),
+  () => uiService.get('hideSlideBar'),
   (hideSlideBar) => {
-    uiService?.set('columnWidth', {
+    uiService.set('columnWidth', {
       ...columnWidth.value,
       left: hideSlideBar
         ? 0
-        : Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+        : storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
+          DEFAULT_LEFT_COLUMN_WIDTH,
     });
   },
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
-  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
-  uiService?.set('columnWidth', columnW);
+  storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
+  storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnW.right, { protocol: Protocol.NUMBER });
+
+  uiService.set('columnWidth', columnW);
 };
 
-const frameworkRect = computed(() => uiService?.get('frameworkRect'));
+const frameworkRect = computed(() => uiService.get('frameworkRect'));
 
 const resizerObserver = new ResizeObserver((entries) => {
   const { contentRect } = entries[0];
-  uiService?.set('frameworkRect', {
+  uiService.set('frameworkRect', {
     width: contentRect.width,
     height: contentRect.height,
     left: contentRect.left,
@@ -157,7 +157,7 @@ onBeforeUnmount(() => {
 const saveCode = (value: string) => {
   try {
     const parseDSL = getEditorConfig('parseDSL');
-    editorService?.set('root', parseDSL(value));
+    editorService.set('root', parseDSL(value));
   } catch (e: any) {
     console.error(e);
   }