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

package/src/StageRender.ts

@@ -18,7 +18,6 @@
 
 import { EventEmitter } from 'events';
 
-import { SELECTED_CLASS, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
 import { getHost, isSameDomain } from './util';
@@ -122,16 +121,5 @@ export default class StageRender extends EventEmitter {
         this.iframe?.contentDocument?.body?.appendChild(el);
       }
     }
-
-    if (this.contentWindow) {
-      const style = this.contentWindow.document.createElement('style');
-      style.id = 'tmagic-stage-render';
-      style.innerHTML = `
-        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
-          z-index: ${ZIndex.SELECTED_EL};
-        }
-      `;
-      this.contentWindow.document.head.appendChild(style);
-    }
   };
 }

package/src/TargetCalibrate.ts

@@ -20,6 +20,7 @@
 import { EventEmitter } from 'events';
 
 import { Mode } from './const';
+import StageCore from './StageCore';
 import StageDragResize from './StageDragResize';
 import StageMask from './StageMask';
 import type { Offset, TargetCalibrateConfig } from './types';
@@ -32,7 +33,8 @@ export default class TargetCalibrate extends EventEmitter {
   public parent: HTMLElement;
   public mask: StageMask;
   public dr: StageDragResize;
-  public operationEl: HTMLElement;
+  public core: StageCore;
+  public operationEl: HTMLDivElement;
 
   constructor(config: TargetCalibrateConfig) {
     super();
@@ -40,23 +42,30 @@ export default class TargetCalibrate extends EventEmitter {
     this.parent = config.parent;
     this.mask = config.mask;
     this.dr = config.dr;
+    this.core = config.core;
 
     this.operationEl = globalThis.document.createElement('div');
     this.parent.append(this.operationEl);
   }
 
   public update(el: HTMLElement, prefix: String): HTMLElement {
-    const { width, height } = el.getBoundingClientRect();
     const { left, top } = this.getOffset(el);
+    const { transform } = getComputedStyle(el);
     this.operationEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${left}px;
       top: ${top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
     `;
 
     this.operationEl.id = `${prefix}${el.id}`;
+
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.operationEl, el);
+    }
+
     return this.operationEl;
   }
 
@@ -65,35 +74,10 @@ export default class TargetCalibrate extends EventEmitter {
   }
 
   private getOffset(el: HTMLElement): Offset {
-    const { transform } = getComputedStyle(el);
     const { offsetParent } = el;
 
-    let left = el.offsetLeft;
-    let top = el.offsetTop;
-
-    if (transform.indexOf('matrix') > -1) {
-      let a = 1;
-      let b = 1;
-      let c = 1;
-      let d = 1;
-      let e = 0;
-      let f = 0;
-      transform.replace(
-        /matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/,
-        ($0: string, $1: string, $2: string, $3: string, $4: string, $5: string, $6: string): string => {
-          a = +$1;
-          b = +$2;
-          c = +$3;
-          d = +$4;
-          e = +$5;
-          f = +$6;
-          return transform;
-        },
-      );
-
-      left = a * left + c * top + e;
-      top = b * left + d * top + f;
-    }
+    const left = el.offsetLeft;
+    const top = el.offsetTop;
 
     if (offsetParent) {
       const parentOffset = this.getOffset(offsetParent as HTMLElement);

package/src/const.ts

@@ -16,36 +16,58 @@
  * 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',
+  GHOST_EL = '700',
+  DRAG_EL = '9',
 }
 
+/** 鼠标按键 */
 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

@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { MoveableOptions } from 'react-moveable/declaration/types';
+import { MoveableOptions } from 'moveable';
 
+import Core from '@tmagic/core';
 import { Id, MApp, MNode } from '@tmagic/schema';
 
 import { GuidesType } from './const';
@@ -37,6 +38,8 @@ export type StageCoreConfig = {
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+  autoScrollIntoView?: boolean;
+  updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
 };
 
 export interface StageRenderConfig {
@@ -56,6 +59,7 @@ export type Rect = {
   width: number;
   height: number;
 } & Offset;
+
 export interface Offset {
   left: number;
   top: number;
@@ -70,10 +74,14 @@ export interface UpdateEventData {
   el: HTMLElement;
   ghostEl: HTMLElement;
   style: {
-    width: number;
-    height: number;
+    width?: number;
+    height?: number;
     left?: number;
     top?: number;
+    transform?: {
+      rotate?: string;
+      scale?: string;
+    };
   };
 }
 
@@ -94,6 +102,7 @@ export interface RemoveData {
 }
 
 export interface Runtime {
+  getApp?: () => Core;
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
   getSnapElements?: (el?: HTMLElement) => HTMLElement[];
   updateRootConfig: (config: MApp) => void;
@@ -125,4 +134,5 @@ export interface TargetCalibrateConfig {
   parent: HTMLElement;
   mask: StageMask;
   dr: StageDragResize;
+  core: StageCore;
 }

package/src/util.ts

@@ -16,39 +16,24 @@
  * 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;
 
-  let left = el.offsetLeft;
-  let top = el.offsetTop;
-
-  if (transform.indexOf('matrix') > -1) {
-    let a = 1;
-    let b = 1;
-    let c = 1;
-    let d = 1;
-    let e = 0;
-    let f = 0;
-    transform.replace(
-      /matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/,
-      ($0: string, $1: string, $2: string, $3: string, $4: string, $5: string, $6: string): string => {
-        a = +$1;
-        b = +$2;
-        c = +$3;
-        d = +$4;
-        e = +$5;
-        f = +$6;
-        return transform;
-      },
-    );
-
-    left = a * left + c * top + e;
-    top = b * left + d * top + f;
-  }
+  const left = el.offsetLeft;
+  const top = el.offsetTop;
 
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent as HTMLElement);
@@ -161,10 +146,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 [];
 };