@tmagic/editor 1.0.0-rc.7 → 1.0.0

package/dist/types/src/Editor.vue.d.ts

@@ -69,6 +69,7 @@ declare const _default: DefineComponent<{
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
     };
     stageRect: {
         type: PropType<StageRect>;
@@ -77,6 +78,9 @@ declare const _default: DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    updateDragEl: {
+        type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
+    };
 }, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
@@ -142,6 +146,7 @@ declare const _default: DefineComponent<{
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
     };
     stageRect: {
         type: PropType<StageRect>;
@@ -150,6 +155,9 @@ declare const _default: DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    updateDragEl: {
+        type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
+    };
 }>> & {
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -157,12 +165,13 @@ declare const _default: DefineComponent<{
     menu: MenuBarData;
     layerContentMenu: MenuItem[];
     stageContentMenu: MenuItem[];
-    autoScrollIntoView: boolean;
     codeOptions: Record<string, any>;
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
+    autoScrollIntoView: boolean;
     propsConfigs: Record<string, FormConfig>;
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;
+    canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
 }>;
 export default _default;

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,35 +1,7 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 import type { MPage } from '@tmagic/schema';
-import type { MoveableOptions } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
-declare const _default: DefineComponent<{
-    runtimeUrl: StringConstructor;
-    autoScrollIntoView: BooleanConstructor;
-    render: {
-        type: PropType<() => HTMLDivElement>;
-    };
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-    };
-}, {
+declare const _default: DefineComponent<{}, {
     workspace: Ref<HTMLDivElement | undefined>;
     page: ComputedRef<MPage | undefined>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
-    runtimeUrl: StringConstructor;
-    autoScrollIntoView: BooleanConstructor;
-    render: {
-        type: PropType<() => HTMLDivElement>;
-    };
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-    };
-}>>, {
-    autoScrollIntoView: boolean;
-}>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/services/editor.d.ts

@@ -23,21 +23,24 @@ declare class Editor extends BaseService {
     /**
      * 根据id获取组件、组件的父组件以及组件所属的页面节点
      * @param {number | string} id 组件id
+     * @param {boolean} raw 是否使用toRaw
      * @returns {EditorNodeInfo}
      */
-    getNodeInfo(id: Id): EditorNodeInfo;
+    getNodeInfo(id: Id, raw?: boolean): EditorNodeInfo;
     /**
      * 根据ID获取指点节点配置
      * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
      * @returns 组件节点配置
      */
-    getNodeById(id: Id): MNode | undefined;
+    getNodeById(id: Id, raw?: boolean): MNode | undefined;
     /**
      * 根据ID获取指点节点的父节点配置
      * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
      * @returns 指点组件的父节点配置
      */
-    getParentById(id: Id): MContainer | undefined;
+    getParentById(id: Id, raw?: boolean): MContainer | undefined;
     /**
      * 只有容器拥有布局
      */

package/dist/types/src/services/props.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MNode } from '@tmagic/schema';
+import type { MNode, MPage } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
@@ -29,7 +29,13 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string, defaultValue?: {}): Promise<any>;
+    getPropsValue(type: string, defaultValue?: Record<string, any>): Promise<any>;
+    createId(type: string | number): Promise<string>;
+    /**
+     * 将组件与组件的子元素配置中的id都设置成一个新的ID
+     * @param {Object} config 组件配置
+     */
+    setNewItemId(config: MNode, parent?: MPage): Promise<void>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/type.d.ts

@@ -2,6 +2,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -21,6 +22,14 @@ export interface Services {
     componentListService: ComponentListService;
     uiService: UiService;
 }
