@tmagic/stage 1.1.0-beta.2 → 1.1.0-beta.5

package/src/StageDragResize.ts

@@ -23,12 +23,13 @@ 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';
+import StageMask from './StageMask';
+import type { StageDragResizeConfig } from './types';
+import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -45,12 +46,13 @@ enum ActionStatus {
  */
 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;
   /** 水平参考线 */
@@ -74,9 +76,7 @@ export default class StageDragResize extends EventEmitter {
 
     this.core = config.core;
     this.container = config.container;
-
-    this.dragEl = globalThis.document.createElement('div');
-    this.container.append(this.dragEl);
+    this.mask = config.mask;
   }
 
   /**
@@ -147,6 +147,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();
+  }
+
   /**
    * 销毁实例
    */
@@ -166,9 +177,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,
     });
@@ -294,20 +311,7 @@ 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);
+        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
 
         this.dragStatus = ActionStatus.ING;
 
@@ -467,6 +471,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 +483,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 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 +558,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 || {}),
       },
@@ -575,73 +567,3 @@ export default class StageDragResize extends EventEmitter {
     };
   }
 }
-
-/**
- * 下移组件位置
- * @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;
-  }
-  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,14 @@ export default class StageMask extends Rule {
     this.content.addEventListener('wheel', this.mouseWheelHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
     this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
+    KeyController.global.keydown('shift', (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = true;
+    });
+    KeyController.global.keyup('shift', (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = false;
+    });
   }
 
   public setMode(mode: Mode) {
@@ -292,21 +302,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);
   };

package/src/StageMultiDragResize.ts

@@ -0,0 +1,231 @@
+/*
+ * 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.
+ */
+
+import { EventEmitter } from 'events';
+
+import type { MoveableOptions } from 'moveable';
+import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
+
+import { DRAG_EL_ID_PREFIX, PAGE_CLASS } from './const';
+import StageCore from './StageCore';
+import StageMask from './StageMask';
+import { StageDragResizeConfig } from './types';
+import { calcValueByFontsize, getMode, getTargetElStyle } from './util';
+export default class StageMultiDragResize extends EventEmitter {
+  public core: StageCore;
+  public mask: StageMask;
+  /** 画布容器 */
+  public container: HTMLElement;
+  /** 多选:目标节点组 */
+  public targetList: HTMLElement[] = [];
+  /** 多选:目标节点在蒙层中的占位节点组 */
+  public dragElList: HTMLDivElement[] = [];
+  /** Moveable多选拖拽类实例 */
+  public moveableForMulti?: Moveable;
+  private multiMoveableHelper?: MoveableHelper;
+
+  constructor(config: StageDragResizeConfig) {
+    super();
+
+    this.core = config.core;
+    this.container = config.container;
+    this.mask = config.mask;
+  }
+
+  /**
+   * 多选
+   * @param els
+   */
+  public multiSelect(els: HTMLElement[]): void {
+    this.targetList = els;
+    this.core.dr.destroyDragEl();
+    this.destroyDragElList();
+    // 生成虚拟多选节点
+    this.dragElList = els.map((elItem) => {
+      const dragElDiv = globalThis.document.createElement('div');
+      this.container.append(dragElDiv);
+      dragElDiv.style.cssText = getTargetElStyle(elItem);
+      dragElDiv.id = `${DRAG_EL_ID_PREFIX}${elItem.id}`;
+      // 业务方校准
+      if (typeof this.core.config.updateDragEl === 'function') {
+        this.core.config.updateDragEl(dragElDiv, elItem);
+      }
+      return dragElDiv;
+    });
+    this.moveableForMulti?.destroy();
+    this.multiMoveableHelper?.clear();
+
+    this.moveableForMulti = new Moveable(
+      this.container,
+      this.getOptions({
+        target: this.dragElList,
+      }),
+    );
+    this.multiMoveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true,
+    });
+    const frames: { left: number; top: number; id: string }[] = [];
+    this.moveableForMulti
+      .on('dragGroupStart', (params) => {
+        const { events } = params;
+        this.multiMoveableHelper?.onDragGroupStart(params);
+        // 记录拖动前快照
+        events.forEach((ev) => {
+          // 实际目标元素
+          const matchEventTarget = this.targetList.find(
+            (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+          );
+          if (!matchEventTarget) return;
+          frames.push({
+            left: matchEventTarget.offsetLeft,
+            top: matchEventTarget.offsetTop,
+            id: matchEventTarget.id,
+          });
+        });
+      })
+      .on('dragGroup', (params) => {
+        const { events } = params;
+        // 拖动过程更新
+        events.forEach((ev) => {
+          const frameSnapShot = frames.find(
+            (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+          );
+          if (!frameSnapShot) return;
+          const targeEl = this.targetList.find(
+            (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+          );
+          if (!targeEl) return;
+          // 元素与其所属组同时加入多选列表时，只更新父元素
+          const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+          if (!isParentIncluded) {
+            // 更新页面元素位置
+            targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0]}px`;
+            targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1]}px`;
+          }
+        });
+        this.multiMoveableHelper?.onDragGroup(params);
+      })
+      .on('dragGroupEnd', () => {
+        this.update();
+      });
+  }
+
+  public canSelect(el: HTMLElement): Boolean {
+    // 多选不可以选中magic-ui-page
+    if (el.className.includes(PAGE_CLASS)) {
+      this.core.highlightedDom = undefined;
+      this.core.highlightLayer.clearHighlight();
+      return false;
+    }
+    const currentTargetMode = getMode(el);
+    let selectedDomMode = '';
+
+    if (this.targetList.length === 0 && this.core.selectedDom) {
+      // 单选后添加到多选的情况
+      selectedDomMode = getMode(this.core.selectedDom);
+    } else if (this.targetList.length > 0) {
+      // 已加入多选列表的布局模式是一样的，取第一个判断
+      selectedDomMode = getMode(this.targetList[0]);
+    }
+    // 定位模式不同，不可混选
+    if (currentTargetMode !== selectedDomMode) {
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 清除多选状态
+   */
+  public clearSelectStatus(): void {
+    if (!this.moveableForMulti) return;
+    this.destroyDragElList();
+    this.moveableForMulti.target = null;
+    this.moveableForMulti.updateTarget();
+    this.targetList = [];
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.moveableForMulti?.destroy();
+    this.destroyDragElList();
+  }
+
+  /**
+   * 清除蒙层占位节点
+   */
+  public destroyDragElList(): void {
+    this.dragElList.forEach((dragElItem) => dragElItem?.remove());
+  }
+
+  /**
+   * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
+   * @param isResize 是否进行大小缩放
+   */
+  private update(isResize = false): void {
+    if (this.targetList.length === 0) return;
+
+    const { contentWindow } = this.core.renderer;
+    const doc = contentWindow?.document;
+    if (!doc) return;
+
+    this.targetList.forEach((targetItem) => {
+      const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
+      const left = calcValueByFontsize(doc, offset.left);
+      const top = calcValueByFontsize(doc, offset.top);
+      const width = calcValueByFontsize(doc, targetItem.clientWidth);
+      const height = calcValueByFontsize(doc, targetItem.clientHeight);
+      this.emit('update', {
+        el: targetItem,
+        style: isResize ? { left, top, width, height } : { left, top },
+      });
+    });
+  }
+
+  /**
+   * 获取moveable options参数
+   * @param {MoveableOptions} options
+   * @return {MoveableOptions} moveable options参数
+   */
+  private getOptions(options: MoveableOptions = {}): MoveableOptions {
+    let { moveableOptions = {} } = this.core.config;
+
+    if (typeof moveableOptions === 'function') {
+      moveableOptions = moveableOptions(this.core);
+    }
+    return {
+      defaultGroupRotate: 0,
+      defaultGroupOrigin: '50% 50%',
+      draggable: true,
+      resizable: true,
+      throttleDrag: 0,
+      startDragRotate: 0,
+      throttleDragRotate: 0,
+      zoom: 1,
+      origin: true,
+      padding: { left: 0, top: 0, right: 0, bottom: 0 },
+      ...options,
+      ...moveableOptions,
+    };
+  }
+}

package/src/StageRender.ts

@@ -72,20 +72,22 @@ export default class StageRender extends EventEmitter {
    * @param el 将页面挂载到该Dom节点上
    */
   public async mount(el: HTMLDivElement) {
-    if (this.iframe) {
-      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-        // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
-        let html = await fetch(this.runtimeUrl).then((res) => res.text());
-        // 使用base, 解决相对路径或绝对路径的问题
-        const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
-        html = html.replace('<head>', `<head>\n<base href="${base}">`);
-        this.iframe.srcdoc = html;
-      }
-
-      el.appendChild<HTMLIFrameElement>(this.iframe);
-    } else {
+    if (!this.iframe) {
       throw Error('mount 失败');
     }
+
+    if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+      // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
+      let html = await fetch(this.runtimeUrl).then((res) => res.text());
+      // 使用base, 解决相对路径或绝对路径的问题
+      const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+      html = html.replace('<head>', `<head>\n<base href="${base}">`);
+      this.iframe.srcdoc = html;
+    }
+
+    el.appendChild<HTMLIFrameElement>(this.iframe);
+
+    this.postTmagicRuntimeReady();
   }
 
   public getRuntime = (): Promise<Runtime> => {
@@ -111,26 +113,34 @@ export default class StageRender extends EventEmitter {
   }
 
   private loadHandler = async () => {
-    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+    if (!this.contentWindow?.magic) {
+      this.postTmagicRuntimeReady();
+    }
 
-    this.contentWindow.magic = this.getMagicApi();
+    if (!this.contentWindow) return;
 
     if (this.render) {
       const el = await this.render(this.core);
       if (el) {
-        this.iframe?.contentDocument?.body?.appendChild(el);
+        this.contentWindow.document?.body?.appendChild(el);
       }
     }
 
     this.emit('onload');
 
+    injectStyle(this.contentWindow.document, style);
+  };
+
+  private postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+    this.contentWindow.magic = this.getMagicApi();
+
     this.contentWindow.postMessage(
       {
         tmagicRuntimeReady: true,
       },
       '*',
     );
-
-    injectStyle(this.contentWindow.document, style);
-  };
+  }
 }

