@tmagic/stage 1.4.16 → 1.5.0-beta.0

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.
@@ -1,147 +0,0 @@
1
- import EventEmitter from 'events';
2
- import type { MoveableOptions } from 'moveable';
3
- import type { Id } from '@tmagic/schema';
4
- import { GuidesType, SelectStatus, StageDragStatus } from './const';
5
- import type { ActionManagerConfig, ActionManagerEvents } from './types';
6
- /**
7
- * 管理蒙层mask之上的操作:1、监听键盘鼠标事件,判断形成单选、多选、高亮操作;2、管理单选、多选、高亮三个类协同工作。
8
- * @extends EventEmitter
9
- */
10
- export default class ActionManager extends EventEmitter {
11
- private dr;
12
- private multiDr?;
13
- private highlightLayer;
14
- /** 单选、多选、高亮的容器(蒙层的content) */
15
- private container;
16
- /** 当前选中的节点 */
17
- private selectedEl;
18
- /** 多选选中的节点组 */
19
- private selectedElList;
20
- /** 当前高亮的节点 */
21
- private highlightedEl;
22
- /** 当前是否处于多选状态 */
23
- private isMultiSelectStatus;
24
- /** 当拖拽组件到容器上方进入可加入容器状态时,给容器添加的一个class名称 */
25
- private containerHighlightClassName;
26
- /** 当拖拽组件到容器上方时,需要悬停多久才能将组件加入容器 */
27
- private containerHighlightDuration;
28
- /** 将组件加入容器的操作方式 */
29
- private containerHighlightType?;
30
- private isAltKeydown;
31
- private getTargetElement;
32
- private getElementsFromPoint;
33
- private canSelect;
34
- private isContainer?;
35
- private getRenderDocument;
36
- private disabledMultiSelect;
37
- private config;
38
- private mouseMoveHandler;
39
- constructor(config: ActionManagerConfig);
40
- disableMultiSelect(): void;
41
- enableMultiSelect(): void;
42
- /**
43
- * 设置水平/垂直参考线
44
- * @param type 参考线类型
45
- * @param guidelines 参考线坐标数组
46
- */
47
- setGuidelines(type: GuidesType, guidelines: number[]): void;
48
- /**
49
- * 清空所有参考线
50
- */
51
- clearGuides(): void;
52
- /**
53
- * 更新moveable,外部主要调用场景是元素配置变更、页面大小变更
54
- * @param el 变更的元素
55
- */
56
- updateMoveable(el?: HTMLElement): void;
57
- /**
58
- * 判断是否单选选中的元素
59
- */
60
- isSelectedEl(el: HTMLElement): boolean;
61
- setSelectedEl(el: HTMLElement | null): void;
62
- getSelectedEl(): HTMLElement | null;
63
- getSelectedElList(): HTMLElement[];
64
- getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
65
- /**
66
- * 获取鼠标下方第一个可选中元素,如果元素层叠,返回到是最上层元素
67
- * @param event 鼠标事件
68
- * @returns 鼠标下方第一个可选中元素
69
- */
70
- getElementFromPoint(event: MouseEvent): Promise<HTMLElement | null>;
71
- /**
72
- * 判断一个元素能否在当前场景被选中
73
- * @param el 被判断的元素
74
- * @param event 鼠标事件
75
- * @param stop 通过该元素如果得知剩下的元素都不可被选中,通知调用方终止对剩下元素的判断
76
- * @returns 能否选中
77
- */
78
- isElCanSelect(el: HTMLElement, event: MouseEvent, stop: () => boolean): Promise<boolean>;
79
- /**
80
- * 判断一个元素是否可以被多选,如果当前元素是page,则调stop函数告诉调用方不必继续判断其它元素了
81
- */
82
- canMultiSelect(el: HTMLElement, stop: () => boolean): boolean;
83
- select(el: HTMLElement | null, event?: MouseEvent): void;
84
- multiSelect(ids: Id[]): void;
85
- getHighlightEl(): HTMLElement | undefined;
86
- setHighlightEl(el: HTMLElement | undefined): void;
87
- highlight(id: Id): void;
88
- clearHighlight(): void;
89
- /**
90
- * 用于在切换选择模式时清除上一次的状态
91
- * @param selectType 需要清理的选择模式
92
- */
93
- clearSelectStatus(selectType: SelectStatus): void;
94
- /**
95
- * 找到鼠标下方的容器,通过添加className对容器进行标记
96
- * @param event 鼠标事件
97
- * @param excludeElList 计算鼠标点所在容器时要排除的元素列表
98
- */
99
- addContainerHighlightClassName(event: MouseEvent, excludeElList: Element[]): Promise<void>;
100
- /**
101
- * 鼠标拖拽着元素,在容器上方悬停,延迟一段时间后,对容器进行标记,如果悬停时间够长将标记成功,悬停时间短,调用方通过返回的timeoutId取消标记
102
- * 标记的作用:1、高亮容器,给用户一个加入容器的交互感知;2、释放鼠标后,通过标记的标志找到要加入的容器
103
- * @param event 鼠标事件
104
- * @param excludeElList 计算鼠标所在容器时要排除的元素列表
105
- * @returns timeoutId,调用方在鼠标移走时要取消该timeout,阻止标记
106
- */
107
- delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
108
- getDragStatus(): StageDragStatus;
109
- destroy(): void;
110
- on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, listener: (...args: Param) => void): this;
111
- emit<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, ...args: Param): boolean;
112
- private createDr;
113
- private createMultiDr;
114
- private changeCallback;
115
- /**
116
- * 在执行多选逻辑前,先准备好多选选中元素
117
- * @param el 新选中的元素
118
- * @returns 多选选中的元素列表
119
- */
120
- private beforeMultiSelect;
121
- /**
122
- * 当前状态下能否将组件加入容器,默认是鼠标悬停一段时间加入,alt模式则是按住alt+鼠标悬停一段时间加入
123
- */
124
- private canAddToContainer;
125
- /**
126
- * 结束对container的标记状态
127
- * @returns 标记的容器元素,没有标记的容器时返回null
128
- */
129
- private markContainerEnd;
130
- private initMouseEvent;
131
- /**
132
- * 初始化键盘事件监听
133
- */
134
- private initKeyEvent;
135
- /**
136
- * 在down事件中集中cpu处理画布中选中操作渲染,在up事件中再通知外面的编辑器更新
137
- */
138
- private mouseDownHandler;
139
- private isStopTriggerSelect;
140
- /**
141
- * 在up事件中负责对外通知选中事件,通知画布之外的编辑器更新
142
- */
143
- private mouseUpHandler;
144
- private mouseLeaveHandler;
145
- private mouseWheelHandler;
146
- private dblclickHandler;
147
- }
@@ -1,71 +0,0 @@
1
- import type { OnDrag, OnDragGroup, OnDragGroupStart, OnDragStart, OnResize, OnResizeGroup, OnResizeGroupStart, OnResizeStart, OnRotate, OnRotateStart, OnScale, OnScaleStart } from 'moveable';
2
- import MoveableHelper from 'moveable-helper';
3
- import { Mode } from './const';
4
- import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
5
- /**
6
- * 拖拽/改变大小等操作发生时,moveable会抛出各种状态事件,DragResizeHelper负责响应这些事件,对目标节点target和拖拽节点targetShadow进行修改;
7
- * 其中目标节点是DragResizeHelper直接改的,targetShadow作为直接被操作的拖拽框,是调用moveableHelper改的;
8
- * 有个特殊情况是流式布局下,moveableHelper不支持,targetShadow也是DragResizeHelper直接改的
9
- */
10
- export default class DragResizeHelper {
11
- /** 目标节点在蒙层上的占位节点,用于跟鼠标交互,避免鼠标事件直接作用到目标节点 */
12
- private targetShadow;
13
- /** 要操作的原始目标节点 */
14
- private target;
15
- /** 多选:目标节点组 */
16
- private targetList;
17
- /** 响应拖拽的状态事件,修改绝对定位布局下targetShadow的dom。
18
- * MoveableHelper里面的方法是成员属性,如果DragResizeHelper用继承的方式将无法通过super去调这些方法 */
19
- private moveableHelper;
20
- /** 流式布局下,目标节点的镜像节点 */
21
- private ghostEl;
22
- /** 用于记录节点被改变前的位置 */
23
- private frameSnapShot;
24
- /** 多选模式下的多个节点 */
25
- private framesSnapShot;
26
- /** 布局方式:流式布局、绝对定位、固定定位 */
27
- private mode;
28
- constructor(config: DragResizeHelperConfig);
29
- destroy(): void;
30
- destroyShadowEl(): void;
31
- getShadowEl(): TargetElement | undefined;
32
- updateShadowEl(el: HTMLElement): void;
33
- setMode(mode: Mode): void;
34
- /**
35
- * 改变大小事件开始
36
- * @param e 包含了拖拽节点的dom,moveableHelper会直接修改拖拽节点
37
- */
38
- onResizeStart(e: OnResizeStart): void;
39
- onResize(e: OnResize): void;
40
- onDragStart(e: OnDragStart): void;
41
- onDrag(e: OnDrag): void;
42
- onRotateStart(e: OnRotateStart): void;
43
- onRotate(e: OnRotate): void;
44
- onScaleStart(e: OnScaleStart): void;
45
- onScale(e: OnScale): void;
46
- getGhostEl(): HTMLElement | undefined;
47
- destroyGhostEl(): void;
48
- clear(): void;
49
- getFrame(el: HTMLElement | SVGElement): ReturnType<MoveableHelper['getFrame']>;
50
- getShadowEls(): TargetElement[];
51
- updateGroup(els: HTMLElement[]): void;
52
- setTargetList(targetList: HTMLElement[]): void;
53
- clearMultiSelectStatus(): void;
54
- onResizeGroupStart(e: OnResizeGroupStart): void;
55
- /**
56
- * 多选状态下通过拖拽边框改变大小,所有选中组件会一起改变大小
57
- */
58
- onResizeGroup(e: OnResizeGroup): void;
59
- onDragGroupStart(e: OnDragGroupStart): void;
60
- onDragGroup(e: OnDragGroup): void;
61
- getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect;
62
- /**
63
- * 多选状态设置多个节点的快照
64
- */
65
- private setFramesSnapShot;
66
- /**
67
- * 流式布局把目标节点复制一份进行拖拽,在拖拽结束前不影响页面原布局样式
68
- */
69
- private generateGhostEl;
70
- private setGhostElChildrenId;
71
- }
@@ -1,9 +0,0 @@
1
- import { MoveableManagerInterface, Renderer } from 'moveable';
2
- import { AbleActionEventType } from './const';
3
- declare const _default: (handler: (type: AbleActionEventType) => void) => {
4
- name: string;
5
- props: never[];
6
- events: never[];
7
- render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
8
- };
9
- export default _default;
@@ -1,86 +0,0 @@
1
- import EventEmitter from 'events';
2
- import type { MoveableOptions } from 'moveable';
3
- import { GuidesType, Mode } from './const';
4
- import type { MoveableOptionsManagerConfig } from './types';
5
- /**
6
- * 单选和多选的父类,用于管理moveableOptions
7
- * @extends EventEmitter
8
- */
9
- export default class MoveableOptionsManager extends EventEmitter {
10
- /** 布局方式:流式布局、绝对定位、固定定位 */
11
- mode: Mode;
12
- /** 画布容器 */
13
- protected container: HTMLElement;
14
- protected options: MoveableOptions;
15
- /** 水平参考线 */
16
- private horizontalGuidelines;
17
- /** 垂直参考线 */
18
- private verticalGuidelines;
19
- /** 对齐元素集合 */
20
- private elementGuidelines;
21
- /** 由外部调用方(编辑器)传入进来的moveable默认参数,可以为空,也可以是一个回调函数 */
22
- private customizedOptions?;
23
- /** 获取整个画布的根元素(在StageCore的mount函数中挂载的container) */
24
- private getRootContainer;
25
- constructor(config: MoveableOptionsManagerConfig);
26
- getOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K];
27
- /**
28
- * 设置水平/垂直参考线
29
- * @param type 参考线类型
30
- * @param guidelines 参考线坐标数组
31
- */
32
- setGuidelines(type: GuidesType, guidelines: number[]): void;
33
- /**
34
- * 清除横向和纵向的参考线
35
- */
36
- clearGuides(): void;
37
- /**
38
- * 设置有哪些元素要辅助对齐
39
- * @param selectedElList 选中的元素列表,需要排除在对齐元素之外
40
- */
41
- protected setElementGuidelines(selectedElList: HTMLElement[]): void;
42
- /**
43
- * 获取moveable参数
44
- * @param isMultiSelect 是否多选模式
45
- * @param runtimeOptions 调用时实时传进来的的moveable参数
46
- * @returns moveable所需参数
47
- */
48
- protected getOptions(isMultiSelect: boolean, runtimeOptions?: MoveableOptions): MoveableOptions;
49
- /**
50
- * 获取单选和多选的moveable公共参数
51
- * @returns moveable公共参数
52
- */
53
- private getDefaultOptions;
54
- /**
55
- * 获取单选下的差异化参数
56
- * @returns {MoveableOptions} moveable options参数
57
- */
58
- private getSingleOptions;
59
- /**
60
- * 获取多选下的差异化参数
61
- * @returns {MoveableOptions} moveable options参数
62
- */
63
- private getMultiOptions;
64
- /**
65
- * 获取业务方自定义的moveable参数
66
- */
67
- private getCustomizeOptions;
68
- /**
69
- * 这是给selectParentAbles的回调函数,用于触发选中父元素事件
70
- */
71
- private actionHandler;
72
- /**
73
- * 为需要辅助对齐的元素创建div
74
- * @param selectedElList 选中的元素列表,需要排除在对齐元素之外
75
- * @param allElList 全部元素列表
76
- * @returns frame 辅助对齐元素集合的页面片
77
- */
78
- private createGuidelineElements;
79
- /**
80
- * 判断一个元素是否在元素列表里面
81
- * @param ele 元素
82
- * @param eleList 元素列表
83
- * @returns 是否在元素列表里面
84
- */
85
- private isInElementList;
86
- }
package/types/Rule.d.ts DELETED
@@ -1,36 +0,0 @@
1
- import EventEmitter from 'events';
2
- import Guides from '@scena/guides';
3
- import type { RuleOptions } from './types';
4
- export default class Rule extends EventEmitter {
5
- hGuides: Guides;
6
- vGuides: Guides;
7
- horizontalGuidelines: number[];
8
- verticalGuidelines: number[];
9
- private container;
10
- private containerResizeObserver;
11
- private isShowGuides;
12
- private guidesOptions?;
13
- constructor(container: HTMLDivElement, options?: RuleOptions);
14
- /**
15
- * 是否显示辅助线
16
- * @param isShowGuides 是否显示
17
- */
18
- showGuides(isShowGuides?: boolean): void;
19
- setGuides([hLines, vLines]: [number[], number[]]): void;
20
- /**
21
- * 清空所有参考线
22
- */
23
- clearGuides(): void;
24
- /**
25
- * 是否显示标尺
26
- * @param show 是否显示
27
- */
28
- showRule(show?: boolean): void;
29
- scrollRule(scrollTop: number): void;
30
- destroy(): void;
31
- destroyGuides(): void;
32
- private getGuidesStyle;
33
- private createGuides;
34
- private hGuidesChangeGuidesHandler;
35
- private vGuidesChangeGuidesHandler;
36
- }
@@ -1,114 +0,0 @@
1
- import { EventEmitter } from 'events';
2
- import type { MoveableOptions } from 'moveable';
3
- import type { Id } from '@tmagic/schema';
4
- import ActionManager from './ActionManager';
5
- import StageMask from './StageMask';
6
- import StageRender from './StageRender';
7
- import type { CoreEvents, RemoveData, StageCoreConfig, UpdateData } from './types';
8
- /**
9
- * 负责管理画布,管理renderer、mask、actionManager三个核心类,并负责统一对外通信,包括提供接口和抛事件
10
- */
11
- export default class StageCore extends EventEmitter {
12
- container?: HTMLDivElement;
13
- renderer: StageRender;
14
- mask: StageMask;
15
- actionManager: ActionManager;
16
- private pageResizeObserver;
17
- private autoScrollIntoView;
18
- private customizedRender?;
19
- constructor(config: StageCoreConfig);
20
- /**
21
- * 单选选中元素
22
- * @param id 选中的id
23
- */
24
- select(id: Id, event?: MouseEvent): Promise<void>;
25
- /**
26
- * 多选选中多个元素
27
- * @param ids 选中元素的id列表
28
- */
29
- multiSelect(ids: Id[]): Promise<void>;
30
- /**
31
- * 高亮选中元素
32
- * @param el 要高亮的元素
33
- */
34
- highlight(id: Id): void;
35
- clearHighlight(): void;
36
- /**
37
- * 更新组件
38
- * @param data 更新组件的数据
39
- */
40
- update(data: UpdateData): Promise<void>;
41
- /**
42
- * 往画布增加一个组件
43
- * @param data 组件信息数据
44
- */
45
- add(data: UpdateData): Promise<void>;
46
- /**
47
- * 从画布删除一个组件
48
- * @param data 组件信息数据
49
- */
50
- remove(data: RemoveData): Promise<void>;
51
- setZoom(zoom?: number): void;
52
- /**
53
- * 挂载Dom节点
54
- * @param el 将stage挂载到该Dom节点上
55
- */
56
- mount(el: HTMLDivElement): Promise<void>;
57
- /**
58
- * 清空所有参考线
59
- */
60
- clearGuides(): void;
61
- /**
62
- * @deprecated 废弃接口,建议用delayedMarkContainer代替
63
- */
64
- getAddContainerHighlightClassNameTimeout(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
65
- /**
66
- * 鼠标拖拽着元素,在容器上方悬停,延迟一段时间后,对容器进行标记,如果悬停时间够长将标记成功,悬停时间短,调用方通过返回的timeoutId取消标记
67
- * 标记的作用:1、高亮容器,给用户一个加入容器的交互感知;2、释放鼠标后,通过标记的标志找到要加入的容器
68
- * @param event 鼠标事件
69
- * @param excludeElList 计算鼠标所在容器时要排除的元素列表
70
- * @returns timeoutId,调用方在鼠标移走时要取消该timeout,阻止标记
71
- */
72
- delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
73
- getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
74
- getDragStatus(): import("./const").StageDragStatus;
75
- disableMultiSelect(): void;
76
- enableMultiSelect(): void;
77
- /**
78
- * 销毁实例
79
- */
80
- destroy(): void;
81
- on<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
82
- emit<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(eventName: Name, ...args: Param): boolean;
83
- /**
84
- * 监听页面大小变化
85
- */
86
- private observePageResize;
87
- private getActionManagerConfig;
88
- private initRenderEvent;
89
- private initMaskEvent;
90
- /**
91
- * 初始化操作相关事件监听
92
- */
93
- private initActionEvent;
94
- /**
95
- * 初始化ActionManager类本身抛出来的事件监听
96
- */
97
- private initActionManagerEvent;
98
- /**
99
- * 初始化DragResize类通过ActionManager抛出来的事件监听
100
- */
101
- private initDrEvent;
102
- /**
103
- * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
104
- */
105
- private initMulDrEvent;
106
- /**
107
- * 初始化Highlight类通过ActionManager抛出来的事件监听
108
- */
109
- private initHighlightEvent;
110
- /**
111
- * 初始化Highlight类通过ActionManager抛出来的事件监听
112
- */
113
- private initMouseEvent;
114
- }
@@ -1,49 +0,0 @@
1
- import { StageDragStatus } from './const';
2
- import MoveableOptionsManager from './MoveableOptionsManager';
3
- import type { DrEvents, StageDragResizeConfig } from './types';
4
- /**
5
- * 管理单选操作,响应选中操作,初始化moveableOption参数并初始化moveable,处理moveable回调事件对组件进行更新
6
- * @extends MoveableOptionsManager
7
- */
8
- export default class StageDragResize extends MoveableOptionsManager {
9
- /** 目标节点 */
10
- private target;
11
- /** Moveable拖拽类实例 */
12
- private moveable?;
13
- /** 拖动状态 */
14
- private dragStatus;
15
- private dragResizeHelper;
16
- private disabledDragStart?;
17
- private getRenderDocument;
18
- private markContainerEnd;
19
- private delayedMarkContainer;
20
- constructor(config: StageDragResizeConfig);
21
- getTarget(): HTMLElement | null;
22
- /**
23
- * 将选中框渲染并覆盖到选中的组件Dom节点上方
24
- * 当选中的节点不是absolute时,会创建一个新的节点出来作为拖拽目标
25
- * @param el 选中组件的Dom节点元素
26
- * @param event 鼠标事件
27
- */
28
- select(el: HTMLElement | null, event?: MouseEvent): void;
29
- /**
30
- * 初始化选中框并渲染出来
31
- */
32
- updateMoveable(el?: HTMLElement | null): void;
33
- clearSelectStatus(): void;
34
- getDragStatus(): StageDragStatus;
35
- /**
36
- * 销毁实例
37
- */
38
- destroy(): void;
39
- on<Name extends keyof DrEvents, Param extends DrEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
40
- emit<Name extends keyof DrEvents, Param extends DrEvents[Name]>(eventName: Name, ...args: Param): boolean;
41
- private init;
42
- private initMoveable;
43
- private bindResizeEvent;
44
- private bindDragEvent;
45
- private bindRotateEvent;
46
- private bindScaleEvent;
47
- private sort;
48
- private update;
49
- }
@@ -1,25 +0,0 @@
1
- import { EventEmitter } from 'events';
2
- import Moveable from 'moveable';
3
- import TargetShadow from './TargetShadow';
4
- import type { StageHighlightConfig } from './types';
5
- export default class StageHighlight extends EventEmitter {
6
- container: HTMLElement;
7
- target?: HTMLElement;
8
- moveable?: Moveable;
9
- targetShadow?: TargetShadow;
10
- private getRootContainer;
11
- constructor(config: StageHighlightConfig);
12
- /**
13
- * 高亮鼠标悬停的组件
14
- * @param el 选中组件的Dom节点元素
15
- */
16
- highlight(el: HTMLElement): void;
17
- /**
18
- * 清空高亮
19
- */
20
- clearHighlight(): void;
21
- /**
22
- * 销毁实例
23
- */
24
- destroy(): void;
25
- }
@@ -1,89 +0,0 @@
1
- import { Mode } from './const';
2
- import Rule from './Rule';
3
- import type { MaskEvents, RuleOptions } from './types';
4
- /**
5
- * 蒙层
6
- * @description 用于拦截页面的点击动作,避免点击时触发组件自身动作;在编辑器中点击组件应当是选中组件;
7
- */
8
- export default class StageMask extends Rule {
9
- content: HTMLDivElement;
10
- wrapper: HTMLDivElement;
11
- page: HTMLElement | null;
12
- scrollTop: number;
13
- scrollLeft: number;
14
- width: number;
15
- height: number;
16
- wrapperHeight: number;
17
- wrapperWidth: number;
18
- maxScrollTop: number;
19
- maxScrollLeft: number;
20
- private mode;
21
- private pageScrollParent;
22
- private intersectionObserver;
23
- private wrapperResizeObserver;
24
- constructor(options?: RuleOptions);
25
- setMode(mode: Mode): void;
26
- /**
27
- * 初始化视窗和蒙层监听,监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
28
- * @description 初始化视窗和蒙层监听
29
- * @param page 页面Dom节点
30
- */
31
- observe(page: HTMLElement): void;
32
- /**
33
- * 处理页面大小变更,同步页面和mask大小
34
- * @param entries ResizeObserverEntry,获取页面最新大小
35
- */
36
- pageResize(entries: ResizeObserverEntry[]): void;
37
- /**
38
- * 监听一个组件是否在画布可视区域内
39
- * @param el 被选中的组件,可能是左侧目录树中选中的
40
- */
41
- observerIntersection(el: HTMLElement): void;
42
- /**
43
- * 挂载Dom节点
44
- * @param el 将蒙层挂载到该Dom节点上
45
- */
46
- mount(el: HTMLDivElement): void;
47
- setLayout(el: HTMLElement): void;
48
- scrollIntoView(el: Element): void;
49
- /**
50
- * 销毁实例
51
- */
52
- destroy(): void;
53
- on<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
54
- emit<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(eventName: Name, ...args: Param): boolean;
55
- /**
56
- * 监听选中元素是否在画布可视区域内,如果目标元素不在可视区域内,通过滚动使该元素出现在可视区域
57
- */
58
- private initObserverIntersection;
59
- /**
60
- * 监听mask的容器大小变化
61
- */
62
- private initObserverWrapper;
63
- private scroll;
64
- private scrollTo;
65
- /**
66
- * 设置蒙层高度
67
- * @param height 高度
68
- */
69
- private setHeight;
70
- /**
71
- * 设置蒙层宽度
72
- * @param width 宽度
73
- */
74
- private setWidth;
75
- /**
76
- * 计算并设置最大滚动宽度
77
- */
78
- private setMaxScrollLeft;
79
- /**
80
- * 计算并设置最大滚动高度
81
- */
82
- private setMaxScrollTop;
83
- /**
84
- * 修复滚动距离
85
- * 由于滚动容器变化等因素,会导致当前滚动的距离不正确
86
- */
87
- private fixScrollValue;
88
- private mouseWheelHandler;
89
- }
@@ -1,40 +0,0 @@
1
- import Moveable from 'moveable';
2
- import { StageDragStatus } from './const';
3
- import MoveableOptionsManager from './MoveableOptionsManager';
4
- import { MultiDrEvents, StageMultiDragResizeConfig } from './types';
5
- export default class StageMultiDragResize extends MoveableOptionsManager {
6
- /** 画布容器 */
7
- container: HTMLElement;
8
- /** 多选:目标节点组 */
9
- targetList: HTMLElement[];
10
- /** Moveable多选拖拽类实例 */
11
- moveableForMulti?: Moveable;
12
- dragStatus: StageDragStatus;
13
- private dragResizeHelper;
14
- private getRenderDocument;
15
- private delayedMarkContainer;
16
- private markContainerEnd;
17
- constructor(config: StageMultiDragResizeConfig);
18
- /**
19
- * 多选
20
- * @param els
21
- */
22
- multiSelect(els: HTMLElement[]): void;
23
- canSelect(el: HTMLElement, selectedEl: HTMLElement | null): boolean;
24
- updateMoveable(eleList?: HTMLElement[]): void;
25
- /**
26
- * 清除多选状态
27
- */
28
- clearSelectStatus(): void;
29
- /**
30
- * 销毁实例
31
- */
32
- destroy(): void;
33
- on<Name extends keyof MultiDrEvents, Param extends MultiDrEvents[Name]>(eventName: Name, listener: (...args: Param) => void | Promise<void>): this;
34
- emit<Name extends keyof MultiDrEvents, Param extends MultiDrEvents[Name]>(eventName: Name, ...args: Param): boolean;
35
- /**
36
- * 拖拽完成后将更新的位置信息暴露给上层业务方,业务方可以接收事件进行保存
37
- * @param isResize 是否进行大小缩放
38
- */
39
- private update;
40
- }