@tmagic/stage 1.2.0-beta.2 → 1.2.0-beta.21

package/src/DragResizeHelper.ts

@@ -0,0 +1,338 @@
+/*
+ * 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 {
+  OnDrag,
+  OnDragGroup,
+  OnDragGroupStart,
+  OnDragStart,
+  OnResize,
+  OnResizeGroup,
+  OnResizeGroupStart,
+  OnResizeStart,
+  OnRotate,
+  OnRotateStart,
+  OnScale,
+  OnScaleStart,
+} from 'moveable';
+import MoveableHelper from 'moveable-helper';
+
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from './const';
+import TargetShadow from './TargetShadow';
+import { DragResizeHelperConfig, TargetElement } from './types';
+import { getAbsolutePosition, getOffset } from './util';
+
+/**
+ * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
+ * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
+ * 有个特殊情况是流式布局下，moveableHelper不支持，targetShadow也是DragResizeHelper直接改的
+ */
+export default class DragResizeHelper {
+  /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
+  private targetShadow: TargetShadow;
+  /** 要操作的原始目标节点 */
+  private target!: HTMLElement;
+  /** 多选:目标节点组 */
+  private targetList: HTMLElement[] = [];
+  /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
+   * MoveableHelper里面的方法是成员属性，如果DragResizeHelper用继承的方式将无法通过super去调这些方法 */
+  private moveableHelper: MoveableHelper;
+  /** 流式布局下，目标节点的镜像节点 */
+  private ghostEl: HTMLElement | undefined;
+  /** 用于记录节点被改变前的位置 */
+  private frameSnapShot = {
+    left: 0,
+    top: 0,
+  };
+  /** 多选模式下的多个节点 */
+  private framesSnapShot: { left: number; top: number; id: string }[] = [];
+  /** 布局方式：流式布局、绝对定位、固定定位 */
+  private mode: Mode = Mode.ABSOLUTE;
+
+  constructor(config: DragResizeHelperConfig) {
+    this.moveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true,
+    });
+
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.DRAG_EL,
+      idPrefix: DRAG_EL_ID_PREFIX,
+    });
+  }
+
+  public destroy(): void {
+    this.targetShadow.destroy();
+    this.destroyGhostEl();
+    this.moveableHelper.clear();
+  }
+
+  public destroyShadowEl(): void {
+    this.targetShadow.destroyEl();
+  }
+
+  public getShadowEl(): TargetElement | undefined {
+    return this.targetShadow.el;
+  }
+
+  public updateShadowEl(el: HTMLElement): void {
+    this.destroyGhostEl();
+    this.target = el;
+    this.targetShadow.update(el);
+  }
+
+  public setMode(mode: Mode): void {
+    this.mode = mode;
+  }
+
+  /**
+   * 改变大小事件开始
+   * @param e 包含了拖拽节点的dom，moveableHelper会直接修改拖拽节点
+   */
+  public onResizeStart(e: OnResizeStart): void {
+    this.moveableHelper.onResizeStart(e);
+
+    this.frameSnapShot.top = this.target.offsetTop;
+    this.frameSnapShot.left = this.target.offsetLeft;
+  }
+
+  public onResize(e: OnResize): void {
+    const { width, height, drag } = e;
+    const { beforeTranslate } = drag;
+    // 流式布局
+    if (this.mode === Mode.SORTABLE) {
+      this.target.style.top = '0px';
+      if (this.targetShadow.el) {
+        this.targetShadow.el.style.width = `${width}px`;
+        this.targetShadow.el.style.height = `${height}px`;
+      }
+    } else {
+      this.moveableHelper.onResize(e);
+      this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0]}px`;
+      this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1]}px`;
+    }
+
+    this.target.style.width = `${width}px`;
+    this.target.style.height = `${height}px`;
+  }
+
+  public onDragStart(e: OnDragStart): void {
+    this.moveableHelper.onDragStart(e);
+
+    if (this.mode === Mode.SORTABLE) {
+      this.ghostEl = this.generateGhostEl(this.target);
+    }
+
+    this.frameSnapShot.top = this.target.offsetTop;
+    this.frameSnapShot.left = this.target.offsetLeft;
+  }
+
+  public onDrag(e: OnDrag): void {
+    // 流式布局
+    if (this.ghostEl) {
+      this.ghostEl.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
+      return;
+    }
+
+    this.moveableHelper.onDrag(e);
+
+    this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0]}px`;
+    this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
+  }
+
+  public onRotateStart(e: OnRotateStart): void {
+    this.moveableHelper.onRotateStart(e);
+  }
+
+  public onRotate(e: OnRotate): void {
+    this.moveableHelper.onRotate(e);
+    const frame = this.moveableHelper.getFrame(e.target);
+    this.target.style.transform = frame?.toCSSObject().transform || '';
+  }
+
+  public onScaleStart(e: OnScaleStart): void {
+    this.moveableHelper.onScaleStart(e);
+  }
+
+  public onScale(e: OnScale): void {
+    this.moveableHelper.onScale(e);
+    const frame = this.moveableHelper.getFrame(e.target);
+    this.target.style.transform = frame?.toCSSObject().transform || '';
+  }
+
+  public getGhostEl(): HTMLElement | undefined {
+    return this.ghostEl;
+  }
+
+  public destroyGhostEl(): void {
+    this.ghostEl?.remove();
+    this.ghostEl = undefined;
+  }
+
+  public clear(): void {
+    this.moveableHelper.clear();
+  }
+
+  public getFrame(el: HTMLElement | SVGElement): ReturnType<MoveableHelper['getFrame']> {
+    return this.moveableHelper.getFrame(el);
+  }
+
+  public getShadowEls(): TargetElement[] {
+    return this.targetShadow.els;
+  }
+
+  public updateGroup(els: HTMLElement[]): void {
+    this.targetList = els;
+    this.framesSnapShot = [];
+    this.targetShadow.updateGroup(els);
+  }
+
+  public setTargetList(targetList: HTMLElement[]): void {
+    this.targetList = targetList;
+  }
+
+  public clearMultiSelectStatus(): void {
+    this.targetList = [];
+    this.targetShadow.destroyEls();
+  }
+
+  public onResizeGroupStart(e: OnResizeGroupStart): void {
+    const { events } = e;
+    this.moveableHelper.onResizeGroupStart(e);
+    this.setFramesSnapShot(events);
+  }
+
+  /**
+   * 多选状态下通过拖拽边框改变大小，所有选中组件会一起改变大小
+   */
+  public onResizeGroup(e: OnResizeGroup): void {
+    const { events } = e;
+    // 拖动过程更新
+    events.forEach((ev) => {
+      const { width, height, beforeTranslate } = ev.drag;
+      const frameSnapShot = this.framesSnapShot.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 + beforeTranslate[0]}px`;
+        targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
+      }
+
+      // 更新页面元素大小
+      targeEl.style.width = `${width}px`;
+      targeEl.style.height = `${height}px`;
+    });
+    this.moveableHelper.onResizeGroup(e);
+  }
+
+  public onDragGroupStart(e: OnDragGroupStart): void {
+    const { events } = e;
+    this.moveableHelper.onDragGroupStart(e);
+    // 记录拖动前快照
+    this.setFramesSnapShot(events);
+  }
+
+  public onDragGroup(e: OnDragGroup): void {
+    const { events } = e;
+    // 拖动过程更新
+    events.forEach((ev) => {
+      const frameSnapShot = this.framesSnapShot.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.moveableHelper.onDragGroup(e);
+  }
+
+  /**
+   * 多选状态设置多个节点的快照
+   */
+  private setFramesSnapShot(events: OnDragStart[] | OnResizeStart[]): void {
+    // 同一组被选中的目标元素多次拖拽和改变大小会触发多次setFramesSnapShot，只有第一次可以设置成功
+    if (this.framesSnapShot.length > 0) return;
+    // 记录拖动前快照
+    events.forEach((ev) => {
+      // 实际目标元素
+      const matchEventTarget = this.targetList.find(
+        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+      );
+      if (!matchEventTarget) return;
+      this.framesSnapShot.push({
+        left: matchEventTarget.offsetLeft,
+        top: matchEventTarget.offsetTop,
+        id: matchEventTarget.id,
+      });
+    });
+  }
+
+  /**
+   * 流式布局把目标节点复制一份进行拖拽，在拖拽结束前不影响页面原布局样式
+   */
+  private generateGhostEl(el: HTMLElement): HTMLElement {
+    if (this.ghostEl) {
+      this.destroyGhostEl();
+    }
+
+    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;
+    ghostEl.style.opacity = '.5';
+    ghostEl.style.position = 'absolute';
+    ghostEl.style.left = `${left}px`;
+    ghostEl.style.top = `${top}px`;
+    el.after(ghostEl);
+    return ghostEl;
+  }
+
+  private setGhostElChildrenId(el: Element): void {
+    for (const child of Array.from(el.children)) {
+      if (child.id) {
+        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      }
+
+      if (child.children.length) {
+        this.setGhostElChildrenId(child);
+      }
+    }
+  }
+}

package/src/MoveableOptionsManager.ts

@@ -0,0 +1,249 @@
+/*
+ * 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 { merge } from 'lodash-es';
+import { MoveableOptions } from 'moveable';
+
+import { GuidesType, Mode } from './const';
+import selectParentAbles from './MoveableSelectParentAble';
+import { GetRootContainer, MoveableOptionsManagerConfig } from './types';
+import { getOffset } from './util';
+
+/**
+ * 单选和多选的父类，用于管理moveableOptions
+ * @extends EventEmitter
+ */
+export default class MoveableOptionsManager extends EventEmitter {
+  /** 布局方式：流式布局、绝对定位、固定定位 */
+  public mode: Mode = Mode.ABSOLUTE;
+
+  /** 画布容器 */
+  protected container: HTMLElement;
+
+  /** 水平参考线 */
+  private horizontalGuidelines: number[] = [];
+  /** 垂直参考线 */
+  private verticalGuidelines: number[] = [];
+  /** 对齐元素集合 */
+  private elementGuidelines: HTMLElement[] = [];
+  /** 由外部调用方（编辑器）传入进来的moveable默认参数，可以为空，也可以是一个回调函数 */
+  private customizedOptions?: (() => MoveableOptions) | MoveableOptions;
+  /** 获取整个画布的根元素（在StageCore的mount函数中挂载的container） */
+  private getRootContainer: GetRootContainer;
+
+  constructor(config: MoveableOptionsManagerConfig) {
+    super();
+    this.customizedOptions = config.moveableOptions;
+    this.container = config.container;
+    this.getRootContainer = config.getRootContainer;
+  }
+
+  /**
+   * 设置水平/垂直参考线
+   * @param type 参考线类型
+   * @param guidelines 参考线坐标数组
+   */
+  public setGuidelines(type: GuidesType, guidelines: number[]): void {
+    if (type === GuidesType.HORIZONTAL) {
+      this.horizontalGuidelines = guidelines;
+    } else if (type === GuidesType.VERTICAL) {
+      this.verticalGuidelines = guidelines;
+    }
+
+    this.emit('update-moveable');
+  }
+
+  /**
+   * 清除横向和纵向的参考线
+   */
+  public clearGuides(): void {
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+
+    this.emit('update-moveable');
+  }
+
+  /**
+   * 设置有哪些元素要辅助对齐
+   * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+   * @param allElList 全部元素列表
+   */
+  protected setElementGuidelines(selectedElList: HTMLElement[], allElList: HTMLElement[]): void {
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+
+    if (this.mode === Mode.ABSOLUTE) {
+      this.container.append(this.createGuidelineElements(selectedElList, allElList));
+    }
+  }
+
+  /**
+   * 获取moveable参数
+   * @param isMultiSelect 是否多选模式
+   * @param runtimeOptions 调用时实时传进来的的moveable参数
+   * @returns moveable所需参数
+   */
+  protected getOptions(isMultiSelect: boolean, runtimeOptions: MoveableOptions = {}): MoveableOptions {
+    const defaultOptions = this.getDefaultOptions(isMultiSelect);
+    const customizedOptions = this.getCustomizeOptions();
+
+    return merge(defaultOptions, customizedOptions, runtimeOptions);
+  }
+
+  /**
+   * 获取单选和多选的moveable公共参数
+   * @returns moveable公共参数
+   */
+  private getDefaultOptions(isMultiSelect: boolean): MoveableOptions {
+    const isSortable = this.mode === Mode.SORTABLE;
+
+    const commonOptions = {
+      draggable: true,
+      resizable: true,
+      rootContainer: this.getRootContainer(),
+      zoom: 1,
+      throttleDrag: 0,
+      snappable: true,
+      horizontalGuidelines: this.horizontalGuidelines,
+      verticalGuidelines: this.verticalGuidelines,
+      elementGuidelines: this.elementGuidelines,
+      bounds: {
+        top: 0,
+        // 设置0的话无法移动到left为0，所以只能设置为-1
+        left: -1,
+        right: this.container.clientWidth - 1,
+        bottom: isSortable ? undefined : this.container.clientHeight,
+      },
+    };
+    const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
+
+    return merge(commonOptions, differenceOptions);
+  }
+
+  /**
+   * 获取单选下的差异化参数
+   * @returns {MoveableOptions} moveable options参数
+   */
+  private getSingleOptions(): MoveableOptions {
+    const isAbsolute = this.mode === Mode.ABSOLUTE;
+    const isFixed = this.mode === Mode.FIXED;
+
+    return {
+      origin: false,
+      dragArea: false,
+      scalable: false,
+      rotatable: false,
+      snapGap: isAbsolute || isFixed,
+      snapThreshold: 5,
+      snapDigit: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute,
+      },
+      elementSnapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+      },
+      isDisplayInnerSnapDigit: true,
+
+      props: {
+        selectParent: true,
+      },
+
+      ables: [selectParentAbles(this.selectParentHandler.bind(this))],
+    };
+  }
+
+  /**
+   * 获取多选下的差异化参数
+   * @returns {MoveableOptions} moveable options参数
+   */
+  private getMultiOptions(): MoveableOptions {
+    return {
+      defaultGroupRotate: 0,
+      defaultGroupOrigin: '50% 50%',
+      startDragRotate: 0,
+      throttleDragRotate: 0,
+      origin: true,
+      padding: { left: 0, top: 0, right: 0, bottom: 0 },
+    };
+  }
+
+  /**
+   * 获取业务方自定义的moveable参数
+   */
+  private getCustomizeOptions(): MoveableOptions | undefined {
+    if (typeof this.customizedOptions === 'function') {
+      return this.customizedOptions();
+    }
+    return this.customizedOptions;
+  }
+
+  /**
+   * 这是给selectParentAbles的回调函数，用于触发选中父元素事件
+   */
+  private selectParentHandler(): void {
+    this.emit('select-parent');
+  }
+
+  /**
+   * 为需要辅助对齐的元素创建div
+   * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+   * @param allElList 全部元素列表
+   * @returns frame 辅助对齐元素集合的页面片
+   */
+  private createGuidelineElements(selectedElList: HTMLElement[], allElList: HTMLElement[]): DocumentFragment {
+    const frame = globalThis.document.createDocumentFragment();
+
+    for (const node of allElList) {
+      const { width, height } = node.getBoundingClientRect();
+      if (this.isInElementList(node, selectedElList)) continue;
+      const { left, top } = getOffset(node);
+      const elementGuideline = globalThis.document.createElement('div');
+      elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+      this.elementGuidelines.push(elementGuideline);
+      frame.append(elementGuideline);
+    }
+
+    return frame;
+  }
+
+  /**
+   * 判断一个元素是否在元素列表里面
+   * @param ele 元素
+   * @param eleList 元素列表
+   * @returns 是否在元素列表里面
+   */
+  private isInElementList(ele: HTMLElement, eleList: HTMLElement[]): boolean {
+    for (const eleItem of eleList) {
+      if (ele === eleItem) return true;
+    }
+    return false;
+  }
+}

