@tmagic/stage 1.1.0-beta.0 → 1.1.0-beta.11

package/src/StageDragResize.ts

@@ -19,38 +19,32 @@
 /* eslint-disable no-param-reassign */
 import { EventEmitter } from 'events';
 
+import KeyController from 'keycon';
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { removeClassNameByClassName } from '@tmagic/utils';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
 import StageCore from './StageCore';
-import type { SortEventData, StageDragResizeConfig } from './types';
-import { calcValueByFontsize, getAbsolutePosition, getMode, getOffset } from './util';
-
-/** 拖动状态 */
-enum ActionStatus {
-  /** 开始拖动 */
-  START = 'start',
-  /** 拖动中 */
-  ING = 'ing',
-  /** 拖动结束 */
-  END = 'end',
-}
+import StageMask from './StageMask';
+import type { StageDragResizeConfig } from './types';
+import { ContainerHighlightType, StageDragStatus } from './types';
+import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
 
 /**
  * 选中框
  */
 export default class StageDragResize extends EventEmitter {
   public core: StageCore;
+  public mask: StageMask;
   /** 画布容器 */
   public container: HTMLElement;
   /** 目标节点 */
   public target?: HTMLElement;
   /** 目标节点在蒙层中的占位节点 */
-  public dragEl: HTMLDivElement;
+  public dragEl?: HTMLDivElement;
   /** Moveable拖拽类实例 */
   public moveable?: Moveable;
   /** 水平参考线 */
@@ -64,19 +58,32 @@ export default class StageDragResize extends EventEmitter {
 
   private moveableOptions: MoveableOptions = {};
   /** 拖动状态 */
-  private dragStatus: ActionStatus = ActionStatus.END;
+  private dragStatus: StageDragStatus = StageDragStatus.END;
   /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
   private moveableHelper?: MoveableHelper;
+  private isContainerHighlight: Boolean = false;
 
   constructor(config: StageDragResizeConfig) {
     super();
 
     this.core = config.core;
     this.container = config.container;
+    this.mask = config.mask;
 
-    this.dragEl = globalThis.document.createElement('div');
-    this.container.append(this.dragEl);
+    KeyController.global.keydown('alt', (e) => {
+      e.inputEvent.preventDefault();
+      this.isContainerHighlight = true;
+    });
+    KeyController.global.keyup('alt', (e) => {
+      e.inputEvent.preventDefault();
+
+      const doc = this.core.renderer.contentWindow?.document;
+      if (doc && this.canContainerHighlight()) {
+        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+      }
+      this.isContainerHighlight = false;
+    });
   }
 
   /**
@@ -147,6 +154,17 @@ export default class StageDragResize extends EventEmitter {
     this.updateMoveable();
   }
 
+  public clearSelectStatus(): void {
+    if (!this.moveable) return;
+    this.destroyDragEl();
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+
+  public destroyDragEl(): void {
+    this.dragEl?.remove();
+  }
+
   /**
    * 销毁实例
    */
@@ -154,7 +172,7 @@ export default class StageDragResize extends EventEmitter {
     this.moveable?.destroy();
     this.destroyGhostEl();
     this.destroyDragEl();
-    this.dragStatus = ActionStatus.END;
+    this.dragStatus = StageDragStatus.END;
     this.removeAllListeners();
   }
 
@@ -166,9 +184,15 @@ export default class StageDragResize extends EventEmitter {
     this.mode = getMode(el);
 
     this.destroyGhostEl();
+    this.destroyDragEl();
+    this.dragEl = globalThis.document.createElement('div');
+    this.container.append(this.dragEl);
+    this.dragEl.style.cssText = getTargetElStyle(el);
+    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
 
-    this.updateDragEl(el);
-
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.dragEl, el);
+    }
     this.moveableOptions = this.getOptions({
       target: this.dragEl,
     });
@@ -226,7 +250,7 @@ export default class StageDragResize extends EventEmitter {
       .on('resizeStart', (e) => {
         if (!this.target) return;
 
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onResizeStart(e);
 
         frame.top = this.target.offsetTop;
@@ -237,7 +261,7 @@ export default class StageDragResize extends EventEmitter {
         if (!this.moveable || !this.target || !this.dragEl) return;
 
         const { beforeTranslate } = drag;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
 
         this.moveableHelper?.onResize(e);
 
@@ -253,7 +277,7 @@ export default class StageDragResize extends EventEmitter {
         this.target.style.height = `${height}px`;
       })
       .on('resizeEnd', () => {
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         this.update(true);
       });
   }
@@ -275,7 +299,7 @@ export default class StageDragResize extends EventEmitter {
       .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
 
         this.moveableHelper?.onDragStart(e);
 
@@ -294,22 +318,11 @@ export default class StageDragResize extends EventEmitter {
           timeout = undefined;
         }
 
-        timeout = globalThis.setTimeout(async () => {
-          const els = this.core.getElementsFromPoint(e.inputEvent);
-          for (const el of els) {
-            if (
-              doc &&
-              !el.id.startsWith(GHOST_EL_ID_PREFIX) &&
-              el !== this.target &&
-              (await this.core.isContainer(el))
-            ) {
-              addClassName(el, doc, this.core.containerHighlightClassName);
-              break;
-            }
-          }
-        }, this.core.containerHighlightDuration);
+        if (this.canContainerHighlight()) {
+          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        }
 
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
 
         // 流式布局
         if (this.ghostEl) {
@@ -330,12 +343,12 @@ export default class StageDragResize extends EventEmitter {
 
         let parentEl: HTMLElement | null = null;
 
-        if (doc) {
+        if (doc && this.canContainerHighlight()) {
           parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
         }
 
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
-        if (this.dragStatus === ActionStatus.ING) {
+        if (this.dragStatus === StageDragStatus.ING) {
           if (parentEl) {
             this.update(false, parentEl);
           } else {
@@ -349,7 +362,7 @@ export default class StageDragResize extends EventEmitter {
           }
         }
 
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         this.destroyGhostEl();
       });
   }
@@ -359,18 +372,18 @@ export default class StageDragResize extends EventEmitter {
 
     this.moveable
       .on('rotateStart', (e) => {
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onRotateStart(e);
       })
       .on('rotate', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.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;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit('update', {
           el: this.target,
@@ -386,18 +399,18 @@ export default class StageDragResize extends EventEmitter {
 
     this.moveable
       .on('scaleStart', (e) => {
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onScaleStart(e);
       })
       .on('scale', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.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;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit('update', {
           el: this.target,
@@ -455,9 +468,13 @@ export default class StageDragResize extends EventEmitter {
     }
 
     this.emit('update', {
-      el: this.target,
+      data: [
+        {
+          el: this.target,
+          style: isResize ? { left, top, width, height } : { left, top },
+        },
+      ],
       parentEl,
-      style: isResize ? { left, top, width, height } : { left, top },
     });
   }
 
@@ -467,6 +484,7 @@ export default class StageDragResize extends EventEmitter {
     }
 
     const ghostEl = el.cloneNode(true) as HTMLElement;
+    this.setGhostElChildrenId(ghostEl);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
     ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
     ghostEl.style.zIndex = ZIndex.GHOST_EL;
@@ -478,34 +496,21 @@ export default class StageDragResize extends EventEmitter {
     return ghostEl;
   }
 
-  private destroyGhostEl(): void {
-    this.ghostEl?.remove();
-    this.ghostEl = undefined;
-  }
-
-  private updateDragEl(el: HTMLElement) {
-    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: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.DRAG_EL};
-    `;
-
-    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+  private setGhostElChildrenId(el: Element) {
+    for (const child of Array.from(el.children)) {
+      if (child.id) {
+        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      }
 
-    if (typeof this.core.config.updateDragEl === 'function') {
-      this.core.config.updateDragEl(this.dragEl, el);
+      if (child.children.length) {
+        this.setGhostElChildrenId(child);
+      }
     }
   }
 
-  private destroyDragEl(): void {
-    this.dragEl?.remove();
+  private destroyGhostEl(): void {
+    this.ghostEl?.remove();
+    this.ghostEl = undefined;
   }
 
   private getOptions(options: MoveableOptions = {}): MoveableOptions {
@@ -566,7 +571,7 @@ export default class StageDragResize extends EventEmitter {
         top: 0,
         // 设置0的话无法移动到left为0，所以只能设置为-1
         left: -1,
-        right: this.container.clientWidth,
+        right: this.container.clientWidth - 1,
         bottom: this.container.clientHeight,
         ...(moveableOptions.bounds || {}),
       },
@@ -574,74 +579,11 @@ export default class StageDragResize extends EventEmitter {
       ...moveableOptions,
     };
   }
-}
 
-/**
- * 下移组件位置
- * @param {number} deltaTop 偏移量
- * @param {Object} detail 当前选中的组件配置
- */
-export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
-  let swapIndex = 0;
-  let addUpH = target.clientHeight;
-  const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
-  );
-  const index = brothers.indexOf(target);
-  // 往下移动
-  const downEls = brothers.slice(index + 1) as HTMLElement[];
-
-  for (let i = 0; i < downEls.length; i++) {
-    const ele = downEls[i];
-    // 是 fixed 不做处理
-    if (ele.style?.position === 'fixed') {
-      continue;
-    }
-    addUpH += ele.clientHeight / 2;
-    if (deltaTop <= addUpH) {
-      break;
-    }
-    addUpH += ele.clientHeight / 2;
-    swapIndex = i;
-  }
-  return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
-  };
-};
-
-/**
- * 上移组件位置
- * @param {Array} brothers 处于同一容器下的所有子组件配置
- * @param {number} index 当前组件所处的位置
- * @param {number} deltaTop 偏移量
- * @param {Object} detail 当前选中的组件配置
- */
-export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
-  const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
-  );
-  const index = brothers.indexOf(target);
-  // 往上移动
-  const upEls = brothers.slice(0, index) as HTMLElement[];
-
-  let addUpH = target.clientHeight;
-  let swapIndex = upEls.length - 1;
-
-  for (let i = upEls.length - 1; i >= 0; i--) {
-    const ele = upEls[i];
-    if (!ele) continue;
-    // 是 fixed 不做处理
-    if (ele.style.position === 'fixed') continue;
-
-    addUpH += ele.clientHeight / 2;
-    if (-deltaTop <= addUpH) break;
-    addUpH += ele.clientHeight / 2;
-
-    swapIndex = i;
+  private canContainerHighlight() {
+    return (
+      this.core.containerHighlightType === ContainerHighlightType.DEFAULT ||
+      (this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight)
+    );
   }
-  return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
-  };
-};
+}

package/src/StageHighlight.ts

@@ -57,7 +57,7 @@ export default class StageHighlight extends EventEmitter {
       target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
       origin: false,
       rootContainer: this.core.container,
-      zoom: 1,
+      zoom: 2,
     });
   }
 

package/src/StageMask.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
 
 import { createDiv, injectStyle } from '@tmagic/utils';
@@ -82,6 +83,7 @@ export default class StageMask extends Rule {
   public maxScrollTop = 0;
   public maxScrollLeft = 0;
   public intersectionObserver: IntersectionObserver | null = null;
+  public isMultiSelectStatus: Boolean = false;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
@@ -106,6 +108,19 @@ export default class StageMask extends Rule {
     this.content.addEventListener('wheel', this.mouseWheelHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
     this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
+
+    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+    const ctrl = isMac ? 'meta' : 'ctrl';
+
+    KeyController.global.keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = true;
+    });
+    KeyController.global.keyup(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = false;
+    });
   }
 
   public setMode(mode: Mode) {
@@ -292,21 +307,28 @@ export default class StageMask extends Rule {
    */
   private mouseDownHandler = (event: MouseEvent): void => {
     this.emit('clearHighlight');
-
     event.stopImmediatePropagation();
     event.stopPropagation();
 
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
 
-    // 点击的对象如果是选中框，则不需要再触发选中了，而可能是拖动行为
+    // 如果单击多选选中区域，则不需要再触发选中了，而可能是拖动行为
+    if (!this.isMultiSelectStatus && (event.target as HTMLDivElement).className.indexOf('moveable-area') !== -1) {
+      return;
+    }
+    // 点击对象如果是边框锚点，则可能是resize
     if ((event.target as HTMLDivElement).className.indexOf('moveable-control') !== -1) {
       return;
     }
 
     this.content.removeEventListener('mousemove', this.highlightHandler);
 
-    this.emit('beforeSelect', event);
-
+    // 判断触发多选还是单选
+    if (this.isMultiSelectStatus) {
+      this.emit('beforeMultiSelect', event);
+    } else {
+      this.emit('beforeSelect', event);
+    }
     // 如果是右键点击，这里的mouseup事件监听没有效果
     globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
   };
@@ -314,7 +336,9 @@ export default class StageMask extends Rule {
   private mouseUpHandler = (): void => {
     globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
-    this.emit('select');
+    if (!this.isMultiSelectStatus) {
+      this.emit('select');
+    }
   };
 
   private mouseWheelHandler = (event: WheelEvent) => {