@tmagic/stage 1.0.0-rc.1 → 1.0.0-rc.4

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

@@ -1,4 +1,5 @@
 import { MoveableOptions } from 'react-moveable/declaration/types';
+import Core from '@tmagic/core';
 import { Id, MApp, MNode } from '@tmagic/schema';
 import { GuidesType } from './const';
 import StageCore from './StageCore';
@@ -15,6 +16,7 @@ export declare type StageCoreConfig = {
     /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
     runtimeUrl?: string;
     render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+    autoScrollIntoView?: boolean;
 };
 export interface StageRenderConfig {
     core: StageCore;
@@ -62,6 +64,7 @@ export interface RemoveData {
     root: MApp;
 }
 export interface Runtime {
+    getApp?: () => Core;
     beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
     getSnapElements?: (el?: HTMLElement) => HTMLElement[];
     updateRootConfig: (config: MApp) => void;

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

@@ -1,4 +1,4 @@
-import { Mode } from './const';
+import { GuidesType, Mode } from './const';
 import type { Offset } from './types';
 export declare const getOffset: (el: HTMLElement) => Offset;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
@@ -19,4 +19,5 @@ export declare const createDiv: ({ className, cssText }: {
     cssText: string;
 }) => HTMLDivElement;
 export declare const removeSelectedClassName: (doc: Document) => void;
-export declare const addSelectedClassName: (el: Element) => void;
+export declare const addSelectedClassName: (el: Element, doc: Document) => void;
+export declare const getGuideLineFromCache: (type: GuidesType) => number[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.4",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,8 +27,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-rc.1",
-    "@tmagic/utils": "^1.0.0-rc.1",
+    "@tmagic/core": "^1.0.0-rc.4",
+    "@tmagic/schema": "^1.0.0-rc.4",
+    "@tmagic/utils": "^1.0.0-rc.4",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.29.4",
@@ -43,5 +44,5 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
   },
-  "gitHead": "3b647794d087888bfec9772f54356fa48c0b6d90"
+  "gitHead": "28d5ad4573a27fa240f5e7d0902d3368e8d936b6"
 }

package/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));
   };
 }

package/src/StageCore.ts

@@ -155,12 +155,17 @@ export default class StageCore extends EventEmitter {
 
     this.mask.setLayout(el);
     this.dr.select(el, event);
+
+    if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+      this.mask.intersectionObserver?.observe(el);
+    }
+
     this.selectedDom = el;
 
     if (this.renderer.contentWindow) {
       removeSelectedClassName(this.renderer.contentWindow.document);
       if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom);
+        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
       }
     }
   }

package/src/StageDragResize.ts

@@ -25,12 +25,16 @@ 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 type { Offset, SortEventData, StageDragResizeConfig } from './types';
+import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
 
+/** 拖动状态 */
 enum ActionStatus {
+  /** 开始拖动 */
   START = 'start',
+  /** 拖动中 */
   ING = 'ing',
+  /** 拖动结束 */
   END = 'end',
 }
 
@@ -39,17 +43,27 @@ enum ActionStatus {
  */
 export default class StageDragResize extends EventEmitter {
   public core: StageCore;
+  /** 画布容器 */
   public container: HTMLElement;
+  /** 目标节点 */
   public target?: HTMLElement;
+  /** 目标节点在蒙层中的占位节点 */
   public dragEl: HTMLElement;
+  /** Moveable拖拽类实例 */
   public moveable?: Moveable;
-  public horizontalGuidelines: number[] = [];
-  public verticalGuidelines: number[] = [];
+  /** 水平参考线 */
+  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
+  /** 垂直参考线 */
+  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
+  /** 对齐元素集合 */
   public elementGuidelines: HTMLElement[] = [];
+  /** 布局方式：流式布局、绝对定位、固定定位 */
   public mode: Mode = Mode.ABSOLUTE;
 
   private moveableOptions: MoveableOptions = {};
+  /** 拖动状态 */
   private dragStatus: ActionStatus = ActionStatus.END;
+  /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
   private moveableHelper?: MoveableHelper;
 
@@ -152,11 +166,38 @@ export default class StageDragResize extends EventEmitter {
 
     this.updateDragEl(el);
 
+    this.setElementGuidelines(el);
+
     this.moveableOptions = this.getOptions({
       target: this.dragEl,
     });
   }
 
+  private setElementGuidelines(el: HTMLElement) {
+    const nodes = el.parentElement?.children || [];
+
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+
+    if (this.mode === Mode.ABSOLUTE) {
+      const frame = document.createDocumentFragment();
+
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === el) continue;
+        const { left, top } = getOffset(node as HTMLElement);
+        const elementGuideline = document.createElement('div');
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
+      }
+
+      this.container.append(frame);
+    }
+  }
+
   private initMoveable() {
     this.moveable?.destroy();
 
@@ -274,19 +315,6 @@ export default class StageDragResize extends EventEmitter {
       });
   }
 
