From 019cfc7e93dded2ac69ea53c891e97d888bb4c10 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 26 May 2022 19:29:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage):=20=E6=9C=AC=E5=9C=B0=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E5=8F=82=E8=80=83=E7=BA=BF=EF=BC=8C=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B8=8D=E4=BC=9A=E6=B8=85=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/Rule.ts            | 18 +++++++++++++-----
 packages/stage/src/StageDragResize.ts |  6 +++---
 packages/stage/src/const.ts           |  3 +++
 packages/stage/src/util.ts            | 22 +++++++++++++++++++++-
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/stage/src/Rule.ts b/packages/stage/src/Rule.ts
index 0aeb83a8..5493416b 100644
--- a/packages/stage/src/Rule.ts
+++ b/packages/stage/src/Rule.ts
@@ -2,13 +2,14 @@ import EventEmitter from 'events';
 
 import Guides, { GuidesEvents } from '@scena/guides';
 
-import { GuidesType } from './const';
+import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, V_GUIDE_LINE_STORAGE_KEY } from './const';
+import { getGuideLineFromCache } from './util';
 
 export default class Rule extends EventEmitter {
   public hGuides: Guides;
   public vGuides: Guides;
-  public horizontalGuidelines: number[] = [];
-  public verticalGuidelines: number[] = [];
+  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
+  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
 
   private container: HTMLDivElement;
   private containerResizeObserver: ResizeObserver;
@@ -17,8 +18,8 @@ export default class Rule extends EventEmitter {
     super();
 
     this.container = container;
-    this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
-    this.vGuides = this.createGuides(GuidesType.VERTICAL);
+    this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+    this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
 
     this.hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler);
     this.vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler);
@@ -68,6 +69,9 @@ export default class Rule extends EventEmitter {
       type: GuidesType.HORIZONTAL,
       guides: [],
     });
+
+    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, '[]');
+    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, '[]');
   }
 
   /**
@@ -138,6 +142,8 @@ export default class Rule extends EventEmitter {
       type: GuidesType.HORIZONTAL,
       guides: this.horizontalGuidelines,
     });
+
+    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
   };
 
   private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
@@ -146,5 +152,7 @@ export default class Rule extends EventEmitter {
       type: GuidesType.VERTICAL,
       guides: this.verticalGuidelines,
     });
+
+    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
   };
 }
diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts
index 3cd4ba79..31ef96f6 100644
--- a/packages/stage/src/StageDragResize.ts
+++ b/packages/stage/src/StageDragResize.ts
@@ -26,7 +26,7 @@ import MoveableHelper from 'moveable-helper';
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
 import StageCore from './StageCore';
 import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
-import { getAbsolutePosition, getMode, getOffset } from './util';
+import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -52,9 +52,9 @@ export default class StageDragResize extends EventEmitter {
   /** Moveable拖拽类实例 */
   public moveable?: Moveable;
   /** 水平参考线 */
-  public horizontalGuidelines: number[] = [];
+  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
   /** 垂直参考线 */
-  public verticalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
   /** 对齐元素集合 */
   public elementGuidelines: HTMLElement[] = [];
   /** 布局方式：流式布局、绝对定位、固定定位 */
diff --git a/packages/stage/src/const.ts b/packages/stage/src/const.ts
index 268e4d28..99dac45c 100644
--- a/packages/stage/src/const.ts
+++ b/packages/stage/src/const.ts
@@ -66,3 +66,6 @@ export enum Mode {
 
 /** 选中节点的class name */
 export const SELECTED_CLASS = 'tmagic-stage-selected-area';
+
+export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
+export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';
diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts
index 83523367..b09b585b 100644
--- a/packages/stage/src/util.ts
+++ b/packages/stage/src/util.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Mode, SELECTED_CLASS } from './const';
+import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, Mode, SELECTED_CLASS, V_GUIDE_LINE_STORAGE_KEY } from './const';
 import type { Offset } from './types';
 
 const getParents = (el: Element, relative: Element) => {
@@ -184,3 +184,23 @@ export const addSelectedClassName = (el: Element, doc: Document) => {
     item.classList.add(`${SELECTED_CLASS}-parents`);
   });
 };
+
+export const getGuideLineFromCache = (type: GuidesType): number[] => {
+  const key = {
+    [GuidesType.HORIZONTAL]: H_GUIDE_LINE_STORAGE_KEY,
+    [GuidesType.VERTICAL]: V_GUIDE_LINE_STORAGE_KEY,
+  }[type];
+
+  if (!key) return [];
+
+  const guideLineCacheData = globalThis.localStorage.getItem(key);
+  if (guideLineCacheData) {
+    try {
+      return JSON.parse(guideLineCacheData) || [];
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return [];
+};