@tmagic/stage 1.0.0-beta.8 → 1.0.0-rc.2

package/src/StageHighlight.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 { 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,
+    });
+  }
+
+  /**
+   * 高亮鼠标悬停的组件
+   * @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.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
+      origin: false,
+      rootContainer: this.core.container,
+      zoom: 1,
+    });
+  }
+
+  /**
+   * 清空高亮
+   */
+  public clearHighlight(): void {
+    if (!this.moveable) return;
+    this.target = undefined;
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.moveable?.destroy();
+    this.calibrationTarget.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');
@@ -78,10 +81,19 @@ export default class StageMask extends Rule {
   public height = 0;
   public wrapperHeight = 0;
   public wrapperWidth = 0;
+  public maxScrollTop = 0;
+  public maxScrollLeft = 0;
 
   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 +105,8 @@ 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);
+    this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
   }
 
   public setMode(mode: Mode) {
@@ -125,6 +139,10 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
+
+        this.fixScrollValue();
+        this.scroll();
+        this.core.dr.updateMoveable();
       });
 
       this.pageResizeObserver.observe(page);
@@ -134,6 +152,8 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+        this.setMaxScrollLeft();
+        this.setMaxScrollTop();
       });
       this.wrapperResizeObserver.observe(this.wrapper);
     }
@@ -153,6 +173,16 @@ export default class StageMask extends Rule {
     this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
   }
 
+  public scrollIntoView(el: HTMLElement): void {
+    if (this.mode === Mode.FIXED) return;
+
+    el.scrollIntoView();
+    if (!this.pageScrollParent) return;
+    this.scrollLeft = this.pageScrollParent.scrollLeft;
+    this.scrollTop = this.pageScrollParent.scrollTop;
+    this.scroll();
+  }
+
   /**
    * 销毁实例
    */
