@tmagic/editor 1.0.0-rc.12 → 1.0.0-rc.13

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

@@ -206,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

@@ -37,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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.12",
+  "version": "1.0.0-rc.13",
   "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.12",
-    "@tmagic/form": "1.0.0-rc.12",
-    "@tmagic/schema": "1.0.0-rc.12",
-    "@tmagic/stage": "1.0.0-rc.12",
-    "@tmagic/utils": "1.0.0-rc.12",
+    "@tmagic/core": "1.0.0-rc.13",
+    "@tmagic/form": "1.0.0-rc.13",
+    "@tmagic/schema": "1.0.0-rc.13",
+    "@tmagic/stage": "1.0.0-rc.13",
+    "@tmagic/utils": "1.0.0-rc.13",
     "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.12",
+    "@tmagic/form": "1.0.0-rc.13",
     "element-plus": "^2.2.0",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"

package/src/layouts/workspace/Stage.vue

@@ -36,11 +36,18 @@ import {
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MNode, MPage } from '@tmagic/schema';
-import type { 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, StageOptions, 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';
 
@@ -70,6 +77,8 @@ 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;
 
@@ -99,6 +108,11 @@ export default defineComponent({
 
       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);
       });
@@ -115,8 +129,19 @@ 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;

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/type.ts

@@ -263,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 [];
+};