@tmagic/stage 1.0.0-beta.8 → 1.0.0-beta.9

package/src/StageDragResize.ts

@@ -21,6 +21,7 @@ import { EventEmitter } from 'events';
 
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
 
 import { GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
 import StageCore from './StageCore';
@@ -49,6 +50,7 @@ export default class StageDragResize extends EventEmitter {
   private dragStatus: ActionStatus = ActionStatus.END;
   private ghostEl: HTMLElement | undefined;
   private mode: Mode = Mode.ABSOLUTE;
+  private moveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
     super();
@@ -79,6 +81,12 @@ export default class StageDragResize extends EventEmitter {
       target: this.dragEl || this.target,
     });
 
+    this.moveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true,
+    });
+
     this.initMoveable();
 
     if (event) {
@@ -188,34 +196,42 @@ export default class StageDragResize extends EventEmitter {
   private bindDragEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
+    let offset = {
+      left: 0,
+      top: 0,
+    };
+
     this.moveable
-      .on('dragStart', () => {
+      .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
         this.dragStatus = ActionStatus.START;
 
+        this.moveableHelper?.onDragStart(e);
+
+        offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
+
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
         }
       })
-      .on('drag', ({ left, top }) => {
+      .on('drag', (e) => {
         if (!this.target || !this.dragEl) return;
         this.dragStatus = ActionStatus.ING;
 
-        const offset = getAbsolutePosition(this.target, { left, top });
+        const { left, top } = e;
 
         // 流式布局
         if (this.ghostEl) {
           this.dragEl.style.top = `${top}px`;
-          this.ghostEl.style.top = `${offset.top}px`;
+          this.ghostEl.style.top = `${top + offset.top}px`;
           return;
         }
 
-        this.dragEl.style.left = `${left}px`;
-        this.dragEl.style.top = `${top}px`;
+        this.moveableHelper?.onDrag(e);
 
-        this.target.style.left = `${offset.left}px`;
-        this.target.style.top = `${offset.top}px`;
+        this.target.style.left = `${left + offset.left}px`;
+        this.target.style.top = `${top + offset.top}px`;
       })
       .on('dragEnd', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
@@ -342,18 +358,26 @@ export default class StageDragResize extends EventEmitter {
     }
 
     return {
-      scrollable: true,
       origin: true,
+      rootContainer: this.core.container,
       zoom: 1,
-      dragArea: true,
+      dragArea: false,
       draggable: true,
       resizable: true,
       snappable: isAbsolute,
       snapGap: isAbsolute,
-      snapDirections: { center: isAbsolute, middle: isAbsolute },
-      elementSnapDirections: { center: isAbsolute, middle: isAbsolute },
-
-      elementGuidelines: isAbsolute ? await this.getSnapElements(this.target) : [],
+      snapThreshold: 5,
+      snapDigit: 0,
+      throttleDrag: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute,
+      },
       horizontalGuidelines: this.horizontalGuidelines,
       verticalGuidelines: this.verticalGuidelines,
 

package/src/StageHighlight.ts

@@ -0,0 +1,67 @@
+/*
+ * 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 Moveable from 'moveable';
+
+import StageCore from './StageCore';
+import type { StageHighlightConfig } from './types';
+export default class StageHighlight extends EventEmitter {
+  public core: StageCore;
+  public container: HTMLElement;
+  public target?: HTMLElement;
+  public moveable?: Moveable;
+
+  constructor(config: StageHighlightConfig) {
+    super();
+
+    this.core = config.core;
+    this.container = config.container;
+  }
+
+  /**
+   * 高亮鼠标悬停的组件
+   * @param el 选中组件的Dom节点元素
+   */
+  public highlight(el: HTMLElement): void {
+    if (!el || el === this.target) return;
+    this.target = el;
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      target: this.target,
+    });
+  }
+
+  /**
+   * 清空高亮
+   */
+  public clearHighlight(): void {
+    if (!this.moveable) return;
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.moveable?.destroy();
+  }
+}

package/src/StageMask.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { throttle } from 'lodash-es';
+
 import { Mode, MouseButton, ZIndex } from './const';
 import Rule from './Rule';
 import type StageCore from './StageCore';
@@ -23,6 +25,7 @@ import type { StageMaskConfig } from './types';
 import { createDiv, getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
+const throttleTime = 100;
 
 const hideScrollbar = () => {
   const style = globalThis.document.createElement('style');
@@ -82,6 +85,13 @@ export default class StageMask extends Rule {
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
   private wrapperResizeObserver: ResizeObserver | null = null;
+  /**
+   * 高亮事件处理函数
+   * @param event 事件对象
+   */
+  private highlightHandler = throttle((event: MouseEvent): void => {
+    this.emit('highlight', event);
+  }, throttleTime);
 
   constructor(config: StageMaskConfig) {
     const wrapper = createWrapper();
@@ -93,6 +103,7 @@ export default class StageMask extends Rule {
     this.content.addEventListener('mousedown', this.mouseDownHandler);
     this.wrapper.appendChild(this.content);
     this.content.addEventListener('wheel', this.mouseWheelHandler);
+    this.content.addEventListener('mousemove', this.highlightHandler);
   }
 
   public setMode(mode: Mode) {
@@ -203,7 +214,7 @@ export default class StageMask extends Rule {
    * 点击事件处理函数
    * @param event 事件对象
    */
-  private mouseDownHandler = async (event: MouseEvent): Promise<void> => {
+  private mouseDownHandler = (event: MouseEvent): void => {
     event.stopImmediatePropagation();
     event.stopPropagation();
 
@@ -218,10 +229,13 @@ export default class StageMask extends Rule {
 
     // 如果是右键点击，这里的mouseup事件监听没有效果
     globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
+    this.content.removeEventListener('mousemove', this.highlightHandler);
+    this.emit('clearHighlight');
   };
 
   private mouseUpHandler = (): void => {
     globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
+    this.content.addEventListener('mousemove', this.highlightHandler);
     this.emit('select');
   };
 

package/src/StageRender.ts

@@ -18,6 +18,7 @@
 
 import { EventEmitter } from 'events';
 
+import { SELECTED_CLASS, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
 import { getHost, isSameDomain } from './util';
@@ -114,11 +115,23 @@ export default class StageRender extends EventEmitter {
 
   private loadHandler = async () => {
     this.emit('onload');
+
     if (this.render) {
       const el = await this.render(this.core);
       if (el) {
         this.iframe?.contentDocument?.body?.appendChild(el);
       }
     }
+
+    if (this.contentWindow) {
+      const style = this.contentWindow.document.createElement('style');
+      style.id = 'tmagic-stage-render';
+      style.innerHTML = `
+        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
+          z-index: ${ZIndex.SELECTED_EL};
+        }
+      `;
+      this.contentWindow.document.head.appendChild(style);
+    }
   };
 }

package/src/const.ts

@@ -29,6 +29,7 @@ export enum GuidesType {
 
 export enum ZIndex {
   MASK = '99999',
+  SELECTED_EL = '666',
 }
 
 export enum MouseButton {
@@ -42,3 +43,5 @@ export enum Mode {
   FIXED = 'fixed',
   SORTABLE = 'sortable',
 }
+
+export const SELECTED_CLASS = 'tmagic-stage-selected-area';

package/src/types.ts

@@ -114,3 +114,8 @@ export interface Magic {
 export interface RuntimeWindow extends Window {
   magic: Magic;
 }
+
+export interface StageHighlightConfig {
+  core: StageCore;
+  container: HTMLElement;
+}

package/src/util.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Mode } from './const';
+import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
 export const getOffset = (el: HTMLElement): Offset => {
@@ -154,3 +154,17 @@ export const createDiv = ({ className, cssText }: { className: string; cssText:
   el.style.cssText = cssText;
   return el;
 };
+
+export const removeSelectedClassName = (doc: Document) => {
+  const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+
+  if (oldEl) {
+    oldEl.classList.remove(SELECTED_CLASS);
+    (oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`);
+  }
+};
+
+export const addSelectedClassName = (el: Element) => {
+  el.classList.add(SELECTED_CLASS);
+  (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+};