diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue index 25bd426e..7e538441 100644 --- a/packages/editor/src/layouts/workspace/Stage.vue +++ b/packages/editor/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; diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index 33113210..4dd7fece 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/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'; diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts index 915c0e90..a084366a 100644 --- a/packages/editor/src/utils/editor.ts +++ b/packages/editor/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 []; +}; diff --git a/packages/stage/src/Rule.ts b/packages/stage/src/Rule.ts index 5493416b..b30617e1 100644 --- a/packages/stage/src/Rule.ts +++ b/packages/stage/src/Rule.ts @@ -2,14 +2,13 @@ import EventEmitter from 'events'; import Guides, { GuidesEvents } from '@scena/guides'; -import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, V_GUIDE_LINE_STORAGE_KEY } from './const'; -import { getGuideLineFromCache } from './util'; +import { GuidesType } from './const'; export default class Rule extends EventEmitter { public hGuides: Guides; public vGuides: Guides; - public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL); - public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL); + public horizontalGuidelines: number[] = []; + public verticalGuidelines: number[] = []; private container: HTMLDivElement; private containerResizeObserver: ResizeObserver; @@ -28,6 +27,7 @@ export default class Rule extends EventEmitter { this.vGuides.resize(); this.hGuides.resize(); }); + this.containerResizeObserver.observe(this.container); } @@ -45,33 +45,34 @@ export default class Rule extends EventEmitter { }); } - /** - * 清空所有参考线 - */ - public clearGuides() { - this.horizontalGuidelines = []; - this.verticalGuidelines = []; - - this.vGuides.setState({ - defaultGuides: [], - }); + public setGuides([hLines, vLines]: [number[], number[]]) { + this.horizontalGuidelines = hLines; + this.verticalGuidelines = vLines; this.hGuides.setState({ - defaultGuides: [], + defaultGuides: hLines, }); - this.emit('changeGuides', { - type: GuidesType.VERTICAL, - guides: [], + this.vGuides.setState({ + defaultGuides: vLines, }); this.emit('changeGuides', { type: GuidesType.HORIZONTAL, - guides: [], + guides: hLines, }); - globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, '[]'); - globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, '[]'); + this.emit('changeGuides', { + type: GuidesType.VERTICAL, + guides: vLines, + }); + } + + /** + * 清空所有参考线 + */ + public clearGuides() { + this.setGuides([[], []]); } /** @@ -101,7 +102,7 @@ export default class Rule extends EventEmitter { } } - scrollRule(scrollTop: number) { + public scrollRule(scrollTop: number) { this.hGuides.scrollGuides(scrollTop); this.hGuides.scroll(0); @@ -142,8 +143,6 @@ 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']) => { @@ -152,7 +151,5 @@ 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 4f039423..3d6d4cdb 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, ZIndex } from './const'; import StageCore from './StageCore'; import type { SortEventData, StageDragResizeConfig } from './types'; -import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util'; +import { getAbsolutePosition, getMode, getOffset } from './util'; /** 拖动状态 */ enum ActionStatus { @@ -52,9 +52,9 @@ export default class StageDragResize extends EventEmitter { /** Moveable拖拽类实例 */ public moveable?: Moveable; /** 水平参考线 */ - public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL); + public horizontalGuidelines: number[] = []; /** 垂直参考线 */ - public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL); + public verticalGuidelines: number[] = []; /** 对齐元素集合 */ public elementGuidelines: HTMLElement[] = []; /** 布局方式：流式布局、绝对定位、固定定位 */ @@ -132,7 +132,9 @@ export default class StageDragResize extends EventEmitter { this.moveableOptions.verticalGuidelines = guidelines; } - this.updateMoveable(); + if (this.moveable) { + this.updateMoveable(); + } } public clearGuides() { diff --git a/packages/stage/src/const.ts b/packages/stage/src/const.ts index 4edd86d3..4befc1de 100644 --- a/packages/stage/src/const.ts +++ b/packages/stage/src/const.ts @@ -68,6 +68,3 @@ 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/index.ts b/packages/stage/src/index.ts index b7a11849..9184729b 100644 --- a/packages/stage/src/index.ts +++ b/packages/stage/src/index.ts @@ -23,4 +23,5 @@ export { default as StageRender } from './StageRender'; export { default as StageMask } from './StageMask'; export { default as StageDragResize } from './StageDragResize'; export * from './types'; +export * from './const'; export default StageCore; diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts index 7b8b5e64..e7f2a554 100644 --- a/packages/stage/src/util.ts +++ b/packages/stage/src/util.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, Mode, SELECTED_CLASS, V_GUIDE_LINE_STORAGE_KEY } from './const'; +import { Mode, SELECTED_CLASS } from './const'; import type { Offset } from './types'; const getParents = (el: Element, relative: Element) => { @@ -149,23 +149,3 @@ 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 []; -};