@tmagic/stage 1.0.0-rc.6 → 1.0.0-rc.9

package/package.json

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

package/src/StageDragResize.ts

@@ -25,7 +25,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 { Offset, SortEventData, StageDragResizeConfig } from './types';
+import type { SortEventData, StageDragResizeConfig } from './types';
 import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
 
 /** 拖动状态 */
@@ -48,7 +48,7 @@ export default class StageDragResize extends EventEmitter {
   /** 目标节点 */
   public target?: HTMLElement;
   /** 目标节点在蒙层中的占位节点 */
-  public dragEl: HTMLElement;
+  public dragEl: HTMLDivElement;
   /** Moveable拖拽类实例 */
   public moveable?: Moveable;
   /** 水平参考线 */
@@ -87,10 +87,9 @@ export default class StageDragResize extends EventEmitter {
     const oldTarget = this.target;
     this.target = el;
 
-    this.init(el);
-
     // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
     if (!this.moveable || this.target !== oldTarget) {
+      this.init(el);
       this.moveableHelper = MoveableHelper.create({
         useBeforeRender: true,
         useRender: false,
@@ -203,49 +202,47 @@ export default class StageDragResize extends EventEmitter {
 
     this.bindResizeEvent();
     this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
   }
 
   private bindResizeEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
     const frame = {
-      translate: [0, 0],
+      left: 0,
+      top: 0,
     };
 
     this.moveable
       .on('resizeStart', (e) => {
-        if (e.dragStart) {
-          const rect = this.moveable!.getRect();
-          const offset = getAbsolutePosition(e.target as HTMLElement, rect);
-          e.dragStart.set([offset.left, offset.top]);
-        }
+        if (!this.target) return;
+
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onResizeStart(e);
+
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
       })
-      .on('resize', ({ width, height, drag }) => {
+      .on('resize', (e) => {
+        const { width, height, drag } = e;
         if (!this.moveable || !this.target || !this.dragEl) return;
 
         const { beforeTranslate } = drag;
-        frame.translate = beforeTranslate;
         this.dragStatus = ActionStatus.ING;
 
-        this.target.style.width = `${width}px`;
-        this.target.style.height = `${height}px`;
-        this.dragEl.style.width = `${width}px`;
-        this.dragEl.style.height = `${height}px`;
+        this.moveableHelper?.onResize(e);
 
         // 流式布局
         if (this.mode === Mode.SORTABLE) {
-          this.dragEl.style.top = `${beforeTranslate[1]}px`;
-          this.target.style.top = `0px`;
-          return;
+          this.target.style.top = '0px';
+        } else {
+          this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
+          this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
         }
 
-        this.dragEl.style.left = `${beforeTranslate[0]}px`;
-        this.dragEl.style.top = `${beforeTranslate[1]}px`;
-
-        const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] });
-
-        this.target.style.left = `${offset.left}px`;
-        this.target.style.top = `${offset.top}px`;
+        this.target.style.width = `${width}px`;
+        this.target.style.height = `${height}px`;
       })
       .on('resizeEnd', () => {
         this.dragStatus = ActionStatus.END;
@@ -256,7 +253,10 @@ export default class StageDragResize extends EventEmitter {
   private bindDragEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
-    let offset: Offset | null = null;
+    const frame = {
+      left: 0,
+      top: 0,
+    };
 
     this.moveable
       .on('dragStart', (e) => {
@@ -269,29 +269,25 @@ export default class StageDragResize extends EventEmitter {
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
         }
+
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
       })
       .on('drag', (e) => {
         if (!this.target || !this.dragEl) return;
 
-        if (!offset) {
-          offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
-        }
-
         this.dragStatus = ActionStatus.ING;
 
-        const { left, top } = e;
-
         // 流式布局
         if (this.ghostEl) {
-          this.dragEl.style.top = `${top}px`;
-          this.ghostEl.style.top = `${top + offset.top}px`;
+          this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
           return;
         }
 
         this.moveableHelper?.onDrag(e);
 
-        this.target.style.left = `${left + offset.left}px`;
-        this.target.style.top = `${top + offset.top}px`;
+        this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
+        this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
       })
       .on('dragEnd', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
@@ -304,13 +300,66 @@ export default class StageDragResize extends EventEmitter {
               this.update();
           }
         }
-        offset = null;
 
         this.dragStatus = ActionStatus.END;
         this.destroyGhostEl();
       });
   }
 
+  private bindRotateEvent(): void {
+    if (!this.moveable) throw new Error('moveable 为初始化');
+
+    this.moveable
+      .on('rotateStart', (e) => {
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onRotateStart(e);
+      })
+      .on('rotate', (e) => {
+        if (!this.target || !this.dragEl) return;
+        this.dragStatus = ActionStatus.ING;
+        this.moveableHelper?.onRotate(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || '';
+      })
+      .on('rotateEnd', (e) => {
+        this.dragStatus = ActionStatus.END;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit('update', {
+          el: this.target,
+          style: {
+            transform: frame?.get('transform'),
+          },
+        });
+      });
+  }
+
+  private bindScaleEvent(): void {
+    if (!this.moveable) throw new Error('moveable 为初始化');
+
+    this.moveable
+      .on('scaleStart', (e) => {
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onScaleStart(e);
+      })
+      .on('scale', (e) => {
+        if (!this.target || !this.dragEl) return;
+        this.dragStatus = ActionStatus.ING;
+        this.moveableHelper?.onScale(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || '';
+      })
+      .on('scaleEnd', (e) => {
+        this.dragStatus = ActionStatus.END;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit('update', {
+          el: this.target,
+          style: {
+            transform: frame?.get('transform'),
+          },
+        });
+      });
+  }
+
   private sort(): void {
     if (!this.target || !this.ghostEl) throw new Error('未知错误');
     const { top } = this.ghostEl.getBoundingClientRect();
@@ -331,14 +380,15 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private update(isResize = false): void {
-    const rect = this.moveable!.getRect();
+    if (!this.target) return;
+
     const offset =
-      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target as HTMLElement, rect);
+      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
 
     const left = this.calcValueByFontsize(offset.left);
     const top = this.calcValueByFontsize(offset.top);
-    const width = this.calcValueByFontsize(rect.width);
-    const height = this.calcValueByFontsize(rect.height);
+    const width = this.calcValueByFontsize(this.target.clientWidth);
+    const height = this.calcValueByFontsize(this.target.clientHeight);
 
     this.emit('update', {
       el: this.target,
@@ -369,19 +419,24 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private updateDragEl(el: HTMLElement) {
-    const { width, height } = el.getBoundingClientRect();
     const offset = getOffset(el);
+    const { transform } = getComputedStyle(el);
 
     this.dragEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${offset.left}px;
       top: ${offset.top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
       z-index: ${ZIndex.DRAG_EL};
     `;
 
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.dragEl, el);
+    }
   }
 
   private destroyDragEl(): void {
@@ -415,6 +470,8 @@ export default class StageDragResize extends EventEmitter {
       dragArea: false,
       draggable: true,
       resizable: true,
+      scalable: false,
+      rotatable: false,
       snappable: isAbsolute || isFixed,
       snapGap: isAbsolute || isFixed,
       snapThreshold: 5,

package/src/StageHighlight.ts

@@ -41,6 +41,7 @@ export default class StageHighlight extends EventEmitter {
       parent: this.core.mask.content,
       mask: this.core.mask,
       dr: this.core.dr,
+      core: this.core,
     });
   }
 

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/types.ts

@@ -16,7 +16,7 @@
  * 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';
@@ -39,6 +39,7 @@ export type StageCoreConfig = {
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
   autoScrollIntoView?: boolean;
+  updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
 };
 
 export interface StageRenderConfig {
@@ -58,6 +59,7 @@ export type Rect = {
   width: number;
   height: number;
 } & Offset;
+
 export interface Offset {
   left: number;
   top: number;
@@ -72,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;
+    };
   };
 }
 
@@ -128,4 +134,5 @@ export interface TargetCalibrateConfig {
   parent: HTMLElement;
   mask: StageMask;
   dr: StageDragResize;
+  core: StageCore;
 }

package/src/util.ts

@@ -30,35 +30,10 @@ const getParents = (el: Element, relative: Element) => {
 };
 
 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);