@@ -162,12 +192,21 @@ export default class StageMask extends Rule {
     this.pageScrollParent = null;
     this.pageResizeObserver?.disconnect();
     this.wrapperResizeObserver?.disconnect();
+
+    this.content.removeEventListener('mouseleave', this.mouseLeaveHandler);
     super.destroy();
   }
 
   private scroll() {
     let { scrollLeft, scrollTop } = this;
 
+    if (this.pageScrollParent) {
+      this.pageScrollParent.scrollTo({
+        top: scrollTop,
+        left: scrollLeft,
+      });
+    }
+
     if (this.mode === Mode.FIXED) {
       scrollLeft = 0;
       scrollTop = 0;
@@ -187,6 +226,7 @@ export default class StageMask extends Rule {
    */
   private setHeight(height: number): void {
     this.height = height;
+    this.setMaxScrollTop();
     this.content.style.height = `${height}px`;
   }
 
@@ -196,14 +236,42 @@ export default class StageMask extends Rule {
    */
   private setWidth(width: number): void {
     this.width = width;
+    this.setMaxScrollLeft();
     this.content.style.width = `${width}px`;
   }
 
+  /**
+   * 计算并设置最大滚动宽度
+   */
+  private setMaxScrollLeft(): void {
+    this.maxScrollLeft = this.width - this.wrapperWidth;
+  }
+
+  /**
+   * 计算并设置最大滚动高度
+   */
+  private setMaxScrollTop(): void {
+    this.maxScrollTop = this.height - this.wrapperHeight;
+  }
+
+  /**
+   * 修复滚动距离
+   * 由于滚动容器变化等因素，会导致当前滚动的距离不正确
+   */
+  private fixScrollValue(): void {
+    if (this.scrollTop < 0) this.scrollTop = 0;
+    if (this.scrollLeft < 0) this.scrollLeft = 0;
+    if (this.maxScrollTop < this.scrollTop) this.scrollTop = this.maxScrollTop;
+    if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
+  }
+
   /**
    * 点击事件处理函数
    * @param event 事件对象
    */
-  private mouseDownHandler = async (event: MouseEvent): Promise<void> => {
+  private mouseDownHandler = (event: MouseEvent): void => {
+    this.emit('clearHighlight');
+
     event.stopImmediatePropagation();
     event.stopPropagation();
 
@@ -214,6 +282,8 @@ export default class StageMask extends Rule {
       return;
     }
 
+    this.content.removeEventListener('mousemove', this.highlightHandler);
+
     this.emit('beforeSelect', event);
 
     // 如果是右键点击，这里的mouseup事件监听没有效果
@@ -222,46 +292,35 @@ export default class StageMask extends Rule {
 
   private mouseUpHandler = (): void => {
     globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
+    this.content.addEventListener('mousemove', this.highlightHandler);
     this.emit('select');
   };
 
   private mouseWheelHandler = (event: WheelEvent) => {
+    this.emit('clearHighlight');
     if (!this.page) throw new Error('page 未初始化');
 
     const { deltaY, deltaX } = event;
-    const { height, wrapperHeight, width, wrapperWidth } = this;
 
-    const maxScrollTop = height - wrapperHeight;
-    const maxScrollLeft = width - wrapperWidth;
+    if (this.page.clientHeight < this.wrapperHeight && deltaY) return;
+    if (this.page.clientWidth < this.wrapperWidth && deltaX) return;
 
-    if (maxScrollTop > 0) {
-      if (deltaY > 0) {
-        this.scrollTop = this.scrollTop + Math.min(maxScrollTop - this.scrollTop, deltaY);
-      } else {
-        this.scrollTop = Math.max(this.scrollTop + deltaY, 0);
-      }
+    if (this.maxScrollTop > 0) {
+      this.scrollTop = this.scrollTop + deltaY;
     }
 
-    if (width > wrapperWidth) {
-      if (deltaX > 0) {
-        this.scrollLeft = this.scrollLeft + Math.min(maxScrollLeft - this.scrollLeft, deltaX);
-      } else {
-        this.scrollLeft = Math.max(this.scrollLeft + deltaX, 0);
-      }
+    if (this.maxScrollLeft > 0) {
+      this.scrollLeft = this.scrollLeft + deltaX;
     }
 
-    if (this.mode !== Mode.FIXED) {
-      this.scrollTo(this.scrollLeft, this.scrollTop);
-    }
+    this.fixScrollValue();
 
-    if (this.pageScrollParent) {
-      this.pageScrollParent.scrollTo({
-        top: this.scrollTop,
-        left: this.scrollLeft,
-      });
-    }
     this.scroll();
 
     this.emit('scroll', event);
   };
+
+  private mouseLeaveHandler = () => {
+    setTimeout(() => this.emit('clearHighlight'), throttleTime);
+  };
 }

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/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

@@ -19,6 +19,10 @@
 // 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀
 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;
 
@@ -29,6 +33,7 @@ export enum GuidesType {
 
 export enum ZIndex {
   MASK = '99999',
+  SELECTED_EL = '666',
 }
 
 export enum MouseButton {
@@ -42,3 +47,5 @@ export enum Mode {
   FIXED = 'fixed',
   SORTABLE = 'sortable',
 }
+
+export const SELECTED_CLASS = 'tmagic-stage-selected-area';

package/src/types.ts

@@ -22,8 +22,10 @@ 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, stop: () => boolean) => boolean | Promise<boolean>;
+export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 
 export type StageCoreConfig = {
   /** 需要对齐的dom节点的CSS选择器字符串 */
@@ -54,7 +56,6 @@ export type Rect = {
   width: number;
   height: number;
 } & Offset;
-
 export interface Offset {
   left: number;
   top: number;
@@ -94,7 +95,7 @@ export interface RemoveData {
 
 export interface Runtime {
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
-  getSnapElements?: (el: HTMLElement) => HTMLElement[];
+  getSnapElements?: (el?: HTMLElement) => HTMLElement[];
   updateRootConfig: (config: MApp) => void;
   updatePageId?: (id: Id) => void;
   select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
@@ -114,3 +115,14 @@ export interface Magic {
 export interface RuntimeWindow extends Window {
   magic: Magic;
 }
+
+export interface StageHighlightConfig {
+  core: StageCore;
+  container: HTMLElement;
+}
+
+export interface TargetCalibrateConfig {
+  parent: HTMLElement;
+  mask: StageMask;
+  dr: StageDragResize;
+}

package/src/util.ts

@@ -16,9 +16,19 @@
  * limitations under the License.
  */
 
-import { Mode } from './const';
+import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
+const getParents = (el: Element, relative: Element) => {
+  let cur: Element | null = el.parentElement;
+  const parents: Element[] = [];
+  while (cur && cur !== relative) {
+    parents.push(cur);
+    cur = cur.parentElement;
+  }
+  return parents;
+};
+
 export const getOffset = (el: HTMLElement): Offset => {
   const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
@@ -154,3 +164,23 @@ 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`);
+    doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+      item.classList.remove(`${SELECTED_CLASS}-parents`);
+    });
+  }
+};
+
+export const addSelectedClassName = (el: Element, doc: Document) => {
+  el.classList.add(SELECTED_CLASS);
+  (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+  getParents(el, doc.body).forEach((item) => {
+    item.classList.add(`${SELECTED_CLASS}-parents`);
+  });
+};

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": "../..",
-  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
-}

package/vite.config.ts

@@ -1,27 +0,0 @@
-/*
- * 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 { defineConfig } from 'vite';
-
-import { getBaseConfig } from '../vite-config';
-
-import pkg from './package.json';
-
-const deps = Object.keys(pkg.dependencies);
-
-export default defineConfig(getBaseConfig(deps, 'TMagicStage'));