-  private getSnapElements(runtime: Runtime, el?: HTMLElement): HTMLElement[] {
-    const { renderer, mask } = this.core;
-    const getSnapElements =
-      runtime?.getSnapElements ||
-      (() => {
-        const doc = renderer.contentWindow?.document;
-        return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
-      });
-    return getSnapElements(el).filter(
-      (element) => element !== this.target && !this.target?.contains(element) && element !== mask.page,
-    );
-  }
-
   private sort(): void {
     if (!this.target || !this.ghostEl) throw new Error('未知错误');
     const { top } = this.ghostEl.getBoundingClientRect();

package/src/StageMask.ts

@@ -83,6 +83,7 @@ export default class StageMask extends Rule {
   public wrapperWidth = 0;
   public maxScrollTop = 0;
   public maxScrollLeft = 0;
+  public intersectionObserver: IntersectionObserver | null = null;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
@@ -132,6 +133,27 @@ export default class StageMask extends Rule {
     this.page = page;
     this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
     this.pageResizeObserver?.disconnect();
+    this.wrapperResizeObserver?.disconnect();
+    this.intersectionObserver?.disconnect();
+
+    if (typeof IntersectionObserver !== 'undefined') {
+      this.intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            const { target, intersectionRatio } = entry;
+            if (intersectionRatio <= 0) {
+              this.scrollIntoView(target);
+            }
+            this.intersectionObserver?.unobserve(target);
+          });
+        },
+        {
+          root: this.pageScrollParent,
+          rootMargin: '0px',
+          threshold: 1.0,
+        },
+      );
+    }
 
     if (typeof ResizeObserver !== 'undefined') {
       this.pageResizeObserver = new ResizeObserver((entries) => {
@@ -140,9 +162,10 @@ export default class StageMask extends Rule {
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
 
-        this.fixScrollValue();
         this.scroll();
-        this.core.dr.updateMoveable();
+        if (this.core.dr.moveable) {
+          this.core.dr.updateMoveable();
+        }
       });
 
       this.pageResizeObserver.observe(page);
@@ -173,6 +196,14 @@ export default class StageMask extends Rule {
     this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
   }
 
+  public scrollIntoView(el: Element): void {
+    el.scrollIntoView();
+    if (!this.pageScrollParent) return;
+    this.scrollLeft = this.pageScrollParent.scrollLeft;
+    this.scrollTop = this.pageScrollParent.scrollTop;
+    this.scroll();
+  }
+
   /**
    * 销毁实例
    */
@@ -188,6 +219,8 @@ export default class StageMask extends Rule {
   }
 
   private scroll() {
+    this.fixScrollValue();
+
     let { scrollLeft, scrollTop } = this;
 
     if (this.pageScrollParent) {
@@ -234,14 +267,14 @@ export default class StageMask extends Rule {
    * 计算并设置最大滚动宽度
    */
   private setMaxScrollLeft(): void {
-    this.maxScrollLeft = this.width - this.wrapperWidth;
+    this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
   }
 
   /**
    * 计算并设置最大滚动高度
    */
   private setMaxScrollTop(): void {
-    this.maxScrollTop = this.height - this.wrapperHeight;
+    this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
   }
 
   /**
@@ -303,8 +336,6 @@ export default class StageMask extends Rule {
       this.scrollLeft = this.scrollLeft + deltaX;
     }
 
-    this.fixScrollValue();
-
     this.scroll();
 
     this.emit('scroll', event);

package/src/const.ts

@@ -16,36 +16,56 @@
  * limitations under the License.
  */
 
-// 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀
+/** 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀 */
 export const GHOST_EL_ID_PREFIX = 'ghost_el_';
 
+/** 拖动的时候需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const DRAG_EL_ID_PREFIX = 'drag_el_';
 
+/** 高亮事需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
-// 默认放到缩小倍数
+/** 默认放到缩小倍数 */
 export const DEFAULT_ZOOM = 1;
 
+/** 参考线类型 */
 export enum GuidesType {
+  /** 水平 */
   HORIZONTAL = 'horizontal',
+  /** 垂直 */
   VERTICAL = 'vertical',
 }
 
+/** css z-index */
 export enum ZIndex {
+  /** 蒙层，用于监听用户操作，需要置于顶层 */
   MASK = '99999',
+  /** 选中的节点 */
   SELECTED_EL = '666',
 }
 
+/** 鼠标按键 */
 export enum MouseButton {
+  /** 左键 */
   LEFT = 0,
+  /** z中健 */
   MIDDLE = 1,
+  /** 右键 */
   RIGHT = 2,
 }
 
+/** 布局方式 */
 export enum Mode {
+  /** 绝对定位布局 */
   ABSOLUTE = 'absolute',
+  /** 固定定位布局 */
   FIXED = 'fixed',
+  /** 流式布局 */
   SORTABLE = 'sortable',
 }
 
+/** 选中节点的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';

package/src/types.ts

@@ -18,6 +18,7 @@
 
 import { MoveableOptions } from 'react-moveable/declaration/types';
 
+import Core from '@tmagic/core';
 import { Id, MApp, MNode } from '@tmagic/schema';
 
 import { GuidesType } from './const';
@@ -37,6 +38,7 @@ export type StageCoreConfig = {
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+  autoScrollIntoView?: boolean;
 };
 
 export interface StageRenderConfig {
@@ -94,6 +96,7 @@ export interface RemoveData {
 }
 
 export interface Runtime {
+  getApp?: () => Core;
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
   getSnapElements?: (el?: HTMLElement) => HTMLElement[];
   updateRootConfig: (config: MApp) => void;

package/src/util.ts

@@ -16,9 +16,19 @@
  * 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) => {
+  let cur: Element | null = el.parentElement;
+  const parents: Element[] = [];
+  while (cur && cur !== relative) {
+    parents.push(cur);
+    cur = cur.parentElement;
+  }
+  return parents;
+};
+
 export const getOffset = (el: HTMLElement): Offset => {
   const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
@@ -161,10 +171,36 @@ export const removeSelectedClassName = (doc: Document) => {
   if (oldEl) {
     oldEl.classList.remove(SELECTED_CLASS);
     (oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`);
+    doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+      item.classList.remove(`${SELECTED_CLASS}-parents`);
+    });
   }
 };
 
-export const addSelectedClassName = (el: Element) => {
+export const addSelectedClassName = (el: Element, doc: Document) => {
   el.classList.add(SELECTED_CLASS);
   (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+  getParents(el, doc.body).forEach((item) => {
+    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 [];
 };