@tmagic/stage 1.0.0-beta.7 → 1.0.0-beta.8

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

@@ -0,0 +1,32 @@
+/// <reference types="node" />
+import EventEmitter from 'events';
+import Guides from '@scena/guides';
+export default class Rule extends EventEmitter {
+    hGuides: Guides;
+    vGuides: Guides;
+    horizontalGuidelines: number[];
+    verticalGuidelines: number[];
+    private container;
+    private containerResizeObserver;
+    constructor(container: HTMLDivElement);
+    /**
+     * 是否显示标尺
+     * @param show 是否显示
+     */
+    showGuides(show?: boolean): void;
+    /**
+     * 清空所有参考线
+     */
+    clearGuides(): void;
+    /**
+     * 是否显示标尺
+     * @param show 是否显示
+     */
+    showRule(show?: boolean): void;
+    scrollRule(scrollTop: number): void;
+    destroy(): void;
+    private getGuidesStyle;
+    private createGuides;
+    private hGuidesChangeGuidesHandler;
+    private vGuidesChangeGuidesHandler;
+}

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

@@ -12,12 +12,18 @@ export default class StageCore extends EventEmitter {
     dr: StageDragResize;
     config: StageCoreConfig;
     zoom: number;
+    private canSelect;
     constructor(config: StageCoreConfig);
+    setElementFromPoint(event: MouseEvent): Promise<void>;
     /**
      * 选中组件
      * @param idOrEl 组件Dom节点的id属性，或者Dom节点
      */
-    select(idOrEl: Id | HTMLElement): Promise<void>;
+    select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void>;
+    /**
+     * 更新选中的节点
+     * @param data 更新的数据
+     */
     update(data: UpdateData): void;
     sortNode(data: SortEventData): void;
     add(data: UpdateData): void;
@@ -36,9 +42,4 @@ export default class StageCore extends EventEmitter {
      * 销毁实例
      */
     destroy(): void;
-    private maskScrollHandler;
-    private hGuidesChangeGuidesHandler;
-    private vGuidesChangeGuidesHandler;
-    private setMaskLayout;
-    private beforeSelect;
 }

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

@@ -1,6 +1,7 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
 import Moveable from 'moveable';
+import { GuidesType } from './const';
 import StageCore from './StageCore';
 import type { SortEventData, StageDragResizeConfig } from './types';
 /**
@@ -10,41 +11,43 @@ export default class StageDragResize extends EventEmitter {
     core: StageCore;
     container: HTMLElement;
     target?: HTMLElement;
+    dragEl?: HTMLElement;
     moveable?: Moveable;
     horizontalGuidelines: number[];
     verticalGuidelines: number[];
+    private moveableOptions;
     private dragStatus;
-    private elObserver?;
     private ghostEl;
     private mode;
     constructor(config: StageDragResizeConfig);
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
+     * 当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
      * @param el 选中组件的Dom节点元素
+     * @param event 鼠标事件
      */
-    select(el: HTMLElement): Promise<void>;
+    select(el: HTMLElement, event?: MouseEvent): Promise<void>;
     /**
      * 初始化选中框并渲染出来
-     * @param param0
      */
     refresh(): Promise<void>;
-    setVGuidelines(verticalGuidelines: number[]): Promise<void>;
-    setHGuidelines(horizontalGuidelines: number[]): Promise<void>;
-    updateMoveableTarget(target?: HTMLElement): void;
+    setGuidelines(type: GuidesType, guidelines: number[]): void;
+    clearGuides(): void;
     /**
      * 销毁实例
      */
     destroy(): void;
+    private initMoveable;
     private bindResizeEvent;
     private bindDragEvent;
     private getSnapElements;
     private sort;
-    private drag;
+    private update;
     private generateGhostEl;
     private destroyGhostEl;
+    private generateDragEl;
+    private destroyDragEl;
     private getOptions;
-    private initObserver;
-    private syncRect;
     private calcValueByFontsize;
 }
 /**

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

@@ -1,32 +1,28 @@
-/// <reference types="node" />
-import { EventEmitter } from 'events';
-import Guides from '@scena/guides';
+import { Mode } from './const';
+import Rule from './Rule';
 import type StageCore from './StageCore';
 import type { StageMaskConfig } from './types';
 /**
  * 蒙层
  * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
  */
