@tmagic/stage 1.0.3 → 1.1.0-beta.0

package/dist/types/src/util.d.ts

@@ -5,8 +5,6 @@ export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offse
     left: number;
     top: number;
 };
-export declare const getHost: (targetUrl: string) => string | undefined;
-export declare const isSameDomain: (targetUrl?: string, source?: string) => boolean;
 export declare const isAbsolute: (style: CSSStyleDeclaration) => boolean;
 export declare const isRelative: (style: CSSStyleDeclaration) => boolean;
 export declare const isStatic: (style: CSSStyleDeclaration) => boolean;
@@ -14,9 +12,6 @@ export declare const isFixed: (style: CSSStyleDeclaration) => boolean;
 export declare const isFixedParent: (el: HTMLElement) => boolean;
 export declare const getMode: (el: HTMLElement) => Mode;
 export declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
-export declare const createDiv: ({ className, cssText }: {
-    className: string;
-    cssText: string;
-}) => HTMLDivElement;
 export declare const removeSelectedClassName: (doc: Document) => void;
 export declare const addSelectedClassName: (el: Element, doc: Document) => void;
+export declare const calcValueByFontsize: (doc: Document, value: number) => number;

package/dist/types/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.3",
+  "version": "1.1.0-beta.0",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.0.3",
-    "@tmagic/schema": "1.0.3",
-    "@tmagic/utils": "1.0.3",
+    "@tmagic/core": "1.1.0-beta.0",
+    "@tmagic/schema": "1.1.0-beta.0",
+    "@tmagic/utils": "1.1.0-beta.0",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.30.0",

package/src/StageCore.ts

