@tmagic/stage 1.8.0-beta.2 → 1.8.0-beta.21

package/src/StageFlashHighlight.ts

@@ -0,0 +1,135 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  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 { getDocument, injectStyle } from '@tmagic/core';
+
+import { FLASH_EL_ID_PREFIX, ZIndex } from './const';
+import TargetShadow from './TargetShadow';
+import type { StageFlashHighlightConfig } from './types';
+
+/** 闪烁提示节点的 class name */
+export const FLASH_TIP_CLASS_NAME = 'tmagic-stage-flash-tip';
+/** 闪烁动画名称 */
+const FLASH_ANIMATION_NAME = 'tmagic-stage-flash';
+/** 闪烁动画时长（ms） */
+const FLASH_DURATION = 1500;
+
+/**
+ * 选中区域闪烁提示
+ * @description 当组件不是通过点击画布选中（如从图层树、面包屑等外部选中）时，在画布上对选中区域做一次高亮闪烁，
+ * 帮助用户快速定位组件在画布中的位置。
+ */
+export default class StageFlashHighlight {
+  /** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+  private targetShadow: TargetShadow;
+  private timer?: NodeJS.Timeout;
+  private styleEl?: HTMLStyleElement;
+
+  constructor(config: StageFlashHighlightConfig) {
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.SELECTED_EL,
+      idPrefix: FLASH_EL_ID_PREFIX,
+    });
+  }
+
+  /**
+   * 在目标元素所在区域做一次高亮闪烁
+   * @param el 选中组件的Dom节点元素
+   */
+  public flash(el: HTMLElement): void {
+    if (!el) return;
+
+    this.injectStyle();
+    // 先销毁旧节点再 update，确保每次都拿到全新节点，让闪烁动画重新播放
+    this.clear();
+
+    const flashEl = this.targetShadow.update(el);
+    flashEl.classList.add(FLASH_TIP_CLASS_NAME);
+    flashEl.style.boxSizing = 'border-box';
+    flashEl.style.pointerEvents = 'none';
+    // getTargetElStyle 会写入 target 的内联 border，需清掉以让动画 class 的边框生效
+    flashEl.style.border = '';
+
+    this.timer = globalThis.setTimeout(() => {
+      this.clear();
+    }, FLASH_DURATION);
+  }
+
+  /**
+   * 清除闪烁节点
+   */
+  public clear(): void {
+    if (this.timer) {
+      globalThis.clearTimeout(this.timer);
+      this.timer = undefined;
+    }
+    this.targetShadow.destroyEl();
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.clear();
+    this.targetShadow.destroy();
+    this.styleEl?.remove();
+    this.styleEl = undefined;
+  }
+
+  /**
+   * 注入闪烁动画样式（仅注入一次）
+   */
+  private injectStyle(): void {
+    if (this.styleEl) return;
+
+    this.styleEl = injectStyle(
+      getDocument(),
+      `
+      @keyframes ${FLASH_ANIMATION_NAME} {
+        0% {
+          opacity: 0;
+          background-color: rgba(146, 84, 222, 0);
+        }
+        20% {
+          opacity: 1;
+          background-color: rgba(146, 84, 222, 0.7);
+        }
+        45% {
+          opacity: 0.6;
+          background-color: rgba(146, 84, 222, 0.4);
+        }
+        70% {
+          opacity: 1;
+          background-color: rgba(146, 84, 222, 0.7);
+        }
+        100% {
+          opacity: 0;
+          background-color: rgba(146, 84, 222, 0);
+        }
+      }
+      .${FLASH_TIP_CLASS_NAME} {
+        border: 2px solid #9254de;
+        border-radius: 2px;
+        animation: ${FLASH_ANIMATION_NAME} ${FLASH_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1) both;
+      }
+      `,
+    );
+  }
+}

package/src/StageMask.ts

@@ -21,7 +21,7 @@ import { createDiv, getDocument, injectStyle } from '@tmagic/core';
 import { Mode, ZIndex } from './const';
 import Rule from './Rule';
 import type { MaskEvents, RuleOptions } from './types';
-import { getScrollParent, isFixedParent } from './util';
+import { getScrollParent, isFixedParent, scrollElementIntoView } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
 
@@ -165,10 +165,12 @@ export default class StageMask extends Rule {
       return;
     }
 
-    el.scrollIntoView();
-
     if (!this.pageScrollParent) return;
 
+    // 不使用原生 scrollIntoView，避免编辑器画布外层滚动容器被浏览器连带滚动导致整个 stage 位移，
+    // 只滚动页面所在的滚动容器
+    scrollElementIntoView(el, this.pageScrollParent);
+
     this.scrollLeft = this.pageScrollParent.scrollLeft;
     this.scrollTop = this.pageScrollParent.scrollTop;
 