package/src/MoveableSelectParentAble.ts

@@ -0,0 +1,76 @@
+import { MoveableManagerInterface, Renderer } from 'moveable';
+
+export default (selectParentHandler: () => void) => ({
+  name: 'select-parent',
+  props: {},
+  events: {},
+  render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+    const rect = moveable.getRect();
+    const { pos2 } = moveable.state;
+
+    // use css for able
+    const editableViewer = moveable.useCSS(
+      'div',
+      `
+      {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        will-change: transform;
+        transform-origin: 0px 0px;
+        display: flex;
+      }
+      .moveable-button {
+        width: 20px;
+        height: 20px;
+        background: #4af;
+        border-radius: 4px;
+        appearance: none;
+        border: 0;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      `,
+    );
+    // Add key (required)
+    // Add class prefix moveable-(required)
+    return React.createElement(
+      editableViewer,
+      {
+        className: 'moveable-editable',
+        style: {
+          transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`,
+        },
+      },
+      React.createElement(
+        'button',
+        {
+          className: 'moveable-button',
+          title: '选中父组件',
+          onClick: () => {
+            selectParentHandler();
+          },
+        },
+        React.createElement(
+          'svg',
+          {
+            width: '1em',
+            height: '1em',
+            viewBox: '0 0 16 16',
+            fill: 'none',
+            xmlns: 'http://www.w3.org/2000/svg',
+            style: {
+              transform: 'rotate(90deg)',
+            },
+          },
+          React.createElement('path', {
+            d: 'M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z',
+            fill: 'currentColor',
+            fillOpacity: '0.9',
+          }),
+        ),
+      ),
+    );
+  },
+});