@tmagic/stage 1.0.0-beta.13 → 1.0.0-beta.16

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

@@ -2,12 +2,14 @@
 import { EventEmitter } from 'events';
 import Moveable from 'moveable';
 import StageCore from './StageCore';
+import TargetCalibrate from './TargetCalibrate';
 import type { StageHighlightConfig } from './types';
 export default class StageHighlight extends EventEmitter {
     core: StageCore;
     container: HTMLElement;
     target?: HTMLElement;
     moveable?: Moveable;
+    calibrationTarget: TargetCalibrate;
     constructor(config: StageHighlightConfig);
     /**
      * 高亮鼠标悬停的组件

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

@@ -0,0 +1,18 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
+import type { TargetCalibrateConfig } from './types';
+/**
+ * 将选中的节点修正定位后，添加一个操作节点到蒙层上
+ */
+export default class TargetCalibrate extends EventEmitter {
+    parent: HTMLElement;
+    mask: StageMask;
+    dr: StageDragResize;
+    operationEl: HTMLElement;
+    constructor(config: TargetCalibrateConfig);
+    update(el: HTMLElement, prefix: String): HTMLElement;
+    destroy(): void;
+    private getOffset;
+}

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

@@ -1,5 +1,6 @@
 export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
 export declare const DRAG_EL_ID_PREFIX = "drag_el_";
+export declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
 export declare const DEFAULT_ZOOM = 1;
 export declare enum GuidesType {
     HORIZONTAL = "horizontal",

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

@@ -2,6 +2,8 @@ import { MoveableOptions } from 'react-moveable/declaration/types';
 import { Id, MApp, MNode } from '@tmagic/schema';
 import { GuidesType } from './const';
 import StageCore from './StageCore';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
 export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export declare type StageCoreConfig = {
     /** 需要对齐的dom节点的CSS选择器字符串 */
@@ -82,3 +84,8 @@ export interface StageHighlightConfig {
     core: StageCore;
     container: HTMLElement;
 }
+export interface TargetCalibrateConfig {
+    parent: HTMLElement;
+    mask: StageMask;
+    dr: StageDragResize;
+}

package/package.json

@@ -1,7 +1,9 @@
 {
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.16",
   "name": "@tmagic/stage",
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/*"
+  ],
   "main": "dist/tmagic-stage.umd.js",
   "module": "dist/tmagic-stage.es.js",
   "types": "dist/types/src/index.d.ts",
@@ -9,7 +11,8 @@
     ".": {
       "import": "./dist/tmagic-stage.es.js",
       "require": "./dist/tmagic-stage.umd.js"
-    }
+    },
+    "./*": "./*"
   },
   "license": "Apache-2.0",
   "scripts": {
@@ -24,11 +27,11 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.13",
-    "@tmagic/utils": "^1.0.0-beta.13",
+    "@tmagic/schema": "^1.0.0-beta.16",
+    "@tmagic/utils": "^1.0.0-beta.16",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.28.0",
+    "moveable": "^0.29.4",
     "moveable-helper": "^0.4.0"
   },
   "devDependencies": {
@@ -40,5 +43,5 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
   },
-  "gitHead": "ca2b203614cbdaff580e5cb6f35630f50b827451"
+  "gitHead": "2aebfb1b8ceb5c8e26dfb59b643ed9f4f4b7bd15"
 }

package/src/StageDragResize.ts

@@ -46,11 +46,11 @@ export default class StageDragResize extends EventEmitter {
   public horizontalGuidelines: number[] = [];
   public verticalGuidelines: number[] = [];
   public elementGuidelines: HTMLElement[] = [];
+  public mode: Mode = Mode.ABSOLUTE;
 
   private moveableOptions: MoveableOptions = {};
   private dragStatus: ActionStatus = ActionStatus.END;
   private ghostEl: HTMLElement | undefined;
-  private mode: Mode = Mode.ABSOLUTE;
   private moveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
@@ -354,6 +354,7 @@ export default class StageDragResize extends EventEmitter {
       top: ${offset.top}px;
       width: ${width}px;
       height: ${height}px;
+      z-index: 9;
     `;
 
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;

package/src/StageHighlight.ts

@@ -21,19 +21,27 @@ import { EventEmitter } from 'events';
 
 import Moveable from 'moveable';
 
+import { HIGHLIGHT_EL_ID_PREFIX } from './const';
 import StageCore from './StageCore';
+import TargetCalibrate from './TargetCalibrate';
 import type { StageHighlightConfig } from './types';
 export default class StageHighlight extends EventEmitter {
   public core: StageCore;
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
+  public calibrationTarget: TargetCalibrate;
 
   constructor(config: StageHighlightConfig) {
     super();
 
     this.core = config.core;
     this.container = config.container;
+    this.calibrationTarget = new TargetCalibrate({
+      parent: this.core.mask.content,
+      mask: this.core.mask,
+      dr: this.core.dr,
+    });
   }
 
   /**
@@ -44,10 +52,12 @@ export default class StageHighlight extends EventEmitter {
     if (!el || el === this.target) return;
     this.target = el;
     this.moveable?.destroy();
+
     this.moveable = new Moveable(this.container, {
-      target: this.target,
-      scrollable: true,
+      target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
       origin: false,
+      rootContainer: this.core.container,
+      zoom: 1,
     });
   }
 
@@ -66,5 +76,6 @@ export default class StageHighlight extends EventEmitter {
    */
   public destroy(): void {
     this.moveable?.destroy();
+    this.calibrationTarget.destroy();
   }
 }

package/src/TargetCalibrate.ts

@@ -0,0 +1,135 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-param-reassign */
+import { EventEmitter } from 'events';
+
+import { Mode } from './const';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
+import type { Offset, TargetCalibrateConfig } from './types';
+import { getMode } from './util';
+
+/**
+ * 将选中的节点修正定位后，添加一个操作节点到蒙层上
+ */
+export default class TargetCalibrate extends EventEmitter {
+  public parent: HTMLElement;
+  public mask: StageMask;
+  public dr: StageDragResize;
+  public operationEl: HTMLElement;
+
+  constructor(config: TargetCalibrateConfig) {
+    super();
+
+    this.parent = config.parent;
+    this.mask = config.mask;
+    this.dr = config.dr;
+
+    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);
+    this.operationEl.style.cssText = `
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+
+    this.operationEl.id = `${prefix}${el.id}`;
+    return this.operationEl;
+  }
+
+  public destroy(): void {
+    this.operationEl?.remove();
+  }
+
+  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;
+    }
+
+    if (offsetParent) {
+      const parentOffset = this.getOffset(offsetParent as HTMLElement);
+      return {
+        left: left + parentOffset.left,
+        top: top + parentOffset.top,
+      };
+    }
+
+    // 选中固定定位元素后editor-mask高度被置为视窗大小
+    if (this.dr.mode === Mode.FIXED) {
+      // 弹窗的情况
+      if (getMode(el) === Mode.FIXED) {
+        return {
+          left,
+          top,
+        };
+      }
+
+      return {
+        left: left - this.mask.scrollLeft,
+        top: top - this.mask.scrollTop,
+      };
+    }
+
+    // 无父元素的固定定位需按滚动值计算
+    if (getMode(el) === Mode.FIXED) {
+      return {
+        left: left + this.mask.scrollLeft,
+        top: top + this.mask.scrollTop,
+      };
+    }
+
+    return {
+      left,
+      top,
+    };
+  }
+}

package/src/const.ts

@@ -21,6 +21,8 @@ export const GHOST_EL_ID_PREFIX = 'ghost_el_';
 
 export const DRAG_EL_ID_PREFIX = 'drag_el_';
 
+export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
+
 // 默认放到缩小倍数
 export const DEFAULT_ZOOM = 1;
 

package/src/types.ts

@@ -22,6 +22,8 @@ import { Id, MApp, MNode } from '@tmagic/schema';
 
 import { GuidesType } from './const';
 import StageCore from './StageCore';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
 
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 
@@ -54,7 +56,6 @@ export type Rect = {
   width: number;
   height: number;
 } & Offset;
-
 export interface Offset {
   left: number;
   top: number;
@@ -119,3 +120,9 @@ export interface StageHighlightConfig {
   core: StageCore;
   container: HTMLElement;
 }
+
+export interface TargetCalibrateConfig {
+  parent: HTMLElement;
+  mask: StageMask;
+  dr: StageDragResize;
+}