@tmagic/stage 1.8.0-beta.28 → 1.8.0-beta.29
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.
- package/dist/es/StageDragResize.js +12 -9
- package/dist/tmagic-stage.umd.cjs +27 -21
- package/package.json +2 -2
- package/types/index.d.ts +83 -83
|
@@ -144,12 +144,14 @@ var StageDragResize = class extends MoveableOptionsManager {
|
|
|
144
144
|
timeout = void 0;
|
|
145
145
|
}
|
|
146
146
|
const parentEl = this.markContainerEnd();
|
|
147
|
-
if (this.dragStatus === StageDragStatus.ING)
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
147
|
+
if (this.dragStatus === StageDragStatus.ING) {
|
|
148
|
+
if (parentEl) this.update(false, parentEl);
|
|
149
|
+
else switch (this.mode) {
|
|
150
|
+
case Mode.SORTABLE:
|
|
151
|
+
this.sort();
|
|
152
|
+
break;
|
|
153
|
+
default: this.update();
|
|
154
|
+
}
|
|
153
155
|
}
|
|
154
156
|
this.dragStatus = StageDragStatus.END;
|
|
155
157
|
this.dragResizeHelper.destroyGhostEl();
|
|
@@ -202,9 +204,10 @@ var StageDragResize = class extends MoveableOptionsManager {
|
|
|
202
204
|
const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
|
|
203
205
|
const { top: oriTop } = this.target.getBoundingClientRect();
|
|
204
206
|
const deltaTop = top - oriTop;
|
|
205
|
-
if (Math.abs(deltaTop) >= this.target.clientHeight / 2)
|
|
206
|
-
|
|
207
|
-
|
|
207
|
+
if (Math.abs(deltaTop) >= this.target.clientHeight / 2) {
|
|
208
|
+
if (deltaTop > 0) this.emit("sort", down(deltaTop, this.target));
|
|
209
|
+
else this.emit("sort", up(deltaTop, this.target));
|
|
210
|
+
} else {
|
|
208
211
|
const id = getIdFromEl()(this.target);
|
|
209
212
|
id && this.emit("sort", {
|
|
210
213
|
src: id,
|
|
@@ -82,8 +82,10 @@
|
|
|
82
82
|
var unmasked = true;
|
|
83
83
|
} catch (e) {}
|
|
84
84
|
var result = nativeObjectToString$1.call(value);
|
|
85
|
-
if (unmasked)
|
|
86
|
-
|
|
85
|
+
if (unmasked) {
|
|
86
|
+
if (isOwn) value[symToStringTag$1] = tag;
|
|
87
|
+
else delete value[symToStringTag$1];
|
|
88
|
+
}
|
|
87
89
|
return result;
|
|
88
90
|
}
|
|
89
91
|
//#endregion
|
|
@@ -2054,16 +2056,17 @@
|
|
|
2054
2056
|
if (isCommon) {
|
|
2055
2057
|
var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue);
|
|
2056
2058
|
newValue = srcValue;
|
|
2057
|
-
if (isArr || isBuff || isTyped)
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2059
|
+
if (isArr || isBuff || isTyped) {
|
|
2060
|
+
if (isArray(objValue)) newValue = objValue;
|
|
2061
|
+
else if (isArrayLikeObject(objValue)) newValue = copyArray(objValue);
|
|
2062
|
+
else if (isBuff) {
|
|
2063
|
+
isCommon = false;
|
|
2064
|
+
newValue = cloneBuffer(srcValue, true);
|
|
2065
|
+
} else if (isTyped) {
|
|
2066
|
+
isCommon = false;
|
|
2067
|
+
newValue = cloneTypedArray(srcValue, true);
|
|
2068
|
+
} else newValue = [];
|
|
2069
|
+
} else if (isPlainObject(srcValue) || isArguments(srcValue)) {
|
|
2067
2070
|
newValue = objValue;
|
|
2068
2071
|
if (isArguments(objValue)) newValue = toPlainObject(objValue);
|
|
2069
2072
|
else if (!isObject(objValue) || isFunction(objValue)) newValue = initCloneObject(srcValue);
|
|
@@ -3250,12 +3253,14 @@
|
|
|
3250
3253
|
timeout = void 0;
|
|
3251
3254
|
}
|
|
3252
3255
|
const parentEl = this.markContainerEnd();
|
|
3253
|
-
if (this.dragStatus === StageDragStatus.ING)
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3256
|
+
if (this.dragStatus === StageDragStatus.ING) {
|
|
3257
|
+
if (parentEl) this.update(false, parentEl);
|
|
3258
|
+
else switch (this.mode) {
|
|
3259
|
+
case Mode.SORTABLE:
|
|
3260
|
+
this.sort();
|
|
3261
|
+
break;
|
|
3262
|
+
default: this.update();
|
|
3263
|
+
}
|
|
3259
3264
|
}
|
|
3260
3265
|
this.dragStatus = StageDragStatus.END;
|
|
3261
3266
|
this.dragResizeHelper.destroyGhostEl();
|
|
@@ -3308,9 +3313,10 @@
|
|
|
3308
3313
|
const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
|
|
3309
3314
|
const { top: oriTop } = this.target.getBoundingClientRect();
|
|
3310
3315
|
const deltaTop = top - oriTop;
|
|
3311
|
-
if (Math.abs(deltaTop) >= this.target.clientHeight / 2)
|
|
3312
|
-
|
|
3313
|
-
|
|
3316
|
+
if (Math.abs(deltaTop) >= this.target.clientHeight / 2) {
|
|
3317
|
+
if (deltaTop > 0) this.emit("sort", down(deltaTop, this.target));
|
|
3318
|
+
else this.emit("sort", up(deltaTop, this.target));
|
|
3319
|
+
} else {
|
|
3314
3320
|
const id = (0, _tmagic_core.getIdFromEl)()(this.target);
|
|
3315
3321
|
id && this.emit("sort", {
|
|
3316
3322
|
src: id,
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.8.0-beta.
|
|
2
|
+
"version": "1.8.0-beta.29",
|
|
3
3
|
"name": "@tmagic/stage",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"typescript": "^6.0.3",
|
|
47
|
-
"@tmagic/core": "1.8.0-beta.
|
|
47
|
+
"@tmagic/core": "1.8.0-beta.29"
|
|
48
48
|
},
|
|
49
49
|
"peerDependenciesMeta": {
|
|
50
50
|
"typescript": {
|
package/types/index.d.ts
CHANGED
|
@@ -7,26 +7,26 @@ import MoveableHelper from "moveable-helper";
|
|
|
7
7
|
export * from "moveable";
|
|
8
8
|
//#region temp/packages/stage/src/const.d.ts
|
|
9
9
|
/** 流式布局下拖动时需要clone一个镜像节点,镜像节点的id前缀 */
|
|
10
|
-
declare const GHOST_EL_ID_PREFIX = "ghost_el_";
|
|
10
|
+
export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
|
|
11
11
|
/** 拖动的时候需要在蒙层中创建一个占位节点,该节点的id前缀 */
|
|
12
|
-
declare const DRAG_EL_ID_PREFIX = "drag_el_";
|
|
12
|
+
export declare const DRAG_EL_ID_PREFIX = "drag_el_";
|
|
13
13
|
/** 高亮时需要在蒙层中创建一个占位节点,该节点的id前缀 */
|
|
14
|
-
declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
|
|
14
|
+
export declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
|
|
15
15
|
/** 闪烁提示时需要在蒙层中创建一个占位节点,该节点的id前缀 */
|
|
16
|
-
declare const FLASH_EL_ID_PREFIX = "flash_el_";
|
|
17
|
-
declare const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
|
|
18
|
-
declare const PAGE_CLASS = "magic-ui-page";
|
|
16
|
+
export declare const FLASH_EL_ID_PREFIX = "flash_el_";
|
|
17
|
+
export declare const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
|
|
18
|
+
export declare const PAGE_CLASS = "magic-ui-page";
|
|
19
19
|
/** 默认放到缩小倍数 */
|
|
20
|
-
declare const DEFAULT_ZOOM = 1;
|
|
20
|
+
export declare const DEFAULT_ZOOM = 1;
|
|
21
21
|
/** 参考线类型 */
|
|
22
|
-
declare enum GuidesType {
|
|
22
|
+
export declare enum GuidesType {
|
|
23
23
|
/** 水平 */
|
|
24
24
|
HORIZONTAL = "horizontal",
|
|
25
25
|
/** 垂直 */
|
|
26
26
|
VERTICAL = "vertical"
|
|
27
27
|
}
|
|
28
28
|
/** css z-index */
|
|
29
|
-
declare enum ZIndex {
|
|
29
|
+
export declare enum ZIndex {
|
|
30
30
|
/** 蒙层,用于监听用户操作,需要置于顶层 */
|
|
31
31
|
MASK = "99999",
|
|
32
32
|
/** 选中的节点 */
|
|
@@ -36,7 +36,7 @@ declare enum ZIndex {
|
|
|
36
36
|
HIGHLIGHT_EL = "8"
|
|
37
37
|
}
|
|
38
38
|
/** 鼠标按键 */
|
|
39
|
-
declare enum MouseButton {
|
|
39
|
+
export declare enum MouseButton {
|
|
40
40
|
/** 左键 */
|
|
41
41
|
LEFT = 0,
|
|
42
42
|
/** z中健 */
|
|
@@ -45,7 +45,7 @@ declare enum MouseButton {
|
|
|
45
45
|
RIGHT = 2
|
|
46
46
|
}
|
|
47
47
|
/** 布局方式 */
|
|
48
|
-
declare enum Mode {
|
|
48
|
+
export declare enum Mode {
|
|
49
49
|
/** 绝对定位布局 */
|
|
50
50
|
ABSOLUTE = "absolute",
|
|
51
51
|
/** 固定定位布局 */
|
|
@@ -54,32 +54,32 @@ declare enum Mode {
|
|
|
54
54
|
SORTABLE = "sortable"
|
|
55
55
|
}
|
|
56
56
|
/** 选中节点的class name */
|
|
57
|
-
declare const SELECTED_CLASS = "tmagic-stage-selected-area";
|
|
58
|
-
declare enum AbleActionEventType {
|
|
57
|
+
export declare const SELECTED_CLASS = "tmagic-stage-selected-area";
|
|
58
|
+
export declare enum AbleActionEventType {
|
|
59
59
|
SELECT_PARENT = "select-parent",
|
|
60
60
|
REMOVE = "remove",
|
|
61
61
|
RERENDER = "rerender"
|
|
62
62
|
}
|
|
63
63
|
/** 将组件添加到容器的方式 */
|
|
64
|
-
declare enum ContainerHighlightType {
|
|
64
|
+
export declare enum ContainerHighlightType {
|
|
65
65
|
/** 默认方式:组件在容器上方悬停一段时间后加入 */
|
|
66
66
|
DEFAULT = "default",
|
|
67
67
|
/** 按住alt键,并在容器上方悬停一段时间后加入 */
|
|
68
68
|
ALT = "alt"
|
|
69
69
|
}
|
|
70
|
-
declare enum RenderType {
|
|
70
|
+
export declare enum RenderType {
|
|
71
71
|
IFRAME = "iframe",
|
|
72
72
|
NATIVE = "native"
|
|
73
73
|
}
|
|
74
74
|
/** 选择状态 */
|
|
75
|
-
declare enum SelectStatus {
|
|
75
|
+
export declare enum SelectStatus {
|
|
76
76
|
/** 单选 */
|
|
77
77
|
SELECT = "select",
|
|
78
78
|
/** 多选 */
|
|
79
79
|
MULTI_SELECT = "multiSelect"
|
|
80
80
|
}
|
|
81
81
|
/** 拖动状态 */
|
|
82
|
-
declare enum StageDragStatus {
|
|
82
|
+
export declare enum StageDragStatus {
|
|
83
83
|
/** 开始拖动 */
|
|
84
84
|
START = "start",
|
|
85
85
|
/** 拖动中 */
|
|
@@ -157,9 +157,9 @@ declare class DragResizeHelper {
|
|
|
157
157
|
}
|
|
158
158
|
//#endregion
|
|
159
159
|
//#region temp/packages/stage/src/types.d.ts
|
|
160
|
-
type TargetElement = HTMLElement | SVGElement;
|
|
161
|
-
type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
|
|
162
|
-
type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
|
|
160
|
+
export type TargetElement = HTMLElement | SVGElement;
|
|
161
|
+
export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
|
|
162
|
+
export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
|
|
163
163
|
/**
|
|
164
164
|
* 判断当前正在拖动的源是否可以拖入目标容器(用于画布上拖入组件时的容器高亮命中)
|
|
165
165
|
* @param sourceIds 当前正在拖动的源节点 id 列表
|
|
@@ -171,21 +171,21 @@ type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
|
|
|
171
171
|
* - `Id`(string | number):将拖入目标重定向到该 id 对应的节点
|
|
172
172
|
* - 其他(`true` / `void` / `undefined`):按命中的 targetId 正常拖入
|
|
173
173
|
*/
|
|
174
|
-
type CanDropIn = (sourceIds: Id[], targetId: Id) => Id | boolean | void;
|
|
175
|
-
type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement | void> | HTMLElement | void;
|
|
176
|
-
type CustomizeMoveableOptionsFunction = (config: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions;
|
|
174
|
+
export type CanDropIn = (sourceIds: Id[], targetId: Id) => Id | boolean | void;
|
|
175
|
+
export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement | void> | HTMLElement | void;
|
|
176
|
+
export type CustomizeMoveableOptionsFunction = (config: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions;
|
|
177
177
|
/** 业务方自定义的moveableOptions,可以是配置,也可以是回调函数 */
|
|
178
|
-
type CustomizeMoveableOptions = CustomizeMoveableOptionsFunction | MoveableOptions;
|
|
178
|
+
export type CustomizeMoveableOptions = CustomizeMoveableOptionsFunction | MoveableOptions;
|
|
179
179
|
/** render提供给的接口,id转成el */
|
|
180
|
-
type GetTargetElement = (id: Id) => HTMLElement | null;
|
|
180
|
+
export type GetTargetElement = (id: Id) => HTMLElement | null;
|
|
181
181
|
/** render提供的接口,通过坐标获得坐标下所有HTML元素数组 */
|
|
182
|
-
type GetElementsFromPoint = (point: Point) => HTMLElement[];
|
|
183
|
-
type GetRenderDocument = () => Document | undefined;
|
|
184
|
-
type DelayedMarkContainer = (event: MouseEvent, exclude?: Element[], isAdd?: boolean) => NodeJS.Timeout | undefined;
|
|
185
|
-
type MarkContainerEnd = () => HTMLElement | null;
|
|
186
|
-
type GetRootContainer = () => HTMLDivElement | undefined;
|
|
187
|
-
type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
|
|
188
|
-
interface StageCoreConfig {
|
|
182
|
+
export type GetElementsFromPoint = (point: Point) => HTMLElement[];
|
|
183
|
+
export type GetRenderDocument = () => Document | undefined;
|
|
184
|
+
export type DelayedMarkContainer = (event: MouseEvent, exclude?: Element[], isAdd?: boolean) => NodeJS.Timeout | undefined;
|
|
185
|
+
export type MarkContainerEnd = () => HTMLElement | null;
|
|
186
|
+
export type GetRootContainer = () => HTMLDivElement | undefined;
|
|
187
|
+
export type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
|
|
188
|
+
export interface StageCoreConfig {
|
|
189
189
|
/** 需要对齐的dom节点的CSS选择器字符串 */
|
|
190
190
|
snapElementQuerySelector?: string;
|
|
191
191
|
/** 放大倍数,默认1倍 */
|
|
@@ -227,7 +227,7 @@ interface StageCoreConfig {
|
|
|
227
227
|
*/
|
|
228
228
|
disabledFlashTip?: boolean;
|
|
229
229
|
}
|
|
230
|
-
interface ActionManagerConfig {
|
|
230
|
+
export interface ActionManagerConfig {
|
|
231
231
|
container: HTMLElement;
|
|
232
232
|
containerHighlightClassName?: string;
|
|
233
233
|
containerHighlightDuration?: number;
|
|
@@ -252,12 +252,12 @@ interface ActionManagerConfig {
|
|
|
252
252
|
getTargetElement: GetTargetElement;
|
|
253
253
|
getElementsFromPoint: GetElementsFromPoint;
|
|
254
254
|
}
|
|
255
|
-
interface MoveableOptionsManagerConfig {
|
|
255
|
+
export interface MoveableOptionsManagerConfig {
|
|
256
256
|
container: HTMLElement;
|
|
257
257
|
moveableOptions?: MoveableOptions | (() => MoveableOptions);
|
|
258
258
|
getRootContainer: GetRootContainer;
|
|
259
259
|
}
|
|
260
|
-
interface CustomizeMoveableOptionsCallbackConfig {
|
|
260
|
+
export interface CustomizeMoveableOptionsCallbackConfig {
|
|
261
261
|
targetEl: HTMLElement | null;
|
|
262
262
|
targetElId?: string;
|
|
263
263
|
targetEls?: HTMLElement[];
|
|
@@ -265,49 +265,49 @@ interface CustomizeMoveableOptionsCallbackConfig {
|
|
|
265
265
|
isMulti: boolean;
|
|
266
266
|
document?: Document;
|
|
267
267
|
}
|
|
268
|
-
interface StageRenderConfig {
|
|
268
|
+
export interface StageRenderConfig {
|
|
269
269
|
runtimeUrl?: string;
|
|
270
270
|
zoom: number | undefined;
|
|
271
271
|
renderType?: RenderType;
|
|
272
272
|
customizedRender?: () => Promise<HTMLElement | null | void>;
|
|
273
273
|
}
|
|
274
|
-
interface StageMaskConfig {
|
|
274
|
+
export interface StageMaskConfig {
|
|
275
275
|
core: StageCore;
|
|
276
276
|
}
|
|
277
|
-
interface StageDragResizeConfig extends MoveableOptionsManagerConfig {
|
|
277
|
+
export interface StageDragResizeConfig extends MoveableOptionsManagerConfig {
|
|
278
278
|
dragResizeHelper: DragResizeHelper;
|
|
279
279
|
disabledDragStart?: boolean;
|
|
280
280
|
getRenderDocument: GetRenderDocument;
|
|
281
281
|
markContainerEnd: MarkContainerEnd;
|
|
282
282
|
delayedMarkContainer: DelayedMarkContainer;
|
|
283
283
|
}
|
|
284
|
-
interface StageMultiDragResizeConfig extends MoveableOptionsManagerConfig {
|
|
284
|
+
export interface StageMultiDragResizeConfig extends MoveableOptionsManagerConfig {
|
|
285
285
|
dragResizeHelper: DragResizeHelper;
|
|
286
286
|
getRenderDocument: GetRenderDocument;
|
|
287
287
|
markContainerEnd: MarkContainerEnd;
|
|
288
288
|
delayedMarkContainer: DelayedMarkContainer;
|
|
289
289
|
}
|
|
290
|
-
interface DragResizeHelperConfig {
|
|
290
|
+
export interface DragResizeHelperConfig {
|
|
291
291
|
container: HTMLElement;
|
|
292
292
|
updateDragEl?: UpdateDragEl;
|
|
293
293
|
}
|
|
294
|
-
type Rect = {
|
|
294
|
+
export type Rect = {
|
|
295
295
|
width: number;
|
|
296
296
|
height: number;
|
|
297
297
|
} & Offset;
|
|
298
|
-
interface Offset {
|
|
298
|
+
export interface Offset {
|
|
299
299
|
left: number;
|
|
300
300
|
top: number;
|
|
301
301
|
}
|
|
302
|
-
interface Point {
|
|
302
|
+
export interface Point {
|
|
303
303
|
clientX: number;
|
|
304
304
|
clientY: number;
|
|
305
305
|
}
|
|
306
|
-
interface GuidesEventData {
|
|
306
|
+
export interface GuidesEventData {
|
|
307
307
|
type: GuidesType;
|
|
308
308
|
guides: number[];
|
|
309
309
|
}
|
|
310
|
-
interface UpdateEventData {
|
|
310
|
+
export interface UpdateEventData {
|
|
311
311
|
data: {
|
|
312
312
|
el: HTMLElement;
|
|
313
313
|
style: {
|
|
@@ -324,17 +324,17 @@ interface UpdateEventData {
|
|
|
324
324
|
}[];
|
|
325
325
|
parentEl: HTMLElement | null;
|
|
326
326
|
}
|
|
327
|
-
interface RemoveEventData {
|
|
327
|
+
export interface RemoveEventData {
|
|
328
328
|
data: {
|
|
329
329
|
el: HTMLElement;
|
|
330
330
|
}[];
|
|
331
331
|
}
|
|
332
|
-
interface SortEventData {
|
|
332
|
+
export interface SortEventData {
|
|
333
333
|
src: Id;
|
|
334
334
|
dist: Id;
|
|
335
335
|
root?: MApp;
|
|
336
336
|
}
|
|
337
|
-
interface UpdateData {
|
|
337
|
+
export interface UpdateData {
|
|
338
338
|
config: MNode;
|
|
339
339
|
parent?: MContainer;
|
|
340
340
|
parentId?: Id;
|
|
@@ -342,12 +342,12 @@ interface UpdateData {
|
|
|
342
342
|
/** 插入到父节点 items 中的目标下标;runtime 优先按此同步,避免依赖选中态推算顺序 */
|
|
343
343
|
index?: number;
|
|
344
344
|
}
|
|
345
|
-
interface RemoveData {
|
|
345
|
+
export interface RemoveData {
|
|
346
346
|
id: Id;
|
|
347
347
|
parentId: Id;
|
|
348
348
|
root: MApp;
|
|
349
349
|
}
|
|
350
|
-
interface Runtime {
|
|
350
|
+
export interface Runtime {
|
|
351
351
|
getApp?: () => Core | undefined;
|
|
352
352
|
updateRootConfig?: (config: MApp) => void;
|
|
353
353
|
updatePageId?: (id: Id) => void;
|
|
@@ -358,35 +358,35 @@ interface Runtime {
|
|
|
358
358
|
remove?: (data: RemoveData) => void;
|
|
359
359
|
[key: string]: any;
|
|
360
360
|
}
|
|
361
|
-
interface Magic {
|
|
361
|
+
export interface Magic {
|
|
362
362
|
id: string;
|
|
363
363
|
/** 当前页面的根节点变化时调用该方法,编辑器会同步该el和stage的大小,该方法由stage注入到iframe.contentWindow中 */
|
|
364
364
|
onPageElUpdate: (el: HTMLElement) => void;
|
|
365
365
|
onRuntimeReady: (runtime: Runtime) => void;
|
|
366
366
|
}
|
|
367
|
-
interface RuntimeWindow extends Window {
|
|
367
|
+
export interface RuntimeWindow extends Window {
|
|
368
368
|
magic: Magic;
|
|
369
369
|
}
|
|
370
|
-
interface StageHighlightConfig {
|
|
370
|
+
export interface StageHighlightConfig {
|
|
371
371
|
container: HTMLElement;
|
|
372
372
|
updateDragEl?: UpdateDragEl;
|
|
373
373
|
getRootContainer: GetRootContainer;
|
|
374
374
|
}
|
|
375
|
-
interface TargetShadowConfig {
|
|
375
|
+
export interface TargetShadowConfig {
|
|
376
376
|
container: HTMLElement;
|
|
377
377
|
zIndex?: ZIndex;
|
|
378
378
|
updateDragEl?: UpdateDragEl;
|
|
379
379
|
idPrefix?: string;
|
|
380
380
|
}
|
|
381
|
-
interface StageFlashHighlightConfig {
|
|
381
|
+
export interface StageFlashHighlightConfig {
|
|
382
382
|
container: HTMLElement;
|
|
383
383
|
updateDragEl?: UpdateDragEl;
|
|
384
384
|
}
|
|
385
|
-
interface RuleOptions {
|
|
385
|
+
export interface RuleOptions {
|
|
386
386
|
guidesOptions?: Partial<GuidesOptions$1>;
|
|
387
387
|
disabledRule?: boolean;
|
|
388
388
|
}
|
|
389
|
-
interface CoreEvents {
|
|
389
|
+
export interface CoreEvents {
|
|
390
390
|
mounted: [];
|
|
391
391
|
'runtime-ready': [runtime: Runtime];
|
|
392
392
|
'page-el-update': [el: HTMLElement];
|
|
@@ -404,19 +404,19 @@ interface CoreEvents {
|
|
|
404
404
|
mouseleave: [event: MouseEvent];
|
|
405
405
|
'drag-start': [event: OnDragStart];
|
|
406
406
|
}
|
|
407
|
-
interface RenderEvents {
|
|
407
|
+
export interface RenderEvents {
|
|
408
408
|
onload: [];
|
|
409
409
|
'page-el-update': [el: HTMLElement];
|
|
410
410
|
'runtime-ready': [runtime: Runtime];
|
|
411
411
|
}
|
|
412
|
-
interface MaskEvents {
|
|
412
|
+
export interface MaskEvents {
|
|
413
413
|
scroll: [event: WheelEvent];
|
|
414
414
|
'change-guides': [data: {
|
|
415
415
|
type: GuidesType.HORIZONTAL;
|
|
416
416
|
guides: number[];
|
|
417
417
|
}];
|
|
418
418
|
}
|
|
419
|
-
interface ActionManagerEvents {
|
|
419
|
+
export interface ActionManagerEvents {
|
|
420
420
|
dblclick: [event: MouseEvent];
|
|
421
421
|
mousemove: [event: MouseEvent];
|
|
422
422
|
mouseleave: [event: MouseEvent];
|
|
@@ -435,7 +435,7 @@ interface ActionManagerEvents {
|
|
|
435
435
|
'multi-select': [selectedElList: HTMLElement[], event: MouseEvent];
|
|
436
436
|
'get-elements-from-point': [els: HTMLElement[]];
|
|
437
437
|
}
|
|
438
|
-
interface DrEvents {
|
|
438
|
+
export interface DrEvents {
|
|
439
439
|
'update-moveable': [];
|
|
440
440
|
[AbleActionEventType.REMOVE]: [];
|
|
441
441
|
[AbleActionEventType.SELECT_PARENT]: [];
|
|
@@ -444,7 +444,7 @@ interface DrEvents {
|
|
|
444
444
|
update: [data: UpdateEventData];
|
|
445
445
|
sort: [data: SortEventData];
|
|
446
446
|
}
|
|
447
|
-
interface MultiDrEvents {
|
|
447
|
+
export interface MultiDrEvents {
|
|
448
448
|
'update-moveable': [];
|
|
449
449
|
'change-to-select': [id: Id, event: MouseEvent];
|
|
450
450
|
update: [data: UpdateEventData];
|
|
@@ -844,7 +844,7 @@ declare class StageRender extends EventEmitter {
|
|
|
844
844
|
/**
|
|
845
845
|
* 负责管理画布,管理renderer、mask、actionManager三个核心类,并负责统一对外通信,包括提供接口和抛事件
|
|
846
846
|
*/
|
|
847
|
-
|
|
847
|
+
export default class StageCore extends EventEmitter {
|
|
848
848
|
container?: HTMLDivElement;
|
|
849
849
|
renderer: StageRender | null;
|
|
850
850
|
mask: StageMask | null;
|
|
@@ -1102,27 +1102,27 @@ declare class StageDragResize extends MoveableOptionsManager {
|
|
|
1102
1102
|
}
|
|
1103
1103
|
//#endregion
|
|
1104
1104
|
//#region temp/packages/stage/src/util.d.ts
|
|
1105
|
-
declare const getOffset: (el: Element) => Offset;
|
|
1106
|
-
declare const getTargetElStyle: (el: TargetElement, zIndex?: ZIndex) => string;
|
|
1107
|
-
declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
|
|
1105
|
+
export declare const getOffset: (el: Element) => Offset;
|
|
1106
|
+
export declare const getTargetElStyle: (el: TargetElement, zIndex?: ZIndex) => string;
|
|
1107
|
+
export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
|
|
1108
1108
|
left: number;
|
|
1109
1109
|
top: number;
|
|
1110
1110
|
};
|
|
1111
|
-
declare const isAbsolute: (style: {
|
|
1111
|
+
export declare const isAbsolute: (style: {
|
|
1112
1112
|
position?: string;
|
|
1113
1113
|
}) => boolean;
|
|
1114
|
-
declare const isRelative: (style: {
|
|
1114
|
+
export declare const isRelative: (style: {
|
|
1115
1115
|
position?: string;
|
|
1116
1116
|
}) => boolean;
|
|
1117
|
-
declare const isStatic: (style: {
|
|
1117
|
+
export declare const isStatic: (style: {
|
|
1118
1118
|
position?: string;
|
|
1119
1119
|
}) => boolean;
|
|
1120
|
-
declare const isFixed: (style: {
|
|
1120
|
+
export declare const isFixed: (style: {
|
|
1121
1121
|
position?: string;
|
|
1122
1122
|
}) => boolean;
|
|
1123
|
-
declare const isFixedParent: (el: Element) => boolean;
|
|
1124
|
-
declare const getMode: (el: Element) => Mode;
|
|
1125
|
-
declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
|
|
1123
|
+
export declare const isFixedParent: (el: Element) => boolean;
|
|
1124
|
+
export declare const getMode: (el: Element) => Mode;
|
|
1125
|
+
export declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
|
|
1126
1126
|
/**
|
|
1127
1127
|
* 将元素滚动到指定滚动容器的可视区域内(仅垂直方向,滚动最小距离)
|
|
1128
1128
|
* @description 与原生 scrollIntoView 不同,只滚动指定的容器自身,不会连带滚动外层祖先滚动容器,
|
|
@@ -1130,15 +1130,15 @@ declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) =
|
|
|
1130
1130
|
* @param el 目标元素
|
|
1131
1131
|
* @param container 滚动容器
|
|
1132
1132
|
*/
|
|
1133
|
-
declare const scrollElementIntoView: (el: Element, container: HTMLElement) => void;
|
|
1134
|
-
declare const removeSelectedClassName: (doc: Document) => void;
|
|
1135
|
-
declare const addSelectedClassName: (el: Element, doc: Document) => void;
|
|
1133
|
+
export declare const scrollElementIntoView: (el: Element, container: HTMLElement) => void;
|
|
1134
|
+
export declare const removeSelectedClassName: (doc: Document) => void;
|
|
1135
|
+
export declare const addSelectedClassName: (el: Element, doc: Document) => void;
|
|
1136
1136
|
/**
|
|
1137
1137
|
* 下移组件位置
|
|
1138
1138
|
* @param {number} deltaTop 偏移量
|
|
1139
1139
|
* @param {Object} detail 当前选中的组件配置
|
|
1140
1140
|
*/
|
|
1141
|
-
declare const down: (deltaTop: number, target: TargetElement) => SortEventData;
|
|
1141
|
+
export declare const down: (deltaTop: number, target: TargetElement) => SortEventData;
|
|
1142
1142
|
/**
|
|
1143
1143
|
* 上移组件位置
|
|
1144
1144
|
* @param {Array} brothers 处于同一容器下的所有子组件配置
|
|
@@ -1146,13 +1146,13 @@ declare const down: (deltaTop: number, target: TargetElement) => SortEventData;
|
|
|
1146
1146
|
* @param {number} deltaTop 偏移量
|
|
1147
1147
|
* @param {Object} detail 当前选中的组件配置
|
|
1148
1148
|
*/
|
|
1149
|
-
declare const up: (deltaTop: number, target: TargetElement) => SortEventData;
|
|
1150
|
-
declare const isMoveableButton: (target: Element) => boolean | undefined;
|
|
1151
|
-
declare const getMarginValue: (el: Element) => {
|
|
1149
|
+
export declare const up: (deltaTop: number, target: TargetElement) => SortEventData;
|
|
1150
|
+
export declare const isMoveableButton: (target: Element) => boolean | undefined;
|
|
1151
|
+
export declare const getMarginValue: (el: Element) => {
|
|
1152
1152
|
marginLeft: number;
|
|
1153
1153
|
marginTop: number;
|
|
1154
1154
|
};
|
|
1155
|
-
declare const getBorderWidth: (el: Element) => {
|
|
1155
|
+
export declare const getBorderWidth: (el: Element) => {
|
|
1156
1156
|
borderLeftWidth: number;
|
|
1157
1157
|
borderRightWidth: number;
|
|
1158
1158
|
borderTopWidth: number;
|
|
@@ -1160,7 +1160,7 @@ declare const getBorderWidth: (el: Element) => {
|
|
|
1160
1160
|
};
|
|
1161
1161
|
//#endregion
|
|
1162
1162
|
//#region temp/packages/stage/src/MoveableActionsAble.d.ts
|
|
1163
|
-
interface AbleCustomizedButton {
|
|
1163
|
+
export interface AbleCustomizedButton {
|
|
1164
1164
|
props: {
|
|
1165
1165
|
className?: string;
|
|
1166
1166
|
onClick?(e: MouseEvent): void;
|
|
@@ -1176,4 +1176,4 @@ declare const _default: (handler: (type: AbleActionEventType) => void, customize
|
|
|
1176
1176
|
render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
|
|
1177
1177
|
};
|
|
1178
1178
|
//#endregion
|
|
1179
|
-
export {
|
|
1179
|
+
export { type GuidesOptions, _default as MoveableActionsAble, StageDragResize, StageMask, StageRender };
|