npm - @tmagic/stage - Versions diffs - 1.4.6 → 1.4.8 - Mend

@tmagic/stage 1.4.6 → 1.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/tmagic-stage.js +69 -138
package/dist/tmagic-stage.umd.cjs +69 -138
package/package.json +9 -5
package/src/ActionManager.ts +0 -661
package/src/DragResizeHelper.ts +0 -396
package/src/MoveableActionsAble.ts +0 -91
package/src/MoveableOptionsManager.ts +0 -274
package/src/Rule.ts +0 -173
package/src/StageCore.ts +0 -417
package/src/StageDragResize.ts +0 -357
package/src/StageHighlight.ts +0 -89
package/src/StageMask.ts +0 -337
package/src/StageMultiDragResize.ts +0 -229
package/src/StageRender.ts +0 -252
package/src/TargetShadow.ts +0 -122
package/src/const.ts +0 -111
package/src/index.ts +0 -29
package/src/logger.ts +0 -37
package/src/moveable-able.css +0 -108
package/src/style.css +0 -15
package/src/types.ts +0 -309
package/src/util.ts +0 -272
package/tsconfig.build.json +0 -13

package/src/StageRender.ts DELETED Viewed

@@ -1,252 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 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 { Id } from '@tmagic/schema';
-import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
-import { DEFAULT_ZOOM, RenderType } from './const';
-import style from './style.css?raw';
-import type { Point, RemoveData, RenderEvents, Runtime, RuntimeWindow, StageRenderConfig, UpdateData } from './types';
-import { addSelectedClassName, removeSelectedClassName } from './util';
-export default class StageRender extends EventEmitter {
-  /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
-  public contentWindow: RuntimeWindow | null = null;
-  public runtime: Runtime | null = null;
-  public iframe?: HTMLIFrameElement;
-  public nativeContainer?: HTMLDivElement;
-  private runtimeUrl?: string;
-  private zoom = DEFAULT_ZOOM;
-  private renderType: RenderType;
-  private customizedRender?: () => Promise<HTMLElement | null>;
-  constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }: StageRenderConfig) {
-    super();
-    this.renderType = renderType;
-    this.runtimeUrl = runtimeUrl || '';
-    this.customizedRender = customizedRender;
-    this.setZoom(zoom);
-    if (this.renderType === RenderType.IFRAME) {
-      this.createIframe();
-    } else if (this.renderType === RenderType.NATIVE) {
-      this.createNativeContainer();
-    }
-  }
-  public getMagicApi = () => ({
-    onPageElUpdate: (el: HTMLElement) => this.emit('page-el-update', el),
-    onRuntimeReady: (runtime: Runtime) => {
-      this.runtime = runtime;
-      // @ts-ignore
-      globalThis.runtime = runtime;
-      this.emit('runtime-ready', runtime);
-    },
-  });
-  public async add(data: UpdateData): Promise<void> {
-    const runtime = await this.getRuntime();
-    return runtime?.add?.(data);
-  }
-  public async remove(data: RemoveData): Promise<void> {
-    const runtime = await this.getRuntime();
-    return runtime?.remove?.(data);
-  }
-  public async update(data: UpdateData): Promise<void> {
-    const runtime = await this.getRuntime();
-    // 更新画布中的组件
-    runtime?.update?.(data);
-  }
-  public async select(ids: Id[]): Promise<void> {
-    const runtime = await this.getRuntime();
-    for (const id of ids) {
-      await runtime?.select?.(id);
-      this.flagSelectedEl(this.getTargetElement(id));
-    }
-  }
-  public setZoom(zoom: number = DEFAULT_ZOOM): void {
-    this.zoom = zoom;
-  }
-  /**
-   * 挂载Dom节点
-   * @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);
-      this.postTmagicRuntimeReady();
-    } else if (this.nativeContainer) {
-      el.appendChild(this.nativeContainer);
-    }
-  }
-  public getRuntime = (): Promise<Runtime> => {
-    if (this.runtime) return Promise.resolve(this.runtime);
-    return new Promise((resolve) => {
-      const listener = (runtime: Runtime) => {
-        this.off('runtime-ready', listener);
-        resolve(runtime);
-      };
-      this.on('runtime-ready', listener);
-    });
-  };
-  public getDocument(): Document | undefined {
-    return this.contentWindow?.document;
-  }
-  /**
-   * 通过坐标获得坐标下所有HTML元素数组
-   * @param point 坐标
-   * @returns 坐标下方所有HTML元素数组，会包含父元素直至html，元素层叠时返回顺序是从上到下
-   */
-  public getElementsFromPoint(point: Point): HTMLElement[] {
-    let x = point.clientX;
-    let y = point.clientY;
-    if (this.iframe) {
-      const rect = this.iframe.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
-    }
-    return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom) as HTMLElement[];
-  }
-  public getTargetElement(id: Id): HTMLElement | null {
-    return this.getDocument()?.getElementById(`${id}`) || null;
-  }
-  /**
-   * 销毁实例
-   */
-  public destroy(): void {
-    this.iframe?.removeEventListener('load', this.iframeLoadHandler);
-    this.contentWindow = null;
-    this.iframe?.remove();
-    this.iframe = undefined;
-    this.removeAllListeners();
-  }
-  public on<Name extends keyof RenderEvents, Param extends RenderEvents[Name]>(
-    eventName: Name,
-    listener: (...args: Param) => void | Promise<void>,
-  ) {
-    return super.on(eventName, listener as any);
-  }
-  public emit<Name extends keyof RenderEvents, Param extends RenderEvents[Name]>(eventName: Name, ...args: Param) {
-    return super.emit(eventName, ...args);
-  }
-  private createIframe(): HTMLIFrameElement {
-    this.iframe = globalThis.document.createElement('iframe');
-    // 同源，直接加载
-    this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : '';
-    this.iframe.style.cssText = `
-      border: 0;
-      width: 100%;
-      height: 100%;
-    `;
-    this.iframe.addEventListener('load', this.iframeLoadHandler);
-    return this.iframe;
-  }
-  private async createNativeContainer() {
-    this.contentWindow = globalThis as unknown as RuntimeWindow;
-    this.nativeContainer = globalThis.document.createElement('div');
-    this.contentWindow.magic = this.getMagicApi();
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (el) {
-        this.nativeContainer.appendChild(el);
-      }
-    }
-  }
-  /**
-   * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
-   * @param el 被选中的元素
-   */
-  private flagSelectedEl(el: HTMLElement | null): void {
-    const doc = this.getDocument();
-    if (doc) {
-      removeSelectedClassName(doc);
-      el && addSelectedClassName(el, doc);
-    }
-  }
-  private iframeLoadHandler = async () => {
-    if (!this.contentWindow?.magic) {
-      this.postTmagicRuntimeReady();
-    }
-    if (!this.contentWindow) return;
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (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,
-      },
-      '*',
-    );
-  }
-}

package/src/TargetShadow.ts DELETED Viewed

@@ -1,122 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 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 { guid } from '@tmagic/utils';
-import { Mode, ZIndex } from './const';
-import type { TargetElement as ShadowElement, TargetShadowConfig, UpdateDragEl } from './types';
-import { getTargetElStyle, isFixedParent } from './util';
-/**
- * 将选中的节点修正定位后，添加一个操作节点到蒙层上
- */
-export default class TargetShadow {
-  public el?: ShadowElement;
-  public els: ShadowElement[] = [];
-  private idPrefix = `target_calibrate_${guid()}`;
-  private container: HTMLElement;
-  private scrollLeft = 0;
-  private scrollTop = 0;
-  private zIndex?: ZIndex;
-  private updateDragEl?: UpdateDragEl;
-  constructor(config: TargetShadowConfig) {
-    this.container = config.container;
-    if (config.updateDragEl) {
-      this.updateDragEl = config.updateDragEl;
-    }
-    if (typeof config.zIndex !== 'undefined') {
-      this.zIndex = config.zIndex;
-    }
-    if (config.idPrefix) {
-      this.idPrefix = `${config.idPrefix}_${guid()}`;
-    }
-    this.container.addEventListener('customScroll', this.scrollHandler);
-  }
-  public update(target: ShadowElement): ShadowElement {
-    this.el = this.updateEl(target, this.el);
-    return this.el;
-  }
-  public updateGroup(targetGroup: ShadowElement[]): ShadowElement[] {
-    if (this.els.length > targetGroup.length) {
-      this.els.slice(targetGroup.length - 1).forEach((el) => {
-        el.remove();
-      });
-    }
-    this.els = targetGroup.map((target, index) => this.updateEl(target, this.els[index]));
-    return this.els;
-  }
-  public destroyEl(): void {
-    this.el?.remove();
-    this.el = undefined;
-  }
-  public destroyEls(): void {
-    this.els.forEach((el) => {
-      el.remove();
-    });
-    this.els = [];
-  }
-  public destroy(): void {
-    this.container.removeEventListener('customScroll', this.scrollHandler);
-    this.destroyEl();
-    this.destroyEls();
-  }
-  private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
-    const el = src || globalThis.document.createElement('div');
-    el.id = `${this.idPrefix}_${target.id}`;
-    el.style.cssText = getTargetElStyle(target, this.zIndex);
-    if (typeof this.updateDragEl === 'function') {
-      this.updateDragEl(el, target, this.container);
-    }
-    const isFixed = isFixedParent(target);
-    const mode = this.container.dataset.mode || Mode.ABSOLUTE;
-    if (isFixed && mode !== Mode.FIXED) {
-      el.style.transform = `translate3d(${this.scrollLeft}px, ${this.scrollTop}px, 0)`;
-    } else if (!isFixed && mode === Mode.FIXED) {
-      el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
-    }
-    if (!globalThis.document.getElementById(el.id)) {
-      this.container.append(el);
-    }
-    return el;
-  }
-  private scrollHandler = (e: any) => {
-    this.scrollLeft = e.detail.scrollLeft;
-    this.scrollTop = e.detail.scrollTop;
-  };
-}

package/src/const.ts DELETED Viewed

@@ -1,111 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 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.
- */
-/** 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀 */
-export const GHOST_EL_ID_PREFIX = 'ghost_el_';
-/** 拖动的时候需要在蒙层中创建一个占位节点，该节点的id前缀 */
-export const DRAG_EL_ID_PREFIX = 'drag_el_';
-/** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
-export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
-export const CONTAINER_HIGHLIGHT_CLASS_NAME = 'tmagic-stage-container-highlight';
-export const PAGE_CLASS = 'magic-ui-page';
-/** 默认放到缩小倍数 */
-export const DEFAULT_ZOOM = 1;
-/** 参考线类型 */
-export enum GuidesType {
-  /** 水平 */
-  HORIZONTAL = 'horizontal',
-  /** 垂直 */
-  VERTICAL = 'vertical',
-}
-/** css z-index */
-export enum ZIndex {
-  /** 蒙层，用于监听用户操作，需要置于顶层 */
-  MASK = '99999',
-  /** 选中的节点 */
-  SELECTED_EL = '666',
-  GHOST_EL = '700',
-  DRAG_EL = '9',
-  HIGHLIGHT_EL = '8',
-}
-/** 鼠标按键 */
-export enum MouseButton {
-  /** 左键 */
-  LEFT = 0,
-  /** z中健 */
-  MIDDLE = 1,
-  /** 右键 */
-  RIGHT = 2,
-}
-/** 布局方式 */
-export enum Mode {
-  /** 绝对定位布局 */
-  ABSOLUTE = 'absolute',
-  /** 固定定位布局 */
-  FIXED = 'fixed',
-  /** 流式布局 */
-  SORTABLE = 'sortable',
-}
-/** 选中节点的class name */
-export const SELECTED_CLASS = 'tmagic-stage-selected-area';
-export enum AbleActionEventType {
-  SELECT_PARENT = 'select-parent',
-  REMOVE = 'remove',
-}
-/** 将组件添加到容器的方式 */
-export enum ContainerHighlightType {
-  /** 默认方式：组件在容器上方悬停一段时间后加入 */
-  DEFAULT = 'default',
-  /** 按住alt键，并在容器上方悬停一段时间后加入 */
-  ALT = 'alt',
-}
-export enum RenderType {
-  IFRAME = 'iframe',
-  NATIVE = 'native',
-}
-/** 选择状态 */
-export enum SelectStatus {
-  /** 单选 */
-  SELECT = 'select',
-  /** 多选 */
-  MULTI_SELECT = 'multiSelect',
-}
-/** 拖动状态 */
-export enum StageDragStatus {
-  /** 开始拖动 */
-  START = 'start',
-  /** 拖动中 */
-  ING = 'ing',
-  /** 拖动结束 */
-  END = 'end',
-}

package/src/index.ts DELETED Viewed

@@ -1,29 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 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 StageCore from './StageCore';
-export type { MoveableOptions, OnDragStart } from 'moveable';
-export type { GuidesOptions } from '@scena/guides';
-export { default as StageRender } from './StageRender';
-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/logger.ts DELETED Viewed

@@ -1,37 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 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.
- */
-export const log = (...args: any[]) => {
-  console.log(...args);
-};
-export const info = (...args: any[]) => {
-  console.log(...args);
-};
-export const warn = (...args: any[]) => {
-  console.warn(...args);
-};
-export const debug = (...args: any[]) => {
-  console.debug(...args);
-};
-export const error = (...args: any[]) => {
-  console.error(...args);
-};

package/src/moveable-able.css DELETED Viewed

@@ -1,108 +0,0 @@
-.moveable-button {
-  width: 20px;
-  height: 20px;
-  background: #4af;
-  border-radius: 4px;
-  appearance: none;
-  border: 0;
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-  margin-left: 2px;
-  position: relative;
-}
-.moveable-remove-button:before, .moveable-remove-button:after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: 14px;
-  height: 2px;
-  background: #fff;
-  border-radius: 1px;
-  cursor: pointer;
-}
-.moveable-remove-button:after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-.moveable-select-parent-arrow-top-icon {
-  transform: rotateZ(-45deg);
-  width: 4px;
-  height: 4px;
-  border-color: #fff;
-  border-width: 2px 2px 0 0;
-  border-style: solid;
-  position: absolute;
-  left: 4px;
-  top: 4px;
-}
-.moveable-select-parent-arrow-body-icon {
-  width: 7px;
-  height: 11px;
-  border-color: #fff;
-  border-width: 0 0 2px 2px;
-  border-style: solid;
-}
-.moveable-drag-area-button {
-  cursor: move;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {
-  width: 2px;
-  height: 2px;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {
-  transform: rotateZ(-45deg) translateX(-50%);
-  left: 50%;
-  top: 3px;
-  transform-origin: left;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {
-  transform: rotateZ(135deg) translateX(-50%);
-  transform-origin: left;
-  left: 50%;
-  top: auto;
-  bottom: 3px;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {
-  transform: rotateZ(45deg)  translateY(-50%);
-  transform-origin: top;
-  right: 3px;
-  left: auto;
-  top: 50%;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {
-  transform: rotateZ(235deg) translateY(-50%);
-  transform-origin: top;
-  left: 3px;
-  top: 50%;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {
-  width: 2px;
-  height: 11px;
-  background-color: #fff;
-  position: absolute;
-  transform: translateX(-50%);
-  left: 50%;
-  top: 4px;
-}
-.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {
-  width: 11px;
-  height: 2px;
-  background-color: #fff;
-  position: absolute;
-  transform: translateY(-50%);
-  left: 4px;
-  top: 50%;;
-}

package/src/style.css DELETED Viewed

@@ -1,15 +0,0 @@
-.tmagic-stage-container-highlight::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: #000;
-  opacity: .1;
-  pointer-events: none;
-}
-.magic-ui-container.magic-layout-relative {
-  min-height: 50px;
-}