-export default class StageMask extends EventEmitter {
+export default class StageMask extends Rule {
     content: HTMLDivElement;
     wrapper: HTMLDivElement;
     core: StageCore;
     page: HTMLElement | null;
-    hGuides: Guides;
-    vGuides: Guides;
-    private target;
-    private resizeObserver;
-    private parentResizeObserver;
-    private canSelect;
+    pageScrollParent: HTMLElement | null;
+    scrollTop: number;
+    scrollLeft: number;
+    width: number;
+    height: number;
+    wrapperHeight: number;
+    wrapperWidth: number;
+    private mode;
+    private pageResizeObserver;
+    private wrapperResizeObserver;
     constructor(config: StageMaskConfig);
-    /**
-     * 设置成固定定位模式
-     */
-    setFixed(): void;
-    /**
-     * 设置成绝对定位模式
-     */
-    setAbsolute(): void;
+    setMode(mode: Mode): void;
     /**
      * 监听页面大小变化
      * @description 同步页面与mask的大小
@@ -38,24 +34,13 @@ export default class StageMask extends EventEmitter {
      * @param el 将蒙层挂载到该Dom节点上
      */
     mount(el: HTMLDivElement): void;
+    setLayout(el: HTMLElement): void;
     /**
      * 销毁实例
      */
     destroy(): void;
-    /**
-     * 是否显示标尺
-     * @param show 是否显示
-     */
-    showGuides(show?: boolean): void;
-    /**
-     * 是否显示标尺
-     * @param show 是否显示
-     */
-    showRule(show?: boolean): void;
-    /**
-     * 清空所有参考线
-     */
-    clearGuides(): void;
+    private scroll;
+    private scrollTo;
     /**
      * 设置蒙层高度
      * @param height 高度
@@ -72,9 +57,5 @@ export default class StageMask extends EventEmitter {
      */
     private mouseDownHandler;
     private mouseUpHandler;
-    private mouseMoveHandler;
-    private contextmenuHandler;
-    private select;
-    private getGuidesStyle;
-    private createGuides;
+    private mouseWheelHandler;
 }

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

@@ -25,4 +25,5 @@ export default class StageRender extends EventEmitter {
      * 销毁实例
      */
     destroy(): void;
+    private loadHandler;
 }

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

@@ -1,2 +1,19 @@
 export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
 export declare const DEFAULT_ZOOM = 1;
+export declare enum GuidesType {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export declare enum ZIndex {
+    MASK = "99999"
+}
+export declare enum MouseButton {
+    LEFT = 0,
+    MIDDLE = 1,
+    RIGHT = 2
+}
+export declare enum Mode {
+    ABSOLUTE = "absolute",
+    FIXED = "fixed",
+    SORTABLE = "sortable"
+}

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

@@ -1,5 +1,6 @@
 import { MoveableOptions } from 'react-moveable/declaration/types';
 import { Id, MApp, MNode } from '@tmagic/schema';
+import { GuidesType } from './const';
 import StageCore from './StageCore';
 export declare type CanSelect = (el: HTMLElement, stop: () => boolean) => boolean | Promise<boolean>;
 export declare type StageCoreConfig = {
@@ -31,6 +32,10 @@ export interface Offset {
     left: number;
     top: number;
 }
+export interface GuidesEventData {
+    type: GuidesType;
+    guides: number[];
+}
 export interface UpdateEventData {
     el: HTMLElement;
     ghostEl: HTMLElement;
@@ -73,12 +78,3 @@ export interface Magic {
 export interface RuntimeWindow extends Window {
     magic: Magic;
 }
-export declare enum ZIndex {
-    MASK = "99999",
-    GHOST_EL = "99998"
-}
-export declare enum MouseButton {
-    LEFT = 0,
-    MIDDLE = 1,
-    RIGHT = 2
-}

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

@@ -1,9 +1,5 @@
+import { Mode } from './const';
 import type { Offset } from './types';
-export declare enum Mode {
-    ABSOLUTE = "absolute",
-    FIXED = "fixed",
-    SORTABLE = "sortable"
-}
 export declare const getOffset: (el: HTMLElement) => Offset;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
     left: number;
@@ -15,4 +11,10 @@ export declare const isAbsolute: (el?: HTMLElement | undefined) => boolean;
 export declare const isRelative: (el?: HTMLElement | undefined) => boolean;
 export declare const isStatic: (el?: HTMLElement | undefined) => boolean;
 export declare const isFixed: (el?: HTMLElement | undefined) => boolean;
+export declare const isFixedParent: (el: HTMLElement) => boolean;
 export declare const getMode: (el: HTMLElement) => Mode;
+export declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
+export declare const createDiv: ({ className, cssText }: {
+    className: string;
+    cssText: string;
+}) => HTMLDivElement;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "name": "@tmagic/stage",
   "sideEffects": false,
   "main": "dist/tmagic-stage.umd.js",
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.6",
-    "@tmagic/utils": "^1.0.0-beta.6",
+    "@tmagic/schema": "^1.0.0-beta.8",
+    "@tmagic/utils": "^1.0.0-beta.8",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.25.3"
+    "moveable": "^0.28.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -37,5 +37,6 @@
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
-  }
+  },
+  "gitHead": "ff8e32901775ecc145a82f906d6af6119652d61e"
 }

package/src/Rule.ts

@@ -0,0 +1,150 @@
+import EventEmitter from 'events';
+
+import Guides, { GuidesEvents } from '@scena/guides';
+
+import { GuidesType } from './const';
+
+export default class Rule extends EventEmitter {
+  public hGuides: Guides;
+  public vGuides: Guides;
+  public horizontalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = [];
+
+  private container: HTMLDivElement;
+  private containerResizeObserver: ResizeObserver;
+
+  constructor(container: HTMLDivElement) {
+    super();
+
+    this.container = container;
+    this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
+    this.vGuides = this.createGuides(GuidesType.VERTICAL);
+
+    this.hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler);
+    this.vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler);
+
+    this.containerResizeObserver = new ResizeObserver(() => {
+      this.vGuides.resize();
+      this.hGuides.resize();
+    });
+    this.containerResizeObserver.observe(this.container);
+  }
+
+  /**
+   * 是否显示标尺
+   * @param show 是否显示
+   */
+  public showGuides(show = true) {
+    this.hGuides.setState({
+      showGuides: show,
+    });
+
+    this.vGuides.setState({
+      showGuides: show,
+    });
+  }
+
+  /**
+   * 清空所有参考线
+   */
+  public clearGuides() {
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+
+    this.vGuides.setState({
+      defaultGuides: [],
+    });
+
+    this.hGuides.setState({
+      defaultGuides: [],
+    });
+
+    this.emit('changeGuides', {
+      type: GuidesType.VERTICAL,
+      guides: [],
+    });
+
+    this.emit('changeGuides', {
+      type: GuidesType.HORIZONTAL,
+      guides: [],
+    });
+  }
+
+  /**
+   * 是否显示标尺
+   * @param show 是否显示
+   */
+  public showRule(show = true) {
+    // 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理
+    if (show) {
+      this.hGuides.destroy();
+      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+
+      this.vGuides.destroy();
+      this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
+    } else {
+      this.hGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
+
+      this.vGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
+    }
+  }
+
+  scrollRule(scrollTop: number) {
+    this.hGuides.scrollGuides(scrollTop);
+    this.hGuides.scroll(0);
+
+    this.vGuides.scrollGuides(0);
+    this.vGuides.scroll(scrollTop);
+  }
+
+  public destroy(): void {
+    this.hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler);
+    this.vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler);
+    this.containerResizeObserver.disconnect();
+    this.removeAllListeners();
+  }
+
+  private getGuidesStyle = (type: GuidesType) => ({
+    position: 'fixed',
+    zIndex: 1,
+    left: type === GuidesType.HORIZONTAL ? 0 : '-30px',
+    top: type === GuidesType.HORIZONTAL ? '-30px' : 0,
+    width: type === GuidesType.HORIZONTAL ? '100%' : '30px',
+    height: type === GuidesType.HORIZONTAL ? '30px' : '100%',
+  });
+
+  private createGuides = (type: GuidesType, defaultGuides: number[] = []): Guides =>
+    new Guides(this.container, {
+      type,
+      defaultGuides,
+      displayDragPos: true,
+      backgroundColor: '#fff',
+      lineColor: '#000',
+      textColor: '#000',
+      style: this.getGuidesStyle(type),
+    });
+
+  private hGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
+    this.horizontalGuidelines = e.guides;
+    this.emit('changeGuides', {
+      type: GuidesType.HORIZONTAL,
+      guides: this.horizontalGuidelines,
+    });
+  };
+
+  private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
+    this.verticalGuidelines = e.guides;
+    this.emit('changeGuides', {
+      type: GuidesType.VERTICAL,
+      guides: this.verticalGuidelines,
+    });
+  };
+}