package/src/const.ts

@@ -25,6 +25,9 @@ export const DRAG_EL_ID_PREFIX = 'drag_el_';
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
+/** 闪烁提示时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+export const FLASH_EL_ID_PREFIX = 'flash_el_';
+
 export const CONTAINER_HIGHLIGHT_CLASS_NAME = 'tmagic-stage-container-highlight';
 
 export const PAGE_CLASS = 'magic-ui-page';

package/src/moveable-able.css

@@ -1,7 +1,7 @@
 .moveable-button {
   width: 20px;
   height: 20px;
-  background: #4af;
+  background: var(--el-color-primary,#4af);
   border-radius: 4px;
   appearance: none;
   border: 0;

package/src/types.ts

@@ -53,7 +53,11 @@ 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 DelayedMarkContainer = (
+  event: MouseEvent,
+  exclude?: Element[],
+  isAdd?: boolean,
+) => NodeJS.Timeout | undefined;
 export type MarkContainerEnd = () => HTMLElement | null;
 export type GetRootContainer = () => HTMLDivElement | undefined;
 
@@ -74,6 +78,11 @@ export interface StageCoreConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用将组件拖入容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
@@ -90,6 +99,11 @@ export interface StageCoreConfig {
    */
   alwaysMultiSelect?: boolean;
   disabledRule?: boolean;
+  /**
+   * 是否禁用「非点击画布选中组件时，对选中区域做高亮闪烁提示」，默认 false（即默认开启闪烁提示）。
+   * 用于从图层树、面包屑等外部选中组件时，帮助用户快速定位组件在画布中的位置。
+   */
+  disabledFlashTip?: boolean;
 }
 
 export interface ActionManagerConfig {
@@ -97,6 +111,8 @@ export interface ActionManagerConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /** 见 StageCoreConfig.containerHighlightAddOnly */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
   disabledMultiSelect?: boolean;
@@ -264,6 +280,11 @@ export interface TargetShadowConfig {
   idPrefix?: string;
 }
 
+export interface StageFlashHighlightConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+}
+
 export interface RuleOptions {
   guidesOptions?: Partial<GuidesOptions>;
   disabledRule?: boolean;

package/src/util.ts

@@ -126,7 +126,7 @@ export const getScrollParent = (element: HTMLElement, includeHidden = false): HT
 
   if (isFixed(style)) return null;
 
-  for (let parent = element; parent.parentElement; ) {
+  for (let parent = element; parent.parentElement;) {
     parent = parent.parentElement;
 
     if (parent.tagName === 'HTML') return parent;
@@ -141,6 +141,48 @@ export const getScrollParent = (element: HTMLElement, includeHidden = false): HT
   return null;
 };
 
+/**
+ * 将元素滚动到指定滚动容器的可视区域内（仅垂直方向，滚动最小距离）
+ * @description 与原生 scrollIntoView 不同，只滚动指定的容器自身，不会连带滚动外层祖先滚动容器，
+ * 避免编辑器画布外层容器（如 stage 外层使用 transform 模拟滚动的容器）被浏览器自动滚动导致整个画布位移
+ * @param el 目标元素
+ * @param container 滚动容器
+ */
+export const scrollElementIntoView = (el: Element, container: HTMLElement): void => {
+  const { ownerDocument } = container;
+  const win = ownerDocument?.defaultView;
+  if (!ownerDocument || !win) return;
+
+  const elRect = el.getBoundingClientRect();
+
+  let viewTop = 0;
+  let viewHeight = 0;
+
+  if (container === ownerDocument.documentElement || container === ownerDocument.body) {
+    // 文档滚动元素的可视区域为窗口视口
+    viewTop = 0;
+    viewHeight = win.innerHeight;
+  } else {
+    const containerRect = container.getBoundingClientRect();
+    viewTop = containerRect.top + container.clientTop;
+    viewHeight = container.clientHeight;
+  }
+
+  const viewBottom = viewTop + viewHeight;
+
+  let delta = 0;
+  if (elRect.top < viewTop) {
+    delta = elRect.top - viewTop;
+  } else if (elRect.bottom > viewBottom) {
+    // 元素高度超过可视区域高度时，优先保证元素顶部可见
+    delta = Math.min(elRect.bottom - viewBottom, elRect.top - viewTop);
+  }
+
+  if (delta !== 0) {
+    container.scrollTop += delta;
+  }
+};
+
 export const removeSelectedClassName = (doc: Document) => {
   const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
 

package/types/index.d.ts

@@ -13,6 +13,8 @@ declare const GHOST_EL_ID_PREFIX = "ghost_el_";
 declare const DRAG_EL_ID_PREFIX = "drag_el_";
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+/** 闪烁提示时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+declare const FLASH_EL_ID_PREFIX = "flash_el_";
 declare const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
 declare const PAGE_CLASS = "magic-ui-page";
 /** 默认放到缩小倍数 */
@@ -180,7 +182,7 @@ type GetTargetElement = (id: Id) => HTMLElement | null;
 /** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
 type GetElementsFromPoint = (point: Point) => HTMLElement[];
 type GetRenderDocument = () => Document | undefined;
-type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+type DelayedMarkContainer = (event: MouseEvent, exclude?: Element[], isAdd?: boolean) => NodeJS.Timeout | undefined;
 type MarkContainerEnd = () => HTMLElement | null;
 type GetRootContainer = () => HTMLDivElement | undefined;
 type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
@@ -199,6 +201,11 @@ interface StageCoreConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用将组件拖入容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
@@ -215,12 +222,19 @@ interface StageCoreConfig {
    */
   alwaysMultiSelect?: boolean;
   disabledRule?: boolean;
+  /**
+   * 是否禁用「非点击画布选中组件时，对选中区域做高亮闪烁提示」，默认 false（即默认开启闪烁提示）。
+   * 用于从图层树、面包屑等外部选中组件时，帮助用户快速定位组件在画布中的位置。
+   */
+  disabledFlashTip?: boolean;
 }
 interface ActionManagerConfig {
   container: HTMLElement;
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /** 见 StageCoreConfig.containerHighlightAddOnly */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
   disabledMultiSelect?: boolean;
@@ -363,6 +377,10 @@ interface TargetShadowConfig {
   updateDragEl?: UpdateDragEl;
   idPrefix?: string;
 }
+interface StageFlashHighlightConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+}
 interface RuleOptions {
   guidesOptions?: Partial<GuidesOptions$1>;
   disabledRule?: boolean;
@@ -456,6 +474,8 @@ declare class ActionManager extends EventEmitter$1 {
   private containerHighlightDuration;
   /** 将组件加入容器的操作方式 */
   private containerHighlightType?;
+  /** 是否仅在新增组件时才启用将组件加入容器 */
+  private containerHighlightAddOnly;
   private isAltKeydown;
   private getTargetElement;
   private getElementsFromPoint;
@@ -546,9 +566,10 @@ declare class ActionManager extends EventEmitter$1 {
    * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
    * @param event 鼠标事件
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
+  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[], isAdd?: boolean): NodeJS.Timeout | undefined;
   getDragStatus(): StageDragStatus | undefined;
   updateMoveableOptions(): void;
   destroy(): void;
@@ -564,7 +585,9 @@ declare class ActionManager extends EventEmitter$1 {
    */
   private beforeMultiSelect;
   /**
-   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入；
+   * 开启containerHighlightAddOnly时，画布中拖动已有组件不能加入容器
+   * @param isAdd 当前操作是否为新增组件
    */
   private canAddToContainer;
   /**
@@ -591,6 +614,37 @@ declare class ActionManager extends EventEmitter$1 {
   private dblclickHandler;
 }
 //#endregion
+//#region temp/packages/stage/src/StageFlashHighlight.d.ts
+/**
+ * 选中区域闪烁提示
+ * @description 当组件不是通过点击画布选中（如从图层树、面包屑等外部选中）时，在画布上对选中区域做一次高亮闪烁，
+ * 帮助用户快速定位组件在画布中的位置。
+ */
+declare class StageFlashHighlight {
+  /** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+  private targetShadow;
+  private timer?;
+  private styleEl?;
+  constructor(config: StageFlashHighlightConfig);
+  /**
+   * 在目标元素所在区域做一次高亮闪烁
+   * @param el 选中组件的Dom节点元素
+   */
+  flash(el: HTMLElement): void;
+  /**
+   * 清除闪烁节点
+   */
+  clear(): void;
+  /**
+   * 销毁实例
+   */
+  destroy(): void;
+  /**
+   * 注入闪烁动画样式（仅注入一次）
+   */
+  private injectStyle;
+}
+//#endregion
 //#region temp/packages/stage/src/Rule.d.ts
 declare class Rule extends EventEmitter$1 {
   hGuides?: Guides;
@@ -790,15 +844,20 @@ declare class StageCore extends EventEmitter {
   renderer: StageRender | null;
   mask: StageMask | null;
   actionManager: ActionManager | null;
+  flashHighlight: StageFlashHighlight | null;
   private pageResizeObserver;
   private autoScrollIntoView;
   private customizedRender?;
+  /** 非点击画布选中组件时，是否对选中区域做高亮闪烁提示，默认开启 */
+  private disabledFlashTip;
   constructor(config: StageCoreConfig);
   /**
    * 单选选中元素
    * @param id 选中的id
    */
-  select(id: Id, event?: MouseEvent): Promise<void>;
+  select(id: Id, event?: MouseEvent, options?: {
+    flash?: boolean;
+  }): Promise<void>;
   /**
    * 多选选中多个元素
    * @param ids 选中元素的id列表
@@ -844,9 +903,10 @@ declare class StageCore extends EventEmitter {
    * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
    * @param event 鼠标事件
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
+  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[], isAdd?: boolean): NodeJS.Timeout | undefined;
   getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
   getDragStatus(): import("@tmagic/editor").StageDragStatus | undefined;
   disableMultiSelect(): void;
@@ -1057,6 +1117,14 @@ declare const isFixed: (style: {
 declare const isFixedParent: (el: Element) => boolean;
 declare const getMode: (el: Element) => Mode;
 declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
+/**
+ * 将元素滚动到指定滚动容器的可视区域内（仅垂直方向，滚动最小距离）
+ * @description 与原生 scrollIntoView 不同，只滚动指定的容器自身，不会连带滚动外层祖先滚动容器，
+ * 避免编辑器画布外层容器（如 stage 外层使用 transform 模拟滚动的容器）被浏览器自动滚动导致整个画布位移
+ * @param el 目标元素
+ * @param container 滚动容器
+ */
+declare const scrollElementIntoView: (el: Element, container: HTMLElement) => void;
 declare const removeSelectedClassName: (doc: Document) => void;
 declare const addSelectedClassName: (el: Element, doc: Document) => void;
 /**
@@ -1102,4 +1170,4 @@ declare const _default: (handler: (type: AbleActionEventType) => void, customize
   render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
 };
 //#endregion
-export { AbleActionEventType, AbleCustomizedButton, ActionManagerConfig, ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, CanDropIn, CanSelect, ContainerHighlightType, CoreEvents, CustomizeMoveableOptions, CustomizeMoveableOptionsCallbackConfig, CustomizeMoveableOptionsFunction, CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, DelayedMarkContainer, DrEvents, DragResizeHelperConfig, GHOST_EL_ID_PREFIX, GetElementsFromPoint, GetRenderDocument, GetRootContainer, GetTargetElement, GuidesEventData, type GuidesOptions, GuidesType, HIGHLIGHT_EL_ID_PREFIX, IsContainer, Magic, MarkContainerEnd, MaskEvents, Mode, MouseButton, _default as MoveableActionsAble, MoveableOptionsManagerConfig, MultiDrEvents, Offset, PAGE_CLASS, Point, Rect, RemoveData, RemoveEventData, RenderEvents, RenderType, RuleOptions, Runtime, RuntimeWindow, SELECTED_CLASS, SelectStatus, SortEventData, StageCoreConfig, StageDragResize, StageDragResizeConfig, StageDragStatus, StageHighlightConfig, StageMask, StageMaskConfig, StageMultiDragResizeConfig, StageRender, StageRenderConfig, TargetElement, TargetShadowConfig, UpdateData, UpdateDragEl, UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, AbleCustomizedButton, ActionManagerConfig, ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, CanDropIn, CanSelect, ContainerHighlightType, CoreEvents, CustomizeMoveableOptions, CustomizeMoveableOptionsCallbackConfig, CustomizeMoveableOptionsFunction, CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, DelayedMarkContainer, DrEvents, DragResizeHelperConfig, FLASH_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GetElementsFromPoint, GetRenderDocument, GetRootContainer, GetTargetElement, GuidesEventData, type GuidesOptions, GuidesType, HIGHLIGHT_EL_ID_PREFIX, IsContainer, Magic, MarkContainerEnd, MaskEvents, Mode, MouseButton, _default as MoveableActionsAble, MoveableOptionsManagerConfig, MultiDrEvents, Offset, PAGE_CLASS, Point, Rect, RemoveData, RemoveEventData, RenderEvents, RenderType, RuleOptions, Runtime, RuntimeWindow, SELECTED_CLASS, SelectStatus, SortEventData, StageCoreConfig, StageDragResize, StageDragResizeConfig, StageDragStatus, StageFlashHighlightConfig, StageHighlightConfig, StageMask, StageMaskConfig, StageMultiDragResizeConfig, StageRender, StageRenderConfig, TargetElement, TargetShadowConfig, UpdateData, UpdateDragEl, UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, scrollElementIntoView, up };