@@ -28,6 +28,7 @@ import StageRender from './StageRender';
 import {
   CanSelect,
   GuidesEventData,
+  IsContainer,
   RemoveData,
   Runtime,
   SortEventData,
@@ -38,16 +39,20 @@ import {
 import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageCore extends EventEmitter {
+  public container?: HTMLDivElement;
+
   public selectedDom: Element | undefined;
   public highlightedDom: Element | undefined;
-
   public renderer: StageRender;
   public mask: StageMask;
   public dr: StageDragResize;
   public highlightLayer: StageHighlight;
   public config: StageCoreConfig;
   public zoom = DEFAULT_ZOOM;
-  public container?: HTMLDivElement;
+  public containerHighlightClassName: string;
+  public containerHighlightDuration: number;
+  public isContainer: IsContainer;
+
   private canSelect: CanSelect;
 
   constructor(config: StageCoreConfig) {
@@ -57,6 +62,9 @@ export default class StageCore extends EventEmitter {
 
     this.setZoom(config.zoom);
     this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
+    this.isContainer = config.isContainer;
+    this.containerHighlightClassName = config.containerHighlightClassName;
+    this.containerHighlightDuration = config.containerHighlightDuration;
 
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });
@@ -104,7 +112,7 @@ export default class StageCore extends EventEmitter {
       });
   }
 
-  public async setElementFromPoint(event: MouseEvent) {
+  public getElementsFromPoint(event: MouseEvent) {
     const { renderer, zoom } = this;
 
     const doc = renderer.contentWindow?.document;
@@ -119,7 +127,11 @@ export default class StageCore extends EventEmitter {
       }
     }
 
-    const els = doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+    return doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+  }
+
+  public async setElementFromPoint(event: MouseEvent) {
+    const els = this.getElementsFromPoint(event);
 
     let stopped = false;
     const stop = () => (stopped = true);

package/src/StageDragResize.ts

@@ -23,10 +23,12 @@ import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
+import { addClassName, 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 { getAbsolutePosition, getMode, getOffset } from './util';
+import { calcValueByFontsize, getAbsolutePosition, getMode, getOffset } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -179,20 +181,24 @@ export default class StageDragResize extends EventEmitter {
     this.elementGuidelines = [];
 
     if (this.mode === Mode.ABSOLUTE) {
-      const frame = document.createDocumentFragment();
-
-      for (const node of nodes) {
-        const { width, height } = node.getBoundingClientRect();
-        if (node === this.target) continue;
-        const { left, top } = getOffset(node as HTMLElement);
-        const elementGuideline = 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);
-      }
+      this.container.append(this.createGuidelineElements(nodes));
+    }
+  }
 
-      this.container.append(frame);
+  private createGuidelineElements(nodes: HTMLElement[]) {
+    const frame = globalThis.document.createDocumentFragment();
+
+    for (const node of nodes) {
+      const { width, height } = node.getBoundingClientRect();
+      if (node === this.target) continue;
+      const { left, top } = getOffset(node as HTMLElement);
+      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;
   }
 
   private initMoveable() {
@@ -260,6 +266,11 @@ export default class StageDragResize extends EventEmitter {
       top: 0,
     };
 
+    let timeout: NodeJS.Timeout | undefined;
+
+    const { contentWindow } = this.core.renderer;
+    const doc = contentWindow?.document;
+
     this.moveable
       .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
@@ -278,6 +289,26 @@ export default class StageDragResize extends EventEmitter {
       .on('drag', (e) => {
         if (!this.target || !this.dragEl) return;
 
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          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);
+
         this.dragStatus = ActionStatus.ING;
 
         // 流式布局
@@ -292,14 +323,29 @@ export default class StageDragResize extends EventEmitter {
         this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
       })
       .on('dragEnd', () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
+
+        let parentEl: HTMLElement | null = null;
+
+        if (doc) {
+          parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+        }
+
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
         if (this.dragStatus === ActionStatus.ING) {
-          switch (this.mode) {
-            case Mode.SORTABLE:
-              this.sort();
-              break;
-            default:
-              this.update();
+          if (parentEl) {
+            this.update(false, parentEl);
+          } else {
+            switch (this.mode) {
+              case Mode.SORTABLE:
+                this.sort();
+                break;
+              default:
+                this.update();
+            }
           }
         }
 
@@ -381,19 +427,36 @@ export default class StageDragResize extends EventEmitter {
     }
   }
 
-  private update(isResize = false): void {
+  private update(isResize = false, parentEl: HTMLElement | null = null): void {
     if (!this.target) return;
 
+    const { contentWindow } = this.core.renderer;
+    const doc = contentWindow?.document;
+
+    if (!doc) return;
+
     const offset =
       this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
 
-    const left = this.calcValueByFontsize(offset.left);
-    const top = this.calcValueByFontsize(offset.top);
-    const width = this.calcValueByFontsize(this.target.clientWidth);
-    const height = this.calcValueByFontsize(this.target.clientHeight);
+    let left = calcValueByFontsize(doc, offset.left);
+    let top = calcValueByFontsize(doc, offset.top);
+    const width = calcValueByFontsize(doc, this.target.clientWidth);
+    const height = calcValueByFontsize(doc, this.target.clientHeight);
+
+    if (parentEl && this.mode === Mode.ABSOLUTE && this.dragEl) {
+      const [translateX, translateY] = this.moveableHelper?.getFrame(this.dragEl).properties.transform.translate.value;
+      const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+      left =
+        calcValueByFontsize(doc, this.dragEl.offsetLeft) +
+        parseFloat(translateX) -
+        calcValueByFontsize(doc, parentLeft);
+      top =
+        calcValueByFontsize(doc, this.dragEl.offsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
+    }
 
     this.emit('update', {
       el: this.target,
+      parentEl,
       style: isResize ? { left, top, width, height } : { left, top },
     });
   }
@@ -511,18 +574,6 @@ export default class StageDragResize extends EventEmitter {
       ...moveableOptions,
     };
   }
-
-  private calcValueByFontsize(value: number) {
-    const { contentWindow } = this.core.renderer;
-    const fontSize = contentWindow?.document.documentElement.style.fontSize;
-
-    if (fontSize) {
-      const times = globalThis.parseFloat(fontSize) / 100;
-      return (value / times).toFixed(2);
-    }
-
-    return value;
-  }
 }
 
 /**

package/src/StageHighlight.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-param-reassign */
 import { EventEmitter } from 'events';
 
 import Moveable from 'moveable';

package/src/StageMask.ts

@@ -18,21 +18,19 @@
 
 import { throttle } from 'lodash-es';
 
+import { createDiv, injectStyle } from '@tmagic/utils';
+
 import { Mode, MouseButton, ZIndex } from './const';
 import Rule from './Rule';
 import type StageCore from './StageCore';
 import type { StageMaskConfig } from './types';
-import { createDiv, getScrollParent, isFixedParent } from './util';
+import { getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
 const throttleTime = 100;
 
 const hideScrollbar = () => {
-  const style = globalThis.document.createElement('style');
-  style.innerHTML = `
-    .${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }
-  `;
-  globalThis.document.head.appendChild(style);
+  injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
 };
 
 const createContent = (): HTMLDivElement =>

package/src/StageRender.ts

@@ -18,9 +18,11 @@
 
 import { EventEmitter } from 'events';
 
+import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
+
 import StageCore from './StageCore';
+import style from './style.css?raw';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
-import { getHost, isSameDomain } from './util';
 
 export default class StageRender extends EventEmitter {
   /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
@@ -128,5 +130,7 @@ export default class StageRender extends EventEmitter {
       },
       '*',
     );
+
+    injectStyle(this.contentWindow.document, style);
   };
 }

package/src/TargetCalibrate.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-param-reassign */
 import { EventEmitter } from 'events';
 
 import { Mode } from './const';

package/src/const.ts

@@ -25,6 +25,8 @@ export const DRAG_EL_ID_PREFIX = 'drag_el_';
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
+export const CONTAINER_HIGHLIGHT_CLASS = 'tmagic-stage-container-highlight';
+
 /** 默认放到缩小倍数 */
 export const DEFAULT_ZOOM = 1;
 

package/src/index.ts

@@ -24,4 +24,5 @@ export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';
 export * from './types';
 export * from './const';
+export * from './util';
 export default StageCore;

package/src/style.css

@@ -0,0 +1,10 @@
+.tmagic-stage-container-highlight::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: .1;
+}

package/src/types.ts

@@ -27,6 +27,7 @@ import StageDragResize from './StageDragResize';
 import StageMask from './StageMask';
 
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
+export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
 
 export type StageCoreConfig = {
   /** 需要对齐的dom节点的CSS选择器字符串 */
@@ -34,6 +35,9 @@ export type StageCoreConfig = {
   /** 放大倍数，默认1倍 */
   zoom?: number;
   canSelect?: CanSelect;
+  isContainer: IsContainer;
+  containerHighlightClassName: string;
+  containerHighlightDuration: number;
   moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
@@ -72,6 +76,7 @@ export interface GuidesEventData {
 
 export interface UpdateEventData {
   el: HTMLElement;
+  parentEl: HTMLElement | null;
   ghostEl: HTMLElement;
   style: {
     width?: number;

package/src/util.ts

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { removeClassName } from '@tmagic/utils';
 
 import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
@@ -63,16 +64,6 @@ export const getAbsolutePosition = (el: HTMLElement, { top, left }: Offset) => {
   return { left, top };
 };
 
-export const getHost = (targetUrl: string) => targetUrl.match(/\/\/([^/]+)/)?.[1];
-
-export const isSameDomain = (targetUrl = '', source = globalThis.location.host) => {
-  const isHttpUrl = /^(http[s]?:)?\/\//.test(targetUrl);
-
-  if (!isHttpUrl) return true;
-
-  return getHost(targetUrl) === source;
-};
-
 export const isAbsolute = (style: CSSStyleDeclaration): boolean => style.position === 'absolute';
 
 export const isRelative = (style: CSSStyleDeclaration): boolean => style.position === 'relative';
@@ -123,21 +114,14 @@ export const getScrollParent = (element: HTMLElement, includeHidden = false): HT
   return null;
 };
 
-export const createDiv = ({ className, cssText }: { className: string; cssText: string }) => {
-  const el = globalThis.document.createElement('div');
-  el.className = className;
-  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`);
+    removeClassName(oldEl, SELECTED_CLASS);
+    if (oldEl.parentNode) removeClassName(oldEl.parentNode as Element, `${SELECTED_CLASS}-parent`);
     doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
-      item.classList.remove(`${SELECTED_CLASS}-parents`);
+      removeClassName(item, `${SELECTED_CLASS}-parents`);
     });
   }
 };
@@ -149,3 +133,14 @@ export const addSelectedClassName = (el: Element, doc: Document) => {
     item.classList.add(`${SELECTED_CLASS}-parents`);
   });
 };
+
+export const calcValueByFontsize = (doc: Document, value: number) => {
+  const { fontSize } = doc.documentElement.style;
+
+  if (fontSize) {
+    const times = globalThis.parseFloat(fontSize) / 100;
+    return Number((value / times).toFixed(2));
+  }
+
+  return value;
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />