@tmagic/stage 1.4.8 → 1.4.9

package/src/types.ts

@@ -0,0 +1,309 @@
+/*
+ * 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 type { GuidesOptions } from '@scena/guides';
+import type { MoveableOptions, OnDragStart } from 'moveable';
+
+import Core from '@tmagic/core';
+import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
+
+import { AbleActionEventType, ContainerHighlightType, GuidesType, RenderType, ZIndex } from './const';
+import DragResizeHelper from './DragResizeHelper';
+import StageCore from './StageCore';
+
+export type TargetElement = HTMLElement | SVGElement;
+
+export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
+export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
+export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+/** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
+export type CustomizeMoveableOptions =
+  | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
+  | MoveableOptions
+  | undefined;
+/** render提供给的接口，id转成el */
+export type GetTargetElement = (id: Id) => HTMLElement | null;
+/** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
+export type GetElementsFromPoint = (point: Point) => HTMLElement[];
+export type GetRenderDocument = () => Document | undefined;
+export type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+export type MarkContainerEnd = () => HTMLElement | null;
+export type GetRootContainer = () => HTMLDivElement | undefined;
+
+export type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
+
+export interface StageCoreConfig {
+  /** 需要对齐的dom节点的CSS选择器字符串 */
+  snapElementQuerySelector?: string;
+  /** 放大倍数，默认1倍 */
+  zoom?: number;
+  canSelect?: CanSelect;
+  isContainer?: IsContainer;
+  containerHighlightClassName?: string;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
+  moveableOptions?: CustomizeMoveableOptions;
+  /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
+  runtimeUrl?: string;
+  render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+  autoScrollIntoView?: boolean;
+  updateDragEl?: UpdateDragEl;
+  disabledDragStart?: boolean;
+  renderType?: RenderType;
+  guidesOptions?: Partial<GuidesOptions>;
+  disabledMultiSelect?: boolean;
+}
+
+export interface ActionManagerConfig {
+  container: HTMLElement;
+  containerHighlightClassName?: string;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
+  moveableOptions?: CustomizeMoveableOptions;
+  disabledDragStart?: boolean;
+  disabledMultiSelect?: boolean;
+  canSelect?: CanSelect;
+  isContainer?: IsContainer;
+  getRootContainer: GetRootContainer;
+  getRenderDocument: GetRenderDocument;
+  updateDragEl?: UpdateDragEl;
+  getTargetElement: GetTargetElement;
+  getElementsFromPoint: GetElementsFromPoint;
+}
+
+export interface MoveableOptionsManagerConfig {
+  container: HTMLElement;
+  moveableOptions?: CustomizeMoveableOptions;
+  getRootContainer: GetRootContainer;
+}
+
+export interface CustomizeMoveableOptionsCallbackConfig {
+  targetEl: HTMLElement | null;
+  targetElId?: string;
+  targetEls?: HTMLElement[];
+  targetElIds?: string[];
+  isMulti: boolean;
+  document?: Document;
+}
+
+export interface StageRenderConfig {
+  runtimeUrl?: string;
+  zoom: number | undefined;
+  renderType?: RenderType;
+  customizedRender?: () => Promise<HTMLElement | null>;
+}
+
+export interface StageMaskConfig {
+  core: StageCore;
+}
+
+export interface StageDragResizeConfig {
+  container: HTMLElement;
+  dragResizeHelper: DragResizeHelper;
+  moveableOptions?: CustomizeMoveableOptions;
+  disabledDragStart?: boolean;
+  getRootContainer: GetRootContainer;
+  getRenderDocument: GetRenderDocument;
+  markContainerEnd: MarkContainerEnd;
+  delayedMarkContainer: DelayedMarkContainer;
+}
+
+export interface StageMultiDragResizeConfig {
+  container: HTMLElement;
+  dragResizeHelper: DragResizeHelper;
+  moveableOptions?: CustomizeMoveableOptions;
+  getRootContainer: GetRootContainer;
+  getRenderDocument: GetRenderDocument;
+  markContainerEnd: MarkContainerEnd;
+  delayedMarkContainer: DelayedMarkContainer;
+}
+
+export interface DragResizeHelperConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+}
+
+export type Rect = {
+  width: number;
+  height: number;
+} & Offset;
+
+export interface Offset {
+  left: number;
+  top: number;
+}
+
+export interface Point {
+  clientX: number;
+  clientY: number;
+}
+
+export interface GuidesEventData {
+  type: GuidesType;
+  guides: number[];
+}
+
+export interface UpdateEventData {
+  data: {
+    el: HTMLElement;
+    style: {
+      width?: number;
+      height?: number;
+      left?: number;
+      top?: number;
+      transform?: {
+        rotate?: string;
+        scale?: string;
+      };
+    };
+    ghostEl?: HTMLElement;
+  }[];
+  parentEl: HTMLElement | null;
+}
+
+export interface RemoveEventData {
+  data: {
+    el: HTMLElement;
+  }[];
+}
+
+export interface SortEventData {
+  src: Id;
+  dist: Id;
+  root?: MApp;
+}
+
+export interface UpdateData {
+  config: MNode;
+  parent?: MContainer;
+  parentId?: Id;
+  root: MApp;
+}
+
+export interface RemoveData {
+  id: Id;
+  parentId: Id;
+  root: MApp;
+}
+
+export interface Runtime {
+  getApp?: () => Core | undefined;
+  updateRootConfig?: (config: MApp) => void;
+  updatePageId?: (id: Id) => void;
+  select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
+  add?: (data: UpdateData) => void;
+  update?: (data: UpdateData) => void;
+  sortNode?: (data: SortEventData) => void;
+  remove?: (data: RemoveData) => void;
+}
+
+export interface Magic {
+  /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
+  onPageElUpdate: (el: HTMLElement) => void;
+
+  onRuntimeReady: (runtime: Runtime) => void;
+}
+
+export interface RuntimeWindow extends Window {
+  magic: Magic;
+}
+
+export interface StageHighlightConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+  getRootContainer: GetRootContainer;
+}
+
+export interface TargetShadowConfig {
+  container: HTMLElement;
+  zIndex?: ZIndex;
+  updateDragEl?: UpdateDragEl;
+  idPrefix?: string;
+}
+
+export interface RuleOptions {
+  guidesOptions?: Partial<GuidesOptions>;
+}
+
+export interface CoreEvents {
+  mounted: [];
+  'runtime-ready': [runtime: Runtime];
+  'page-el-update': [el: HTMLElement];
+  'change-guides': [data: GuidesEventData];
+  select: [selectedEl: HTMLElement, event: MouseEvent];
+  'multi-select': [selectedElList: HTMLElement[], event: MouseEvent];
+  dblclick: [event: MouseEvent];
+  update: [data: UpdateEventData];
+  sort: [data: SortEventData];
+  'select-parent': [];
+  remove: [data: RemoveEventData];
+  highlight: [highlightEl: HTMLElement];
+  mousemove: [event: MouseEvent];
+  mouseleave: [event: MouseEvent];
+  'drag-start': [event: OnDragStart];
+}
+
+export interface RenderEvents {
+  onload: [];
+  'page-el-update': [el: HTMLElement];
+  'runtime-ready': [runtime: Runtime];
+}
+
+export interface MaskEvents {
+  scroll: [event: WheelEvent];
+  'change-guides': [
+    data: {
+      type: GuidesType.HORIZONTAL;
+      guides: number[];
+    },
+  ];
+}
+
+export interface ActionManagerEvents {
+  dblclick: [event: MouseEvent];
+  mousemove: [event: MouseEvent];
+  mouseleave: [event: MouseEvent];
+  highlight: [el: HTMLElement];
+  update: [data: UpdateEventData];
+  sort: [data: SortEventData];
+  remove: [data: RemoveEventData];
+  select: [selectedEl: HTMLElement | null, event: MouseEvent];
+  'select-parent': [];
+  'drag-start': [event: OnDragStart];
+  'multi-update': [data: UpdateEventData];
+  'change-to-select': [id: Id, event: MouseEvent];
+  'before-multi-select': [selectedElList: HTMLElement[]];
+  'before-select': [el: HTMLElement, event: MouseEvent];
+  'multi-select': [selectedElList: HTMLElement[], event: MouseEvent];
+  'get-elements-from-point': [els: HTMLElement[]];
+}
+
+export interface DrEvents {
+  'update-moveable': [];
+  [AbleActionEventType.REMOVE]: [];
+  [AbleActionEventType.SELECT_PARENT]: [];
+  'drag-start': [event: OnDragStart];
+  update: [data: UpdateEventData];
+  sort: [data: SortEventData];
+}
+
+export interface MultiDrEvents {
+  'update-moveable': [];
+  'change-to-select': [id: Id, event: MouseEvent];
+  update: [data: UpdateEventData];
+}

package/src/util.ts

@@ -0,0 +1,272 @@
+/*
+ * 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 { removeClassName } from '@tmagic/utils';
+
+import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
+import type { Offset, SortEventData, TargetElement } 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: Element): Offset => {
+  const htmlEl = el as HTMLElement;
+  const { offsetParent } = htmlEl;
+
+  const left = htmlEl.offsetLeft || 0;
+  const top = htmlEl.offsetTop || 0;
+
+  // 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。
+  // 在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）
+  // body offsetParent 为 null
+  if (offsetParent) {
+    const parentOffset = getOffset(offsetParent as HTMLElement);
+    return {
+      left: left + parentOffset.left,
+      top: top + parentOffset.top,
+    };
+  }
+
+  return {
+    left,
+    top,
+  };
+};
+
+// 将蒙层占位节点覆盖在原节点上方
+export const getTargetElStyle = (el: TargetElement, zIndex?: ZIndex) => {
+  const offset = getOffset(el);
+  const { transform, border } = getComputedStyle(el);
+  return `
+    position: absolute;
+    transform: ${transform};
+    left: ${offset.left}px;
+    top: ${offset.top}px;
+    width: ${el.clientWidth}px;
+    height: ${el.clientHeight}px;
+    border: ${border};
+    opacity: 0;
+    ${typeof zIndex !== 'undefined' ? `z-index: ${zIndex};` : ''}
+  `;
+};
+
+export const getAbsolutePosition = (el: HTMLElement, { top, left }: Offset) => {
+  const { offsetParent } = el;
+
+  // 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。
+  // 在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）
+  // body offsetParent 为 null
+  if (offsetParent) {
+    const parentOffset = getOffset(offsetParent as HTMLElement);
+    return {
+      left: left - parentOffset.left,
+      top: top - parentOffset.top,
+    };
+  }
+
+  return { left, top };
+};
+
+export const isAbsolute = (style: CSSStyleDeclaration): boolean => style.position === 'absolute';
+
+export const isRelative = (style: CSSStyleDeclaration): boolean => style.position === 'relative';
+
+export const isStatic = (style: CSSStyleDeclaration): boolean => style.position === 'static';
+
+export const isFixed = (style: CSSStyleDeclaration): boolean => style.position === 'fixed';
+
+export const isFixedParent = (el: Element) => {
+  let fixed = false;
+  let dom = el;
+  while (dom) {
+    fixed = isFixed(getComputedStyle(dom));
+    if (fixed) {
+      break;
+    }
+    const { parentElement } = dom;
+    if (!parentElement || parentElement.tagName === 'BODY') {
+      break;
+    }
+    dom = parentElement;
+  }
+  return fixed;
+};
+
+export const getMode = (el: Element): Mode => {
+  if (isFixedParent(el)) return Mode.FIXED;
+  const style = getComputedStyle(el);
+  if (isStatic(style) || isRelative(style)) return Mode.SORTABLE;
+  return Mode.ABSOLUTE;
+};
+
+export const getScrollParent = (element: HTMLElement, includeHidden = false): HTMLElement | null => {
+  let style = getComputedStyle(element);
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+  if (isFixed(style)) return null;
+
+  for (let parent = element; parent.parentElement; ) {
+    parent = parent.parentElement;
+
+    if (parent.tagName === 'HTML') return parent;
+
+    style = getComputedStyle(parent);
+
+    if (isAbsolute(style) && isStatic(style)) continue;
+
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+  }
+
+  return null;
+};
+
+export const removeSelectedClassName = (doc: Document) => {
+  const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+
+  if (oldEl) {
+    removeClassName(oldEl, SELECTED_CLASS);
+    if (oldEl.parentNode) removeClassName(oldEl.parentNode as Element, `${SELECTED_CLASS}-parent`);
+    doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+      removeClassName(item, `${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`);
+  });
+};
+
+/**
+ * 下移组件位置
+ * @param {number} deltaTop 偏移量
+ * @param {Object} detail 当前选中的组件配置
+ */
+export const down = (deltaTop: number, target: TargetElement): SortEventData => {
+  let swapIndex = 0;
+  let addUpH = target.clientHeight;
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+  );
+  const index = brothers.indexOf(target);
+  // 往下移动
+  const downEls = brothers.slice(index + 1) as HTMLElement[];
+
+  for (let i = 0; i < downEls.length; i++) {
+    const ele = downEls[i];
+    // 是 fixed 不做处理
+    if (ele.style?.position === 'fixed') {
+      continue;
+    }
+    addUpH += ele.clientHeight / 2;
+    if (deltaTop <= addUpH) {
+      break;
+    }
+    addUpH += ele.clientHeight / 2;
+    swapIndex = i;
+  }
+  return {
+    src: target.id,
+    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
+  };
+};
+
+/**
+ * 上移组件位置
+ * @param {Array} brothers 处于同一容器下的所有子组件配置
+ * @param {number} index 当前组件所处的位置
+ * @param {number} deltaTop 偏移量
+ * @param {Object} detail 当前选中的组件配置
+ */
+export const up = (deltaTop: number, target: TargetElement): SortEventData => {
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+  );
+  const index = brothers.indexOf(target);
+  // 往上移动
+  const upEls = brothers.slice(0, index) as HTMLElement[];
+
+  let addUpH = target.clientHeight;
+  let swapIndex = upEls.length - 1;
+
+  for (let i = upEls.length - 1; i >= 0; i--) {
+    const ele = upEls[i];
+    if (!ele) continue;
+    // 是 fixed 不做处理
+    if (ele.style.position === 'fixed') continue;
+
+    addUpH += ele.clientHeight / 2;
+    if (-deltaTop <= addUpH) break;
+    addUpH += ele.clientHeight / 2;
+
+    swapIndex = i;
+  }
+  return {
+    src: target.id,
+    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
+  };
+};
+
+export const isMoveableButton = (target: Element) =>
+  target.classList.contains('moveable-button') || target.parentElement?.classList.contains('moveable-button');
+
+export const getMarginValue = (el: Element) => {
+  if (!el)
+    return {
+      marginLeft: 0,
+      marginTop: 0,
+    };
+
+  const { marginLeft, marginTop } = getComputedStyle(el);
+
+  const marginLeftValue = parseFloat(marginLeft) || 0;
+  const marginTopValue = parseFloat(marginTop) || 0;
+
+  return {
+    marginLeft: marginLeftValue,
+    marginTop: marginTopValue,
+  };
+};
+
+export const getBorderWidth = (el: Element) => {
+  if (!el)
+    return {
+      borderLeftWidth: 0,
+      borderRightWidth: 0,
+      borderTopWidth: 0,
+      borderBottomWidth: 0,
+    };
+
+  const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getComputedStyle(el);
+
+  return {
+    borderLeftWidth: parseFloat(borderLeftWidth) || 0,
+    borderRightWidth: parseFloat(borderRightWidth) || 0,
+    borderTopWidth: parseFloat(borderTopWidth) || 0,
+    borderBottomWidth: parseFloat(borderBottomWidth) || 0,
+  };
+};