package/src/TargetCalibrate.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import { Mode } from './const';
+import { Mode, ZIndex } from './const';
 import StageCore from './StageCore';
 import StageDragResize from './StageDragResize';
 import StageMask from './StageMask';
@@ -57,6 +57,7 @@ export default class TargetCalibrate extends EventEmitter {
       top: ${top}px;
       width: ${el.clientWidth}px;
       height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
 
     this.operationEl.id = `${prefix}${el.id}`;

package/src/const.ts

@@ -27,6 +27,8 @@ export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
 export const CONTAINER_HIGHLIGHT_CLASS = 'tmagic-stage-container-highlight';
 
+export const PAGE_CLASS = 'magic-ui-page';
+
 /** 默认放到缩小倍数 */
 export const DEFAULT_ZOOM = 1;
 

package/src/style.css

@@ -7,4 +7,5 @@
   left: 0;
   background-color: #000;
   opacity: .1;
+  pointer-events: none;
 }

package/src/types.ts

@@ -19,7 +19,7 @@
 import { MoveableOptions } from 'moveable';
 
 import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 
 import { GuidesType } from './const';
 import StageCore from './StageCore';
@@ -57,6 +57,7 @@ export interface StageMaskConfig {
 export interface StageDragResizeConfig {
   core: StageCore;
   container: HTMLElement;
+  mask: StageMask;
 }
 
 export type Rect = {
@@ -98,6 +99,7 @@ export interface SortEventData {
 
 export interface UpdateData {
   config: MNode;
+  parent?: MContainer;
   root: MApp;
 }