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 { 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));
};
}

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 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[] = [];
/** 布局方式：流式布局、绝对定位、固定定位 */

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

@ -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';

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

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