+export interface StageOptions {
+    runtimeUrl: string;
+    autoScrollIntoView: boolean;
+    render: () => HTMLDivElement;
+    moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+    canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    updateDragEl: (el: HTMLDivElement) => void;
+}
 export interface StoreState {
     root: MApp | null;
     page: MPage | null;
@@ -197,3 +206,5 @@ export declare enum Layout {
 export declare enum Keys {
     ESCAPE = "Space"
 }
+export declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+export declare const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";

package/dist/types/src/utils/editor.d.ts

@@ -2,7 +2,6 @@ import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-export declare const generateId: (type: string | number) => string;
 /**
  * 获取所有页面配置
  * @param app DSL跟节点
@@ -27,11 +26,6 @@ export declare const generatePageName: (pageNameList: string[]) => string;
  * @returns {string}
  */
 export declare const generatePageNameByApp: (app: MApp) => string;
-/**
- * 将组件与组件的子元素配置中的id都设置成一个新的ID
- * @param {Object} config 组件配置
- */
-export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) => void;
 /**
  * @param {Object} node
  * @returns {boolean}
@@ -43,3 +37,4 @@ export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNo
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
 export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;
+export declare const getGuideLineFromCache: (key: string) => number[];

package/dist/types/src/utils/props.d.ts

@@ -41,9 +41,18 @@ export declare const DEFAULT_CONFIG: FormConfig;
  * @param type 组件类型
  * @returns Object
  */
-export declare const getDefaultPropsValue: (type: string) => {
+export declare const getDefaultPropsValue: (type: string, id: string) => {
     type: string;
     id: string;
+    layout: string;
     style: {};
     name: string;
+    items: never[];
+} | {
+    type: string;
+    id: string;
+    style: {};
+    name: string;
+    layout?: undefined;
+    items?: undefined;
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -43,11 +43,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.0-rc.7",
-    "@tmagic/form": "1.0.0-rc.7",
-    "@tmagic/schema": "1.0.0-rc.7",
-    "@tmagic/stage": "1.0.0-rc.7",
-    "@tmagic/utils": "1.0.0-rc.7",
+    "@tmagic/core": "1.0.0",
+    "@tmagic/form": "1.0.0",
+    "@tmagic/schema": "1.0.0",
+    "@tmagic/stage": "1.0.0",
+    "@tmagic/utils": "1.0.0",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -60,7 +60,7 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.0-rc.7",
+    "@tmagic/form": "1.0.0",
     "element-plus": "^2.2.0",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"

package/src/Editor.vue

@@ -12,13 +12,7 @@
 
     <template #workspace :editorService="editorService">
       <slot name="workspace">
-        <workspace
-          :runtime-url="runtimeUrl"
-          :auto-scroll-into-view="autoScrollIntoView"
-          :render="render"
-          :moveable-options="moveableOptions"
-          :can-select="canSelect"
-        >
+        <workspace>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
           <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
           <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
@@ -37,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, PropType, provide, toRaw, watch } from 'vue';
+import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch } from 'vue';
 
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
@@ -145,6 +139,7 @@ export default defineComponent({
 
     canSelect: {
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => Boolean(el.id),
     },
 
     stageRect: {
@@ -155,6 +150,10 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+
+    updateDragEl: {
+      type: Function as PropType<(el: HTMLDivElement, target: HTMLElement) => void>,
+    },
   },
 
   emits: ['props-panel-mounted', 'update:modelValue'],
@@ -249,6 +248,17 @@ export default defineComponent({
 
     provide('layerContentMenu', props.layerContentMenu);
     provide('stageContentMenu', props.stageContentMenu);
+    provide(
+      'stageOptions',
+      reactive({
+        runtimeUrl: props.runtimeUrl,
+        autoScrollIntoView: props.autoScrollIntoView,
+        render: props.render,
+        moveableOptions: props.moveableOptions,
+        canSelect: props.canSelect,
+        updateDragEl: props.updateDragEl,
+      }),
+    );
 
     return services;
   },

package/src/layouts/workspace/Stage.vue

@@ -28,7 +28,6 @@ import {
   markRaw,
   onMounted,
   onUnmounted,
-  PropType,
   ref,
   toRaw,
   watch,
@@ -37,11 +36,18 @@ import {
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
+import StageCore, { GuidesType, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
-import { Layout, Services, StageRect } from '@editor/type';
+import {
+  H_GUIDE_LINE_STORAGE_KEY,
+  Layout,
+  Services,
+  StageOptions,
+  StageRect,
+  V_GUIDE_LINE_STORAGE_KEY,
+} from '@editor/type';
+import { getGuideLineFromCache } from '@editor/utils';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -53,29 +59,9 @@ export default defineComponent({
     ScrollViewer,
   },
 
-  props: {
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-      default: (el: HTMLElement) => Boolean(el.id),
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-      default: () => (core?: StageCore) => ({
-        container: core?.renderer?.contentWindow?.document.getElementById('app'),
-      }),
-    },
-  },
-
-  setup(props) {
+  setup() {
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
 
     const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
@@ -91,19 +77,21 @@ export default defineComponent({
     let stage: StageCore | null = null;
     let runtime: Runtime | null = null;
 
+    const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
+
     watchEffect(() => {
       if (stage) return;
 
       if (!stageContainer.value) return;
-      if (!(props.runtimeUrl || props.render) || !root.value) return;
+      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
       stage = new StageCore({
-        render: props.render,
-        runtimeUrl: props.runtimeUrl,
+        render: stageOptions.render,
+        runtimeUrl: stageOptions.runtimeUrl,
         zoom: zoom.value,
-        autoScrollIntoView: props.autoScrollIntoView,
+        autoScrollIntoView: stageOptions.autoScrollIntoView,
         canSelect: (el, event, stop) => {
-          const elCanSelect = props.canSelect(el);
+          const elCanSelect = stageOptions.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
           if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
             document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
@@ -112,13 +100,19 @@ export default defineComponent({
 
           return elCanSelect;
         },
-        moveableOptions: props.moveableOptions,
+        moveableOptions: stageOptions.moveableOptions,
+        updateDragEl: stageOptions.updateDragEl,
       });
 
       services?.editorService.set('stage', markRaw(stage));
 
       stage?.mount(stageContainer.value);
 
+      stage.mask.setGuides([
+        getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+        getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
+      ]);
+
       stage?.on('select', (el: HTMLElement) => {
         services?.editorService.select(el.id);
       });
@@ -135,15 +129,26 @@ export default defineComponent({
         services?.editorService.sort(ev.src, ev.dist);
       });
 
-      stage?.on('changeGuides', () => {
+      stage?.on('changeGuides', (e) => {
         services?.uiService.set('showGuides', true);
+
+        if (!root.value || !page.value) return;
+
+        const storageKey = getGuideLineKey(
+          e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
+        );
+        if (e.guides.length) {
+          globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+        } else {
+          globalThis.localStorage.removeItem(storageKey);
+        }
       });
 
       if (!node.value?.id) return;
       stage?.on('runtime-ready', (rt) => {
         runtime = rt;
         // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
         page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
           node.value && stage?.select(toRaw(node.value.id));
@@ -158,7 +163,7 @@ export default defineComponent({
 
     watch(root, (root) => {
       if (runtime && root) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+        runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
       }
     });
 

package/src/layouts/workspace/Workspace.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="m-editor-workspace" tabindex="1" ref="workspace">
-    <magic-stage
-      :key="page?.id"
-      :runtime-url="runtimeUrl"
-      :auto-scroll-into-view="autoScrollIntoView"
-      :render="render"
-      :moveable-options="moveableOptions"
-      :can-select="canSelect"
-    ></magic-stage>
+    <magic-stage :key="page?.id"></magic-stage>
 
     <slot name="workspace-content"></slot>
 
@@ -19,12 +12,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
 import type { MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
 import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
@@ -40,23 +31,6 @@ export default defineComponent({
     MagicStage,
   },
 
-  props: {
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-    },
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-    },
-  },
-
   setup() {
     const services = inject<Services>('services');
     const workspace = ref<HTMLDivElement>();

package/src/services/editor.ts

@@ -108,10 +108,14 @@ class Editor extends BaseService {
   /**
    * 根据id获取组件、组件的父组件以及组件所属的页面节点
    * @param {number | string} id 组件id
+   * @param {boolean} raw 是否使用toRaw
    * @returns {EditorNodeInfo}
    */
-  public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = toRaw(this.get<MApp | null>('root'));
+  public getNodeInfo(id: Id, raw = true): EditorNodeInfo {
+    let root = this.get<MApp | null>('root');
+    if (raw) {
+      root = toRaw(root);
+    }
     if (!root) return {};
 
     if (id === root.id) {
@@ -141,21 +145,23 @@ class Editor extends BaseService {
   /**
    * 根据ID获取指点节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 组件节点配置
    */
-  public getNodeById(id: Id): MNode | undefined {
-    const { node } = this.getNodeInfo(id);
+  public getNodeById(id: Id, raw = true): MNode | undefined {
+    const { node } = this.getNodeInfo(id, raw);
     return node;
   }
 
   /**
    * 根据ID获取指点节点的父节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 指点组件的父节点配置
    */
-  public getParentById(id: Id): MContainer | undefined {
+  public getParentById(id: Id, raw = true): MContainer | undefined {
     if (!this.get<MApp | null>('root')) return;
-    const { parent } = this.getNodeInfo(id);
+    const { parent } = this.getNodeInfo(id, raw);
     return parent;
   }
 
@@ -279,7 +285,7 @@ class Editor extends BaseService {
     } else if (curNode.items) {
       parentNode = curNode;
     } else {
-      parentNode = this.getParentById(curNode.id);
+      parentNode = this.getParentById(curNode.id, false);
     }
 
     if (!parentNode) throw new Error('未找到父元素');
@@ -332,7 +338,7 @@ class Editor extends BaseService {
 
     if (!root) throw new Error('没有root');
 
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -384,7 +390,7 @@ class Editor extends BaseService {
   public async update(config: MNode): Promise<MNode> {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
-    const info = this.getNodeInfo(config.id);
+    const info = this.getNodeInfo(config.id, false);
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 

package/src/services/ui.ts

@@ -26,7 +26,9 @@ import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor
 import BaseService from './BaseService';
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const MIN_LEFT_COLUMN_WIDTH = 45;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+const MIN_RIGHT_COLUMN_WIDTH = 1;
 
 const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
 
@@ -117,11 +119,11 @@ class Ui extends BaseService {
     };
 
     if (left) {
-      columnWidth.left = left;
+      columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
     }
 
     if (right) {
-      columnWidth.right = right;
+      columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
     }
 
     if (!center || center === 'auto') {

package/src/theme/page-bar.scss

@@ -25,6 +25,7 @@
     justify-items: center;
     align-items: center;
     background-color: #f3f3f3;
+    white-space: nowrap;
 
     &.active {
       background-color: #fff;

package/src/theme/workspace.scss

@@ -2,4 +2,8 @@
   height: 100%;
   width: 100%;
   user-select: none;
+
+  &:focus-visible {
+    outline: 0;
+  }
 }

package/src/type.ts

@@ -21,6 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from '@editor/services/componentList';
 import type { EditorService } from '@editor/services/editor';
@@ -45,6 +46,15 @@ export interface Services {
   uiService: UiService;
 }
 
+export interface StageOptions {
+  runtimeUrl: string;
+  autoScrollIntoView: boolean;
+  render: () => HTMLDivElement;
+  moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+  canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+  updateDragEl: (el: HTMLDivElement) => void;
+}
+
 export interface StoreState {
   root: MApp | null;
   page: MPage | null;
@@ -253,3 +263,6 @@ export enum Layout {
 export enum Keys {
   ESCAPE = 'Space',
 }
+
+export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
+export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';

package/src/utils/editor.ts

@@ -204,3 +204,18 @@ export const Fixed2Other = async (
 
   return toRelative(node);
 };
+
+export const getGuideLineFromCache = (key: string): number[] => {
+  if (!key) return [];
+
+  const guideLineCacheData = globalThis.localStorage.getItem(key);
+  if (guideLineCacheData) {
+    try {
+      return JSON.parse(guideLineCacheData) || [];
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return [];
+};