@leafer-in/editor 1.0.0-rc.2 → 1.0.0-rc.21
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/editor.esm.js +1409 -389
- package/dist/editor.esm.min.js +1 -1
- package/dist/editor.js +1425 -395
- package/dist/editor.min.js +1 -1
- package/package.json +5 -8
- package/src/Editor.ts +240 -149
- package/src/config.ts +37 -0
- package/src/decorator/data.ts +16 -0
- package/src/display/EditBox.ts +276 -0
- package/src/display/EditPoint.ts +9 -0
- package/src/display/EditSelect.ts +250 -0
- package/src/display/SelectArea.ts +30 -0
- package/src/display/Stroker.ts +95 -0
- package/src/editor/cursor.ts +45 -0
- package/src/editor/simulate.ts +14 -0
- package/src/editor/target.ts +37 -0
- package/src/event/EditorEvent.ts +33 -0
- package/src/event/EditorMoveEvent.ts +17 -0
- package/src/event/EditorRotateEvent.ts +4 -10
- package/src/event/EditorScaleEvent.ts +27 -0
- package/src/event/EditorSkewEvent.ts +18 -0
- package/src/helper/EditDataHelper.ts +182 -0
- package/src/helper/EditSelectHelper.ts +34 -0
- package/src/helper/EditorHelper.ts +73 -0
- package/src/index.ts +28 -3
- package/src/svg.ts +54 -0
- package/src/tool/EditTool.ts +75 -0
- package/src/tool/{LineTool.ts → LineEditTool.ts} +19 -25
- package/src/tool/index.ts +21 -0
- package/types/index.d.ts +200 -43
- package/src/cursor.ts +0 -57
- package/src/event/EditorResizeEvent.ts +0 -34
- package/src/resize.ts +0 -87
- package/src/tool/RectTool.ts +0 -139
|
@@ -1,31 +1,29 @@
|
|
|
1
|
-
import { IDirection8, IEditor,
|
|
1
|
+
import { IDirection8, IEditor, IEditorScaleEvent, ILine, IEditorSkewEvent } from '@leafer-in/interface'
|
|
2
|
+
|
|
3
|
+
import { getPointData } from '@leafer-ui/draw'
|
|
4
|
+
|
|
5
|
+
import { EditTool } from './EditTool'
|
|
2
6
|
|
|
3
|
-
import { RectTool } from './RectTool'
|
|
4
7
|
|
|
5
8
|
|
|
6
9
|
const { left, right } = IDirection8
|
|
7
10
|
|
|
8
|
-
export
|
|
11
|
+
export class LineEditTool extends EditTool {
|
|
9
12
|
|
|
10
|
-
|
|
13
|
+
public tag = 'LineEditTool'
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
return {
|
|
14
|
-
x: 0,
|
|
15
|
-
y: 0
|
|
16
|
-
}
|
|
17
|
-
},
|
|
15
|
+
public scaleOfEvent = true
|
|
18
16
|
|
|
19
|
-
|
|
20
|
-
const {
|
|
17
|
+
onScaleWithDrag(e: IEditorScaleEvent): void {
|
|
18
|
+
const { drag, direction, lockRatio, around } = e
|
|
21
19
|
const target = e.target as ILine
|
|
22
20
|
|
|
23
|
-
const fromPoint =
|
|
21
|
+
const fromPoint = getPointData()
|
|
24
22
|
const { toPoint } = target
|
|
25
23
|
|
|
26
24
|
target.rotation = 0
|
|
27
25
|
|
|
28
|
-
let { x, y } =
|
|
26
|
+
let { x, y } = drag.getInnerMove(target)
|
|
29
27
|
|
|
30
28
|
if (lockRatio) {
|
|
31
29
|
if (Math.abs(x) > Math.abs(y)) {
|
|
@@ -65,24 +63,20 @@ export const LineTool: IEditorTool = {
|
|
|
65
63
|
target.getInnerPointByLocal(toPoint, null, null, true)
|
|
66
64
|
target.toPoint = toPoint
|
|
67
65
|
|
|
68
|
-
}
|
|
66
|
+
}
|
|
69
67
|
|
|
70
|
-
|
|
71
|
-
RectTool.rotate(e)
|
|
72
|
-
},
|
|
68
|
+
onSkew(_e: IEditorSkewEvent): void {
|
|
73
69
|
|
|
74
|
-
|
|
70
|
+
}
|
|
75
71
|
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
update(editor: IEditor) {
|
|
73
|
+
const { rotatePoints, resizeLines, resizePoints } = editor.editBox
|
|
74
|
+
super.update(editor)
|
|
78
75
|
|
|
79
76
|
for (let i = 0; i < 8; i++) {
|
|
80
77
|
if (i < 4) resizeLines[i].visible = false
|
|
81
|
-
resizePoints[i].visible = rotatePoints[i].visible = i === left || i === right
|
|
78
|
+
resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right)
|
|
82
79
|
}
|
|
83
|
-
|
|
84
|
-
circle.visible = false
|
|
85
|
-
|
|
86
80
|
}
|
|
87
81
|
|
|
88
82
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { IUI } from '@leafer-ui/interface'
|
|
2
|
+
import { Line } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IEditTool } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
import { EditTool } from './EditTool'
|
|
7
|
+
import { LineEditTool } from './LineEditTool'
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
export function getEditTool(list: IUI[]): IEditTool {
|
|
11
|
+
if (list.length === 1) {
|
|
12
|
+
const leaf = list[0]
|
|
13
|
+
if (leaf instanceof Line && !leaf.points) {
|
|
14
|
+
return new LineEditTool()
|
|
15
|
+
} else {
|
|
16
|
+
return new EditTool()
|
|
17
|
+
}
|
|
18
|
+
} else {
|
|
19
|
+
return new EditTool()
|
|
20
|
+
}
|
|
21
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,68 +1,225 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { Group,
|
|
1
|
+
export * from '@leafer-ui/scale';
|
|
2
|
+
import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IGroup, IGroupInputData, IEditSize, IPointData, IBox, IBoundsData, IRectInputData, IKeyEvent, IRect, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround } from '@leafer-ui/interface';
|
|
3
|
+
import { Group, Box, UI, Event, Answer } from '@leafer-ui/draw';
|
|
4
|
+
import { PointerEvent, DragEvent, MoveEvent, RotateEvent } from '@leafer-ui/core';
|
|
5
|
+
import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IEditorScaleEvent, IEditPoint, IEditPointType, IDirection8, IEditorEvent, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface';
|
|
6
|
+
|
|
7
|
+
declare class EditSelect extends Group implements IEditSelect {
|
|
8
|
+
editor: IEditor;
|
|
9
|
+
get dragging(): boolean;
|
|
10
|
+
get running(): boolean;
|
|
11
|
+
get isMoveMode(): boolean;
|
|
12
|
+
hoverStroker: IStroker;
|
|
13
|
+
targetStroker: IStroker;
|
|
14
|
+
bounds: IBounds;
|
|
15
|
+
selectArea: ISelectArea;
|
|
16
|
+
protected originList: ILeafList;
|
|
17
|
+
protected lastDownLeaf: IUI;
|
|
18
|
+
protected __eventIds: IEventListenerId[];
|
|
19
|
+
constructor(editor: IEditor);
|
|
20
|
+
protected onHover(): void;
|
|
21
|
+
protected onSelect(): void;
|
|
22
|
+
update(): void;
|
|
23
|
+
protected onPointerMove(e: PointerEvent): void;
|
|
24
|
+
protected onBeforeDown(e: PointerEvent): void;
|
|
25
|
+
protected onTap(e: PointerEvent): void;
|
|
26
|
+
protected checkAndSelect(e: PointerEvent, isDownType?: boolean): void;
|
|
27
|
+
protected onDragStart(e: DragEvent): void;
|
|
28
|
+
protected onDrag(e: DragEvent): void;
|
|
29
|
+
protected onDragEnd(): void;
|
|
30
|
+
protected onAutoMove(e: MoveEvent): void;
|
|
31
|
+
protected allow(target: ILeaf): boolean;
|
|
32
|
+
protected allowDrag(e: DragEvent): boolean;
|
|
33
|
+
protected findDeepOne(e: PointerEvent): IUI;
|
|
34
|
+
protected __listenEvents(): void;
|
|
35
|
+
protected __removeListenEvents(): void;
|
|
36
|
+
destroy(): void;
|
|
37
|
+
}
|
|
4
38
|
|
|
5
39
|
declare class Editor extends Group implements IEditor {
|
|
6
40
|
config: IEditorConfig;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
41
|
+
hoverTarget: IUI;
|
|
42
|
+
target: IUI | IUI[];
|
|
43
|
+
leafList: ILeafList;
|
|
44
|
+
get list(): IUI[];
|
|
45
|
+
get hasTarget(): boolean;
|
|
46
|
+
get multiple(): boolean;
|
|
47
|
+
get single(): boolean;
|
|
48
|
+
get element(): IUI;
|
|
49
|
+
simulateTarget: IUI;
|
|
50
|
+
editBox: IEditBox;
|
|
51
|
+
get buttons(): IGroup;
|
|
52
|
+
editTool: IEditTool;
|
|
53
|
+
selector: EditSelect;
|
|
54
|
+
get dragging(): boolean;
|
|
55
|
+
targetEventIds: IEventListenerId[];
|
|
20
56
|
constructor(userConfig?: IEditorConfig, data?: IGroupInputData);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
57
|
+
hasItem(item: IUI): boolean;
|
|
58
|
+
addItem(item: IUI): void;
|
|
59
|
+
removeItem(item: IUI): void;
|
|
60
|
+
shiftItem(item: IUI): void;
|
|
24
61
|
update(): void;
|
|
62
|
+
updateEditTool(): void;
|
|
63
|
+
getEditSize(ui: IUI): IEditSize;
|
|
64
|
+
onMove(e: DragEvent): void;
|
|
65
|
+
onScale(e: DragEvent): void;
|
|
66
|
+
onRotate(e: DragEvent | RotateEvent): void;
|
|
67
|
+
onSkew(e: DragEvent): void;
|
|
68
|
+
move(x: number, y: number): void;
|
|
69
|
+
scaleWithDrag(data: IEditorScaleEvent): void;
|
|
70
|
+
scaleOf(origin: IPointData, scaleX: number, scaleY?: number, _resize?: boolean): void;
|
|
71
|
+
rotateOf(origin: IPointData, rotation: number): void;
|
|
72
|
+
skewOf(origin: IPointData, skewX: number, skewY?: number, _resize?: boolean): void;
|
|
73
|
+
group(userGroup?: IGroup | IGroupInputData): IGroup;
|
|
74
|
+
ungroup(): IUI[];
|
|
75
|
+
lock(): void;
|
|
76
|
+
unlock(): void;
|
|
77
|
+
toTop(): void;
|
|
78
|
+
toBottom(): void;
|
|
79
|
+
listenTargetEvents(): void;
|
|
80
|
+
removeTargetEvents(): void;
|
|
81
|
+
destroy(): void;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
declare class EditBox extends Group implements IEditBox {
|
|
85
|
+
editor: IEditor;
|
|
86
|
+
dragging: boolean;
|
|
87
|
+
moving: boolean;
|
|
88
|
+
rect: IBox;
|
|
89
|
+
circle: IEditPoint;
|
|
90
|
+
buttons: IGroup;
|
|
91
|
+
resizePoints: IEditPoint[];
|
|
92
|
+
rotatePoints: IEditPoint[];
|
|
93
|
+
resizeLines: IEditPoint[];
|
|
94
|
+
get flipped(): boolean;
|
|
95
|
+
get flippedX(): boolean;
|
|
96
|
+
get flippedY(): boolean;
|
|
97
|
+
get flippedOne(): boolean;
|
|
98
|
+
enterPoint: IEditPoint;
|
|
99
|
+
protected __eventIds: IEventListenerId[];
|
|
100
|
+
constructor(editor: IEditor);
|
|
101
|
+
create(): void;
|
|
102
|
+
update(bounds: IBoundsData): void;
|
|
103
|
+
protected layoutButtons(): void;
|
|
104
|
+
getPointStyle(userStyle?: IRectInputData): IRectInputData;
|
|
105
|
+
getPointsStyle(): IRectInputData[];
|
|
106
|
+
getMiddlePointsStyle(): IRectInputData[];
|
|
107
|
+
protected onDragStart(e: DragEvent): void;
|
|
108
|
+
protected onDragEnd(e: DragEvent): void;
|
|
25
109
|
protected onDrag(e: DragEvent): void;
|
|
26
|
-
|
|
27
|
-
protected
|
|
28
|
-
|
|
29
|
-
updateMoveCursor(): void;
|
|
110
|
+
onArrow(e: IKeyEvent): void;
|
|
111
|
+
protected onDoubleClick(): void;
|
|
112
|
+
listenPointEvents(point: IEditPoint, type: IEditPointType, direction: IDirection8): void;
|
|
30
113
|
protected __listenEvents(): void;
|
|
31
114
|
protected __removeListenEvents(): void;
|
|
32
|
-
protected __listenPointEvents(point: IUI, type: 'rotate' | 'resize', direction: IDirection8): void;
|
|
33
|
-
protected __listenTargetEvents(): void;
|
|
34
|
-
protected __removeTargetEvents(): void;
|
|
35
115
|
destroy(): void;
|
|
36
116
|
}
|
|
37
117
|
|
|
38
|
-
declare class
|
|
39
|
-
|
|
118
|
+
declare class EditPoint extends Box implements IEditPoint {
|
|
119
|
+
direction: IDirection8;
|
|
120
|
+
pointType: IEditPointType;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
declare class SelectArea extends Group implements ISelectArea {
|
|
124
|
+
protected strokeArea: IRect;
|
|
125
|
+
protected fillArea: IRect;
|
|
126
|
+
constructor(data?: IGroupInputData);
|
|
127
|
+
setStyle(style: IRectInputData, userStyle?: IRectInputData): void;
|
|
128
|
+
setBounds(bounds: IBoundsData): void;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
declare class Stroker extends UI implements IStroker {
|
|
132
|
+
target: IUI | IUI[];
|
|
133
|
+
list: IUI[];
|
|
134
|
+
constructor();
|
|
135
|
+
setTarget(target: IUI | IUI[], style: IRectInputData): void;
|
|
136
|
+
__draw(canvas: ILeaferCanvas, options: IRenderOptions): void;
|
|
137
|
+
destroy(): void;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
declare class EditorEvent extends Event implements IEditorEvent {
|
|
141
|
+
static SELECT: string;
|
|
142
|
+
static HOVER: string;
|
|
40
143
|
readonly target: IUI;
|
|
41
144
|
readonly editor: IEditor;
|
|
42
|
-
readonly
|
|
43
|
-
readonly
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
readonly
|
|
47
|
-
readonly bounds: IBoundsData;
|
|
48
|
-
readonly old: IBoundsData;
|
|
145
|
+
readonly value: IUI | IUI[];
|
|
146
|
+
readonly oldValue: IUI | IUI[];
|
|
147
|
+
get list(): IUI[];
|
|
148
|
+
get oldList(): IUI[];
|
|
149
|
+
readonly worldOrigin: IPointData;
|
|
49
150
|
readonly origin: IPointData;
|
|
151
|
+
constructor(type: string, data?: IEditorEvent);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
declare class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
|
|
155
|
+
static MOVE: string;
|
|
156
|
+
readonly moveX: number;
|
|
157
|
+
readonly moveY: number;
|
|
158
|
+
constructor(type: string, data?: IEditorMoveEvent);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
declare class EditorScaleEvent extends EditorEvent implements IEditorScaleEvent {
|
|
162
|
+
static SCALE: string;
|
|
50
163
|
readonly scaleX: number;
|
|
51
164
|
readonly scaleY: number;
|
|
52
|
-
|
|
165
|
+
readonly transform?: IMatrixData;
|
|
166
|
+
readonly drag: IDragEvent;
|
|
167
|
+
readonly direction: IDirection8;
|
|
168
|
+
readonly lockRatio: boolean;
|
|
169
|
+
readonly around: IAround;
|
|
170
|
+
constructor(type: string, data?: IEditorScaleEvent);
|
|
53
171
|
}
|
|
54
172
|
|
|
55
|
-
declare class EditorRotateEvent extends
|
|
173
|
+
declare class EditorRotateEvent extends EditorEvent implements IEditorRotateEvent {
|
|
56
174
|
static ROTATE: string;
|
|
57
|
-
readonly target: IUI;
|
|
58
|
-
readonly editor: IEditor;
|
|
59
|
-
readonly origin: IPointData;
|
|
60
175
|
readonly rotation: number;
|
|
61
176
|
constructor(type: string, data?: IEditorRotateEvent);
|
|
62
177
|
}
|
|
63
178
|
|
|
64
|
-
declare
|
|
179
|
+
declare class EditorSkewEvent extends EditorEvent implements IEditorSkewEvent {
|
|
180
|
+
static SKEW: string;
|
|
181
|
+
readonly skewX: number;
|
|
182
|
+
readonly skewY: number;
|
|
183
|
+
constructor(type: string, data?: IEditorSkewEvent);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
declare class EditTool implements IEditTool {
|
|
187
|
+
static list: IEditTool[];
|
|
188
|
+
tag: string;
|
|
189
|
+
onMove(e: IEditorMoveEvent): void;
|
|
190
|
+
onScale(e: IEditorScaleEvent): void;
|
|
191
|
+
onRotate(e: IEditorRotateEvent): void;
|
|
192
|
+
onSkew(e: IEditorSkewEvent): void;
|
|
193
|
+
update(editor: IEditor): void;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
declare class LineEditTool extends EditTool {
|
|
197
|
+
tag: string;
|
|
198
|
+
scaleOfEvent: boolean;
|
|
199
|
+
onScaleWithDrag(e: IEditorScaleEvent): void;
|
|
200
|
+
onSkew(_e: IEditorSkewEvent): void;
|
|
201
|
+
update(editor: IEditor): void;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
declare const EditorHelper: {
|
|
205
|
+
group(list: IUI[], element?: IUI, userGroup?: IGroup | IGroupInputData): IGroup;
|
|
206
|
+
ungroup(list: IUI[]): IUI[];
|
|
207
|
+
toTop(list: IUI[]): void;
|
|
208
|
+
toBottom(list: IUI[]): void;
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
declare const EditDataHelper: {
|
|
212
|
+
getScaleData(bounds: IBoundsData, direction: IDirection8, pointMove: IPointData, lockRatio: boolean | 'corner', around: IAround): IEditorScaleEvent;
|
|
213
|
+
getRotateData(bounds: IBoundsData, direction: IDirection8, current: IPointData, last: IPointData, around: IAround): IEditorRotateEvent;
|
|
214
|
+
getSkewData(bounds: IBoundsData, direction: IDirection8, move: IPointData, around: IAround): IEditorSkewEvent;
|
|
215
|
+
getAround(around: IAround, altKey: boolean): IAround;
|
|
216
|
+
getRotateDirection(direction: number, rotation: number, totalDirection?: number): number;
|
|
217
|
+
getFlipDirection(direction: IDirection8, flipedX: boolean, flipedY: boolean): IDirection8;
|
|
218
|
+
};
|
|
65
219
|
|
|
66
|
-
declare const
|
|
220
|
+
declare const EditSelectHelper: {
|
|
221
|
+
findOne(path: ILeafList): IUI;
|
|
222
|
+
findBounds(leaf: IUI, bounds: IBounds): Answer;
|
|
223
|
+
};
|
|
67
224
|
|
|
68
|
-
export { Editor,
|
|
225
|
+
export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, Editor, EditorEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, LineEditTool, SelectArea, Stroker };
|
package/src/cursor.ts
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { ICursorType, IUIEvent } from '@leafer-ui/interface'
|
|
2
|
-
import { IDirection8, IEditor } from '@leafer-in/interface'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
|
|
6
|
-
|
|
7
|
-
export function updateCursor(editor: IEditor, e: IUIEvent): void {
|
|
8
|
-
|
|
9
|
-
const point = editor.enterPoint
|
|
10
|
-
if (!point || !editor.target || !editor.visible) return
|
|
11
|
-
|
|
12
|
-
let { rotation } = editor
|
|
13
|
-
let { resizeCursor, rotateCursor, resizeable } = editor.config
|
|
14
|
-
const mirror = editor.tool.getMirrorData(editor)
|
|
15
|
-
const { __direction, __isResizePoint } = point.__
|
|
16
|
-
|
|
17
|
-
editor.enterPoint = point
|
|
18
|
-
|
|
19
|
-
if (__isResizePoint && (e.metaKey || e.ctrlKey || !resizeable)) resizeCursor = rotateCursor
|
|
20
|
-
|
|
21
|
-
if (mirror.x || mirror.y) {
|
|
22
|
-
mirrorCursors(resizeCursor = [...resizeCursor], mirror.x, mirror.y)
|
|
23
|
-
mirrorCursors(rotateCursor = [...rotateCursor], mirror.y, mirror.x)
|
|
24
|
-
if (mirror.x + mirror.y === 1) rotation = -rotation
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
let index = (__direction + Math.round(rotation / 45)) % 8
|
|
28
|
-
if (index < 0) index += 8
|
|
29
|
-
|
|
30
|
-
point.cursor = __isResizePoint ? resizeCursor[index] : rotateCursor[index]
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
export function mirrorCursors(mirror: ICursorType[], mirrorX: number, mirrorY: number): void {
|
|
36
|
-
|
|
37
|
-
if (mirrorX) {
|
|
38
|
-
const topCursor = mirror[top], topLeftCursor = mirror[topLeft], topRightCursor = mirror[topRight]
|
|
39
|
-
mirror[top] = mirror[bottom]
|
|
40
|
-
mirror[topLeft] = mirror[bottomLeft]
|
|
41
|
-
mirror[topRight] = mirror[bottomRight]
|
|
42
|
-
mirror[bottom] = topCursor
|
|
43
|
-
mirror[bottomLeft] = topLeftCursor
|
|
44
|
-
mirror[bottomRight] = topRightCursor
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
if (mirrorY) {
|
|
48
|
-
const leftCursor = mirror[left], topLeftCursor = mirror[topLeft], bottomLeftCursor = mirror[bottomLeft]
|
|
49
|
-
mirror[left] = mirror[right]
|
|
50
|
-
mirror[topLeft] = mirror[topRight]
|
|
51
|
-
mirror[bottomLeft] = mirror[bottomRight]
|
|
52
|
-
mirror[right] = leftCursor
|
|
53
|
-
mirror[topRight] = topLeftCursor
|
|
54
|
-
mirror[bottomRight] = bottomLeftCursor
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { IUI, IResizeType, IBoundsData, IPointData, IAround, IDragEvent } from '@leafer-ui/interface'
|
|
2
|
-
import { IEditor, IDirection8, IEditorResizeEvent } from '@leafer-in/interface'
|
|
3
|
-
|
|
4
|
-
import { Event } from '@leafer-ui/core'
|
|
5
|
-
|
|
6
|
-
export class EditorResizeEvent extends Event implements IEditorResizeEvent {
|
|
7
|
-
|
|
8
|
-
static RESIZE = 'editor.resize'
|
|
9
|
-
|
|
10
|
-
declare readonly target: IUI
|
|
11
|
-
readonly editor: IEditor
|
|
12
|
-
|
|
13
|
-
readonly resizeType: IResizeType
|
|
14
|
-
readonly lockRatio: boolean
|
|
15
|
-
readonly around: IAround
|
|
16
|
-
|
|
17
|
-
readonly dragEvent: IDragEvent
|
|
18
|
-
readonly direction: IDirection8
|
|
19
|
-
|
|
20
|
-
// from old to bounds
|
|
21
|
-
readonly bounds: IBoundsData
|
|
22
|
-
readonly old: IBoundsData
|
|
23
|
-
|
|
24
|
-
// scaleOf(origin, scaleX, scaleY)
|
|
25
|
-
readonly origin: IPointData
|
|
26
|
-
readonly scaleX: number
|
|
27
|
-
readonly scaleY: number
|
|
28
|
-
|
|
29
|
-
constructor(type: string, data?: IEditorResizeEvent) {
|
|
30
|
-
super(type)
|
|
31
|
-
if (data) Object.assign(this, data)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
}
|
package/src/resize.ts
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { IBoundsData, IPointData, IMatrixData, IAround } from '@leafer-ui/interface'
|
|
2
|
-
import { IEditorResizeEvent, IDirection8 } from '@leafer-in/interface'
|
|
3
|
-
|
|
4
|
-
import { MatrixHelper } from '@leafer-ui/core'
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const { scaleOfOuter, reset } = MatrixHelper
|
|
8
|
-
const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = IDirection8
|
|
9
|
-
const matrix = {} as IMatrixData
|
|
10
|
-
|
|
11
|
-
export function getResizeData(old: IBoundsData, direction: IDirection8, move: IPointData, lockRatio: boolean, around: IAround): IEditorResizeEvent {
|
|
12
|
-
|
|
13
|
-
if (around) {
|
|
14
|
-
move.x *= 2
|
|
15
|
-
move.y *= 2
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
let origin: IPointData, scaleX: number = 1, scaleY: number = 1
|
|
19
|
-
const { x, y, width, height } = old
|
|
20
|
-
|
|
21
|
-
const topScale = (-move.y + height) / height
|
|
22
|
-
const rightScale = (move.x + width) / width
|
|
23
|
-
const bottomScale = (move.y + height) / height
|
|
24
|
-
const leftScale = (-move.x + width) / width
|
|
25
|
-
|
|
26
|
-
switch (direction) {
|
|
27
|
-
case top:
|
|
28
|
-
scaleY = topScale
|
|
29
|
-
if (lockRatio) scaleX = scaleY
|
|
30
|
-
origin = { x: x + width / 2, y: y + height }
|
|
31
|
-
break
|
|
32
|
-
case right:
|
|
33
|
-
scaleX = rightScale
|
|
34
|
-
if (lockRatio) scaleY = scaleX
|
|
35
|
-
origin = { x, y: y + height / 2 }
|
|
36
|
-
break
|
|
37
|
-
case bottom:
|
|
38
|
-
scaleY = bottomScale
|
|
39
|
-
if (lockRatio) scaleX = scaleY
|
|
40
|
-
origin = { x: x + width / 2, y }
|
|
41
|
-
break
|
|
42
|
-
case left:
|
|
43
|
-
scaleX = leftScale
|
|
44
|
-
if (lockRatio) scaleY = scaleX
|
|
45
|
-
origin = { x: x + width, y: y + height / 2 }
|
|
46
|
-
break
|
|
47
|
-
case topLeft:
|
|
48
|
-
scaleY = topScale
|
|
49
|
-
scaleX = leftScale
|
|
50
|
-
if (lockRatio) scaleX = scaleY
|
|
51
|
-
origin = { x: x + width, y: y + height }
|
|
52
|
-
break
|
|
53
|
-
case topRight:
|
|
54
|
-
scaleY = topScale
|
|
55
|
-
scaleX = rightScale
|
|
56
|
-
if (lockRatio) scaleX = scaleY
|
|
57
|
-
origin = { x, y: y + height }
|
|
58
|
-
break
|
|
59
|
-
case bottomRight:
|
|
60
|
-
scaleY = bottomScale
|
|
61
|
-
scaleX = rightScale
|
|
62
|
-
if (lockRatio) scaleX = scaleY
|
|
63
|
-
origin = { x, y }
|
|
64
|
-
break
|
|
65
|
-
case bottomLeft:
|
|
66
|
-
scaleY = bottomScale
|
|
67
|
-
scaleX = leftScale
|
|
68
|
-
if (lockRatio) scaleX = scaleY
|
|
69
|
-
origin = { x: x + width, y }
|
|
70
|
-
break
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
if (around) {
|
|
74
|
-
if (typeof around === 'object') {
|
|
75
|
-
origin = { x: x + width / around.x, y: y + height / around.y }
|
|
76
|
-
} else {
|
|
77
|
-
origin = { x: x + width / 2, y: y + height / 2 }
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
reset(matrix)
|
|
82
|
-
scaleOfOuter(matrix, origin, scaleX, scaleY)
|
|
83
|
-
const bounds = { x: old.x + matrix.e, y: old.y + matrix.f, width: width * scaleX, height: height * scaleY }
|
|
84
|
-
return { bounds, old, origin, scaleX, scaleY, direction, lockRatio, around, }
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
package/src/tool/RectTool.ts
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { IUI, IUIInputData, IPointData } from '@leafer-ui/interface'
|
|
2
|
-
import { IEditor, IEditorResizeEvent, IEditorRotateEvent, IEditorTool } from '@leafer-in/interface'
|
|
3
|
-
|
|
4
|
-
import { Bounds, Matrix } from '@leafer-ui/core'
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export const RectTool: IEditorTool = {
|
|
8
|
-
|
|
9
|
-
name: 'RectTool',
|
|
10
|
-
|
|
11
|
-
getMirrorData(editor: IEditor): IPointData {
|
|
12
|
-
const { scaleX, scaleY } = editor.target
|
|
13
|
-
return {
|
|
14
|
-
x: scaleX < 0 ? 1 : 0, // 1 = mirrorX
|
|
15
|
-
y: scaleY < 0 ? 1 : 0
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
resize(e: IEditorResizeEvent): void {
|
|
20
|
-
const { target, bounds, resizeType, old } = e
|
|
21
|
-
const { x, y, width, height } = bounds
|
|
22
|
-
const point = { x: x - old.x, y: y - old.y }
|
|
23
|
-
|
|
24
|
-
target.innerToWorld(point, null, true, target.parent)
|
|
25
|
-
target.x += point.x
|
|
26
|
-
target.y += point.y
|
|
27
|
-
|
|
28
|
-
if (resizeType === 'scale') {
|
|
29
|
-
target.scaleX *= width / old.width
|
|
30
|
-
target.scaleY *= height / old.height
|
|
31
|
-
} else {
|
|
32
|
-
if (width < 0) {
|
|
33
|
-
target.width = -width
|
|
34
|
-
target.scaleX *= -1
|
|
35
|
-
} else {
|
|
36
|
-
if (target.width !== width) target.width = width
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
if (height < 0) {
|
|
40
|
-
target.height = -height
|
|
41
|
-
target.scaleY *= -1
|
|
42
|
-
} else {
|
|
43
|
-
if (target.height !== height) target.height = height // Text auto height
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
rotate(e: IEditorRotateEvent): void {
|
|
51
|
-
const { target, rotation, origin } = e
|
|
52
|
-
target.rotateOf(origin, rotation)
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
update(editor: IEditor) {
|
|
56
|
-
const { target, config, rotatePoints, targetRect, rect, circle, resizeLines, resizePoints } = editor
|
|
57
|
-
const { type, resizeable, rotateable, stroke, pointFill, pointSize, pointRadius } = config
|
|
58
|
-
|
|
59
|
-
const defaultStyle = { fill: pointFill, stroke, width: pointSize, height: pointSize, cornerRadius: pointRadius }
|
|
60
|
-
const pointStyles = config.point instanceof Array ? config.point : [config.point || defaultStyle]
|
|
61
|
-
|
|
62
|
-
const box = new Bounds(target.boxBounds)
|
|
63
|
-
const w = target.worldTransform, pw = editor.parent.worldTransform
|
|
64
|
-
|
|
65
|
-
const matrix = new Matrix(w)
|
|
66
|
-
matrix.divide(pw)
|
|
67
|
-
const worldX = matrix.e, worldY = matrix.f
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
let { scaleX, scaleY, rotation, skewX, skewY } = w
|
|
71
|
-
scaleX /= pw.scaleX, scaleY /= pw.scaleY, rotation -= pw.rotation, skewX -= pw.skewX, skewY -= pw.skewY
|
|
72
|
-
|
|
73
|
-
const { x, y, width, height } = box.scale(scaleX, scaleY) // maybe width / height < 0
|
|
74
|
-
|
|
75
|
-
editor.set({ x: worldX, y: worldY, rotation, skewX, skewY })
|
|
76
|
-
targetRect.set({ x, y, width: box.width / scaleX, height: box.height / scaleY, scaleX, scaleY, visible: true })
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
const points: IPointData[] = [ // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
|
|
80
|
-
{ x, y },
|
|
81
|
-
{ x: x + width / 2, y },
|
|
82
|
-
{ x: x + width, y },
|
|
83
|
-
{ x: x + width, y: y + height / 2 },
|
|
84
|
-
{ x: x + width, y: y + height },
|
|
85
|
-
{ x: x + width / 2, y: y + height },
|
|
86
|
-
{ x, y: y + height },
|
|
87
|
-
{ x, y: y + height / 2 }
|
|
88
|
-
]
|
|
89
|
-
|
|
90
|
-
const rectPoints: number[] = []
|
|
91
|
-
let point: IPointData, style: IUIInputData, rotateP: IUI, resizeP: IUI, resizeL: IUI
|
|
92
|
-
|
|
93
|
-
for (let i = 0; i < 8; i++) {
|
|
94
|
-
point = points[i]
|
|
95
|
-
style = pointStyles[i % pointStyles.length]
|
|
96
|
-
|
|
97
|
-
resizeP = resizePoints[i]
|
|
98
|
-
resizeL = resizeLines[Math.floor(i / 2)]
|
|
99
|
-
rotateP = rotatePoints[i]
|
|
100
|
-
|
|
101
|
-
resizeP.set(style)
|
|
102
|
-
resizeP.x = rotateP.x = resizeL.x = point.x
|
|
103
|
-
resizeP.y = rotateP.y = resizeL.y = point.y
|
|
104
|
-
|
|
105
|
-
resizeP.visible = resizeL.visible = resizeable || rotateable
|
|
106
|
-
rotateP.visible = rotateable && resizeable
|
|
107
|
-
|
|
108
|
-
if (i % 2) { // top, right, bottom, left
|
|
109
|
-
if (((i + 1) / 2) % 2) { // top, bottom
|
|
110
|
-
resizeL.width = Math.abs(width)
|
|
111
|
-
rotateP.width = Math.max(10, Math.abs(width) - 30) // skew
|
|
112
|
-
} else {
|
|
113
|
-
resizeL.height = Math.abs(height)
|
|
114
|
-
rotateP.height = Math.max(10, Math.abs(height) - 30) // skew
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
resizeP.rotation = 90
|
|
118
|
-
resizeP.visible = type === 'mobile'
|
|
119
|
-
|
|
120
|
-
} else {
|
|
121
|
-
rectPoints.push(point.x, point.y)
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
style = config.rotatePoint || style
|
|
128
|
-
|
|
129
|
-
circle.set(style)
|
|
130
|
-
circle.x = x + width / 2
|
|
131
|
-
if (!style.y) circle.y = y - (10 + (resizeP.height + circle.height) / 2) * (this.getMirrorData(editor).y ? -1 : 1)
|
|
132
|
-
circle.visible = rotateable && type === 'mobile'
|
|
133
|
-
|
|
134
|
-
rect.set(config.rect || { stroke })
|
|
135
|
-
rect.points = rectPoints
|
|
136
|
-
rect.visible = true
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
}
|