JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

feat(stage): 本地缓存参考线，刷新页面不会清空

Browse Source
This commit is contained in:
roymondchen 2022-05-26 19:29:55 +08:00 committed by jia000
parent ab4eaad0b7
commit 019cfc7e93
4 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/stage/src/Rule.ts
View File

@ -2,13 +2,14 @@ import EventEmitter from 'events';
import Guides, { GuidesEvents } from '@scena/guides'; 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 { export default class Rule extends EventEmitter {
public hGuides: Guides; public hGuides: Guides;
public vGuides: Guides; public vGuides: Guides;
public horizontalGuidelines: number[] = []; public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
public verticalGuidelines: number[] = []; public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
private container: HTMLDivElement; private container: HTMLDivElement;
private containerResizeObserver: ResizeObserver; private containerResizeObserver: ResizeObserver;
@ -17,8 +18,8 @@ export default class Rule extends EventEmitter {
super(); super();
this.container = container; this.container = container;
this.hGuides = this.createGuides(GuidesType.HORIZONTAL); this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
this.vGuides = this.createGuides(GuidesType.VERTICAL); this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
this.hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler); this.hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler);
this.vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler); this.vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler);
@ -68,6 +69,9 @@ export default class Rule extends EventEmitter {
type: GuidesType.HORIZONTAL, type: GuidesType.HORIZONTAL,
guides: [], 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, type: GuidesType.HORIZONTAL,
guides: this.horizontalGuidelines, guides: this.horizontalGuidelines,
}); });
globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
}; };
private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => { private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
@ -146,5 +152,7 @@ export default class Rule extends EventEmitter {
type: GuidesType.VERTICAL, type: GuidesType.VERTICAL,
guides: this.verticalGuidelines, guides: this.verticalGuidelines,
}); });
globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
}; };
} }

6
packages/stage/src/StageDragResize.ts
View File

@ -26,7 +26,7 @@ import MoveableHelper from 'moveable-helper';
import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const'; import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
import StageCore from './StageCore'; import StageCore from './StageCore';
import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types'; import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
import { getAbsolutePosition, getMode, getOffset } from './util'; import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
/** 拖动状态 */ /** 拖动状态 */
enum ActionStatus { enum ActionStatus {
@ -52,9 +52,9 @@ export default class StageDragResize extends EventEmitter {
/** Moveable拖拽类实例 */ /** Moveable拖拽类实例 */
public moveable?: 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[] = []; public elementGuidelines: HTMLElement[] = [];
/** 布局方式：流式布局、绝对定位、固定定位 */ /** 布局方式：流式布局、绝对定位、固定定位 */

3
packages/stage/src/const.ts
View File

@ -66,3 +66,6 @@ export enum Mode {
/** 选中节点的class name */ /** 选中节点的class name */
export const SELECTED_CLASS = 'tmagic-stage-selected-area'; export const SELECTED_CLASS = 'tmagic-stage-selected-area';
export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';

22
packages/stage/src/util.ts
View File

@ -16,7 +16,7 @@
* limitations under the License. * 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'; import type { Offset } from './types';
const getParents = (el: Element, relative: Element) => { const getParents = (el: Element, relative: Element) => {
@ -184,3 +184,23 @@ export const addSelectedClassName = (el: Element, doc: Document) => {
item.classList.add(`${SELECTED_CLASS}-parents`); 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 [];
};