@leafer/layout 1.0.0-rc.2 → 1.0.0-rc.20
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/package.json +6 -5
- package/src/LeafLayout.ts +184 -73
- package/types/index.d.ts +32 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer/layout",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.20",
|
|
4
4
|
"description": "@leafer/layout",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,17 +15,18 @@
|
|
|
15
15
|
"type": "git",
|
|
16
16
|
"url": "https://github.com/leaferjs/leafer.git"
|
|
17
17
|
},
|
|
18
|
-
"homepage": "https://github.com/leaferjs/leafer/tree/main/packages/layout",
|
|
18
|
+
"homepage": "https://github.com/leaferjs/leafer/tree/main/packages/display-module/layout",
|
|
19
19
|
"bugs": "https://github.com/leaferjs/leafer/issues",
|
|
20
20
|
"keywords": [
|
|
21
21
|
"leafer",
|
|
22
22
|
"leaferjs"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@leafer/math": "1.0.0-rc.
|
|
26
|
-
"@leafer/
|
|
25
|
+
"@leafer/math": "1.0.0-rc.20",
|
|
26
|
+
"@leafer/helper": "1.0.0-rc.20",
|
|
27
|
+
"@leafer/platform": "1.0.0-rc.20"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
29
|
-
"@leafer/interface": "1.0.0-rc.
|
|
30
|
+
"@leafer/interface": "1.0.0-rc.20"
|
|
30
31
|
}
|
|
31
32
|
}
|
package/src/LeafLayout.ts
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
import { ILeaf, ILeafLayout,
|
|
2
|
-
import { BoundsHelper } from '@leafer/math'
|
|
1
|
+
import { ILeaf, ILeafLayout, ILocationType, IBoundsType, IBoundsData, IMatrixData, ILayoutBoundsData, IPointData } from '@leafer/interface'
|
|
2
|
+
import { Bounds, BoundsHelper, MatrixHelper, PointHelper } from '@leafer/math'
|
|
3
|
+
import { LeafHelper } from '@leafer/helper'
|
|
3
4
|
import { Platform } from '@leafer/platform'
|
|
4
5
|
|
|
5
6
|
|
|
6
|
-
const {
|
|
7
|
+
const { getRelativeWorld } = LeafHelper
|
|
8
|
+
const { toOuterOf, getPoints, copy } = BoundsHelper
|
|
7
9
|
|
|
8
10
|
export class LeafLayout implements ILeafLayout {
|
|
9
11
|
|
|
10
12
|
public leaf: ILeaf
|
|
11
13
|
|
|
12
|
-
public
|
|
14
|
+
public proxyZoom: boolean
|
|
13
15
|
|
|
14
|
-
//
|
|
16
|
+
// inner
|
|
15
17
|
|
|
16
18
|
public boxBounds: IBoundsData
|
|
17
|
-
public strokeBounds: IBoundsData
|
|
18
|
-
public renderBounds: IBoundsData
|
|
19
|
+
public get strokeBounds(): IBoundsData { return this._strokeBounds || this.boxBounds }
|
|
20
|
+
public get renderBounds(): IBoundsData { return this._renderBounds || this.boxBounds }
|
|
21
|
+
|
|
22
|
+
public _strokeBounds: IBoundsData
|
|
23
|
+
public _renderBounds: IBoundsData
|
|
19
24
|
|
|
20
25
|
// auto layout
|
|
21
26
|
public marginBounds: IBoundsData
|
|
@@ -23,8 +28,11 @@ export class LeafLayout implements ILeafLayout {
|
|
|
23
28
|
|
|
24
29
|
// local
|
|
25
30
|
|
|
26
|
-
public localStrokeBounds: IBoundsData
|
|
27
|
-
public localRenderBounds: IBoundsData
|
|
31
|
+
public get localStrokeBounds(): IBoundsData { return this._localStrokeBounds || this }
|
|
32
|
+
public get localRenderBounds(): IBoundsData { return this._localRenderBounds || this }
|
|
33
|
+
|
|
34
|
+
protected _localStrokeBounds?: IBoundsData
|
|
35
|
+
protected _localRenderBounds?: IBoundsData
|
|
28
36
|
|
|
29
37
|
// world temp
|
|
30
38
|
protected _worldContentBounds: IBoundsData
|
|
@@ -33,9 +41,11 @@ export class LeafLayout implements ILeafLayout {
|
|
|
33
41
|
|
|
34
42
|
// state
|
|
35
43
|
|
|
44
|
+
public resized: boolean
|
|
45
|
+
public waitAutoLayout: boolean
|
|
46
|
+
|
|
36
47
|
// matrix changed
|
|
37
48
|
public matrixChanged: boolean
|
|
38
|
-
public positionChanged: boolean
|
|
39
49
|
public scaleChanged: boolean
|
|
40
50
|
public rotationChanged: boolean
|
|
41
51
|
|
|
@@ -66,84 +76,186 @@ export class LeafLayout implements ILeafLayout {
|
|
|
66
76
|
public strokeBoxSpread: number
|
|
67
77
|
public renderShapeSpread: number
|
|
68
78
|
|
|
79
|
+
// temp local
|
|
80
|
+
public get a() { return 1 }
|
|
81
|
+
public get b() { return 0 }
|
|
82
|
+
public get c() { return 0 }
|
|
83
|
+
public get d() { return 1 }
|
|
84
|
+
public get e() { return this.leaf.__.x }
|
|
85
|
+
public get f() { return this.leaf.__.y }
|
|
86
|
+
public get x() { return this.e + this.boxBounds.x }
|
|
87
|
+
public get y() { return this.f + this.boxBounds.y }
|
|
88
|
+
public get width() { return this.boxBounds.width }
|
|
89
|
+
public get height() { return this.boxBounds.height }
|
|
90
|
+
|
|
69
91
|
|
|
70
92
|
constructor(leaf: ILeaf) {
|
|
71
93
|
this.leaf = leaf
|
|
72
|
-
this.
|
|
73
|
-
this.
|
|
94
|
+
this.boxBounds = { x: 0, y: 0, width: 0, height: 0 }
|
|
95
|
+
if (this.leaf.__local) this._localRenderBounds = this._localStrokeBounds = this.leaf.__local
|
|
74
96
|
this.boxChange()
|
|
75
|
-
this.
|
|
97
|
+
this.matrixChange()
|
|
76
98
|
}
|
|
77
99
|
|
|
100
|
+
public createLocal(): void {
|
|
101
|
+
const local = this.leaf.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 }
|
|
102
|
+
if (!this._localStrokeBounds) this._localStrokeBounds = local
|
|
103
|
+
if (!this._localRenderBounds) this._localRenderBounds = local
|
|
104
|
+
}
|
|
78
105
|
|
|
79
|
-
public
|
|
106
|
+
public update(): void {
|
|
80
107
|
const { leafer } = this.leaf
|
|
81
108
|
if (leafer) {
|
|
82
109
|
if (leafer.ready) {
|
|
83
|
-
if (
|
|
110
|
+
if (leafer.watcher.changed) leafer.layouter.layout()
|
|
84
111
|
} else {
|
|
85
112
|
leafer.start()
|
|
86
113
|
}
|
|
87
114
|
} else {
|
|
88
115
|
let root = this.leaf
|
|
89
|
-
while (root.parent) { root = root.parent }
|
|
116
|
+
while (root.parent && !root.parent.leafer) { root = root.parent }
|
|
90
117
|
Platform.layout(root)
|
|
91
118
|
}
|
|
92
119
|
}
|
|
93
120
|
|
|
94
|
-
public getTransform(
|
|
95
|
-
this.
|
|
96
|
-
|
|
121
|
+
public getTransform(relative: ILocationType | ILeaf = 'world'): IMatrixData {
|
|
122
|
+
this.update()
|
|
123
|
+
const { leaf } = this
|
|
124
|
+
switch (relative) {
|
|
125
|
+
case 'world':
|
|
126
|
+
return leaf.__world
|
|
127
|
+
case 'local':
|
|
128
|
+
return leaf.__localMatrix
|
|
129
|
+
case 'inner':
|
|
130
|
+
return MatrixHelper.defaultMatrix
|
|
131
|
+
case 'page':
|
|
132
|
+
relative = leaf.zoomLayer
|
|
133
|
+
default:
|
|
134
|
+
return getRelativeWorld(leaf, relative)
|
|
135
|
+
}
|
|
97
136
|
}
|
|
98
137
|
|
|
99
|
-
public getBounds(type
|
|
100
|
-
|
|
101
|
-
|
|
138
|
+
public getBounds(type?: IBoundsType, relative: ILocationType | ILeaf = 'world'): IBoundsData {
|
|
139
|
+
this.update()
|
|
140
|
+
switch (relative) {
|
|
141
|
+
case 'world':
|
|
142
|
+
return this.getWorldBounds(type)
|
|
143
|
+
case 'local':
|
|
144
|
+
return this.getLocalBounds(type)
|
|
145
|
+
case 'inner':
|
|
146
|
+
return this.getInnerBounds(type)
|
|
147
|
+
case 'page':
|
|
148
|
+
relative = this.leaf.zoomLayer
|
|
149
|
+
default:
|
|
150
|
+
return new Bounds(this.getInnerBounds(type)).toOuterOf(this.getTransform(relative))
|
|
151
|
+
}
|
|
152
|
+
}
|
|
102
153
|
|
|
103
|
-
|
|
154
|
+
public getInnerBounds(type: IBoundsType = 'box'): IBoundsData {
|
|
155
|
+
switch (type) {
|
|
156
|
+
case 'render':
|
|
157
|
+
return this.renderBounds
|
|
158
|
+
case 'content':
|
|
159
|
+
if (this.contentBounds) return this.contentBounds
|
|
160
|
+
case 'margin':
|
|
161
|
+
case 'box':
|
|
162
|
+
return this.boxBounds
|
|
163
|
+
case 'stroke':
|
|
164
|
+
return this.strokeBounds
|
|
165
|
+
}
|
|
166
|
+
}
|
|
104
167
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
168
|
+
public getLocalBounds(type: IBoundsType = 'box'): IBoundsData {
|
|
169
|
+
switch (type) {
|
|
170
|
+
case 'render':
|
|
171
|
+
return this.localRenderBounds
|
|
172
|
+
case 'stroke':
|
|
173
|
+
return this.localStrokeBounds
|
|
174
|
+
case 'margin':
|
|
175
|
+
case 'content':
|
|
176
|
+
case 'box':
|
|
177
|
+
return this.leaf.__localBoxBounds
|
|
178
|
+
}
|
|
179
|
+
}
|
|
117
180
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
181
|
+
public getWorldBounds(type: IBoundsType = 'box'): IBoundsData {
|
|
182
|
+
switch (type) {
|
|
183
|
+
case 'render':
|
|
184
|
+
return this.leaf.__world
|
|
185
|
+
case 'content':
|
|
186
|
+
if (this.contentBounds) return this.getWorldContentBounds()
|
|
187
|
+
case 'margin':
|
|
188
|
+
case 'box':
|
|
189
|
+
return this.getWorldBoxBounds()
|
|
190
|
+
case 'margin':
|
|
191
|
+
case 'stroke':
|
|
192
|
+
return this.getWorldStrokeBounds()
|
|
193
|
+
}
|
|
194
|
+
}
|
|
131
195
|
|
|
132
|
-
|
|
196
|
+
public getLayoutBounds(type?: IBoundsType, relative: ILocationType | ILeaf = 'world', unscale?: boolean): ILayoutBoundsData {
|
|
197
|
+
const { leaf } = this
|
|
198
|
+
let point: IPointData, matrix: IMatrixData, bounds: IBoundsData = this.getInnerBounds(type)
|
|
199
|
+
|
|
200
|
+
switch (relative) {
|
|
201
|
+
case 'world':
|
|
202
|
+
point = leaf.getWorldPoint(bounds)
|
|
203
|
+
matrix = leaf.__world
|
|
204
|
+
break
|
|
205
|
+
case 'local':
|
|
206
|
+
point = leaf.getLocalPointByInner(bounds)
|
|
207
|
+
matrix = leaf.__localMatrix
|
|
208
|
+
break
|
|
209
|
+
case 'inner':
|
|
210
|
+
point = bounds
|
|
211
|
+
matrix = MatrixHelper.defaultMatrix
|
|
212
|
+
break
|
|
213
|
+
case 'page':
|
|
214
|
+
relative = leaf.zoomLayer
|
|
215
|
+
default:
|
|
216
|
+
point = leaf.getWorldPoint(bounds, relative)
|
|
217
|
+
matrix = getRelativeWorld(leaf, relative, true)
|
|
218
|
+
}
|
|
133
219
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
220
|
+
const layoutBounds = MatrixHelper.getLayout(matrix) as ILayoutBoundsData
|
|
221
|
+
copy(layoutBounds, bounds)
|
|
222
|
+
PointHelper.copy(layoutBounds, point)
|
|
223
|
+
|
|
224
|
+
if (unscale) {
|
|
225
|
+
const { scaleX, scaleY } = layoutBounds
|
|
226
|
+
const uScaleX = Math.abs(scaleX)
|
|
227
|
+
const uScaleY = Math.abs(scaleY)
|
|
228
|
+
if (uScaleX !== 1 || uScaleY !== 1) {
|
|
229
|
+
layoutBounds.scaleX /= uScaleX
|
|
230
|
+
layoutBounds.scaleY /= uScaleY
|
|
231
|
+
layoutBounds.width *= uScaleX
|
|
232
|
+
layoutBounds.height *= uScaleY
|
|
143
233
|
}
|
|
144
|
-
|
|
145
234
|
}
|
|
146
235
|
|
|
236
|
+
return layoutBounds
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
public getLayoutPoints(type?: IBoundsType, relative: ILocationType | ILeaf = 'world'): IPointData[] {
|
|
240
|
+
const { leaf } = this
|
|
241
|
+
const points = getPoints(this.getInnerBounds(type))
|
|
242
|
+
let relativeLeaf: ILeaf
|
|
243
|
+
switch (relative) {
|
|
244
|
+
case 'world':
|
|
245
|
+
relativeLeaf = null
|
|
246
|
+
break
|
|
247
|
+
case 'local':
|
|
248
|
+
relativeLeaf = leaf.parent
|
|
249
|
+
break
|
|
250
|
+
case 'inner':
|
|
251
|
+
break
|
|
252
|
+
case 'page':
|
|
253
|
+
relative = leaf.zoomLayer
|
|
254
|
+
default:
|
|
255
|
+
relativeLeaf = relative
|
|
256
|
+
}
|
|
257
|
+
if (relativeLeaf !== undefined) points.forEach(point => leaf.innerToWorld(point, null, false, relativeLeaf))
|
|
258
|
+
return points
|
|
147
259
|
}
|
|
148
260
|
|
|
149
261
|
protected getWorldContentBounds(): IBoundsData {
|
|
@@ -168,25 +280,25 @@ export class LeafLayout implements ILeafLayout {
|
|
|
168
280
|
|
|
169
281
|
public spreadStrokeCancel(): void {
|
|
170
282
|
const same = this.renderBounds === this.strokeBounds
|
|
171
|
-
this.
|
|
172
|
-
this.
|
|
283
|
+
this._strokeBounds = this.boxBounds
|
|
284
|
+
this._localStrokeBounds = this.leaf.__localBoxBounds
|
|
173
285
|
if (same) this.spreadRenderCancel()
|
|
174
286
|
}
|
|
175
287
|
public spreadRenderCancel(): void {
|
|
176
|
-
this.
|
|
177
|
-
this.
|
|
288
|
+
this._renderBounds = this._strokeBounds
|
|
289
|
+
this._localRenderBounds = this._localStrokeBounds
|
|
178
290
|
}
|
|
179
291
|
|
|
180
292
|
public spreadStroke(): void {
|
|
181
293
|
const { x, y, width, height } = this.strokeBounds
|
|
182
|
-
this.
|
|
183
|
-
this.
|
|
294
|
+
this._strokeBounds = { x, y, width, height }
|
|
295
|
+
this._localStrokeBounds = { x, y, width, height }
|
|
184
296
|
if (!this.renderSpread) this.spreadRenderCancel()
|
|
185
297
|
}
|
|
186
298
|
public spreadRender(): void {
|
|
187
299
|
const { x, y, width, height } = this.renderBounds
|
|
188
|
-
this.
|
|
189
|
-
this.
|
|
300
|
+
this._renderBounds = { x, y, width, height }
|
|
301
|
+
this._localRenderBounds = { x, y, width, height }
|
|
190
302
|
}
|
|
191
303
|
|
|
192
304
|
|
|
@@ -219,12 +331,6 @@ export class LeafLayout implements ILeafLayout {
|
|
|
219
331
|
|
|
220
332
|
// matrix
|
|
221
333
|
|
|
222
|
-
public positionChange(): void {
|
|
223
|
-
this.positionChanged = true
|
|
224
|
-
this.matrixChanged = true
|
|
225
|
-
this.localBoxChanged || this.localBoxChange()
|
|
226
|
-
}
|
|
227
|
-
|
|
228
334
|
public scaleChange(): void {
|
|
229
335
|
this.scaleChanged = true
|
|
230
336
|
this._scaleOrRotationChange()
|
|
@@ -238,6 +344,11 @@ export class LeafLayout implements ILeafLayout {
|
|
|
238
344
|
|
|
239
345
|
protected _scaleOrRotationChange() {
|
|
240
346
|
this.affectScaleOrRotation = true
|
|
347
|
+
this.matrixChange()
|
|
348
|
+
if (!this.leaf.__local) this.createLocal()
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
public matrixChange(): void {
|
|
241
352
|
this.matrixChanged = true
|
|
242
353
|
this.localBoxChanged || this.localBoxChange()
|
|
243
354
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,20 +1,25 @@
|
|
|
1
|
-
import { ILeafLayout, ILeaf, IBoundsData,
|
|
1
|
+
import { ILeafLayout, ILeaf, IBoundsData, ILocationType, IMatrixData, IBoundsType, ILayoutBoundsData, IPointData } from '@leafer/interface';
|
|
2
2
|
|
|
3
3
|
declare class LeafLayout implements ILeafLayout {
|
|
4
4
|
leaf: ILeaf;
|
|
5
|
-
|
|
5
|
+
proxyZoom: boolean;
|
|
6
6
|
boxBounds: IBoundsData;
|
|
7
|
-
strokeBounds: IBoundsData;
|
|
8
|
-
renderBounds: IBoundsData;
|
|
7
|
+
get strokeBounds(): IBoundsData;
|
|
8
|
+
get renderBounds(): IBoundsData;
|
|
9
|
+
_strokeBounds: IBoundsData;
|
|
10
|
+
_renderBounds: IBoundsData;
|
|
9
11
|
marginBounds: IBoundsData;
|
|
10
12
|
contentBounds: IBoundsData;
|
|
11
|
-
localStrokeBounds: IBoundsData;
|
|
12
|
-
localRenderBounds: IBoundsData;
|
|
13
|
+
get localStrokeBounds(): IBoundsData;
|
|
14
|
+
get localRenderBounds(): IBoundsData;
|
|
15
|
+
protected _localStrokeBounds?: IBoundsData;
|
|
16
|
+
protected _localRenderBounds?: IBoundsData;
|
|
13
17
|
protected _worldContentBounds: IBoundsData;
|
|
14
18
|
protected _worldBoxBounds: IBoundsData;
|
|
15
19
|
protected _worldStrokeBounds: IBoundsData;
|
|
20
|
+
resized: boolean;
|
|
21
|
+
waitAutoLayout: boolean;
|
|
16
22
|
matrixChanged: boolean;
|
|
17
|
-
positionChanged: boolean;
|
|
18
23
|
scaleChanged: boolean;
|
|
19
24
|
rotationChanged: boolean;
|
|
20
25
|
boundsChanged: boolean;
|
|
@@ -33,10 +38,26 @@ declare class LeafLayout implements ILeafLayout {
|
|
|
33
38
|
renderSpread: number;
|
|
34
39
|
strokeBoxSpread: number;
|
|
35
40
|
renderShapeSpread: number;
|
|
41
|
+
get a(): number;
|
|
42
|
+
get b(): number;
|
|
43
|
+
get c(): number;
|
|
44
|
+
get d(): number;
|
|
45
|
+
get e(): number;
|
|
46
|
+
get f(): number;
|
|
47
|
+
get x(): number;
|
|
48
|
+
get y(): number;
|
|
49
|
+
get width(): number;
|
|
50
|
+
get height(): number;
|
|
36
51
|
constructor(leaf: ILeaf);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
52
|
+
createLocal(): void;
|
|
53
|
+
update(): void;
|
|
54
|
+
getTransform(relative?: ILocationType | ILeaf): IMatrixData;
|
|
55
|
+
getBounds(type?: IBoundsType, relative?: ILocationType | ILeaf): IBoundsData;
|
|
56
|
+
getInnerBounds(type?: IBoundsType): IBoundsData;
|
|
57
|
+
getLocalBounds(type?: IBoundsType): IBoundsData;
|
|
58
|
+
getWorldBounds(type?: IBoundsType): IBoundsData;
|
|
59
|
+
getLayoutBounds(type?: IBoundsType, relative?: ILocationType | ILeaf, unscale?: boolean): ILayoutBoundsData;
|
|
60
|
+
getLayoutPoints(type?: IBoundsType, relative?: ILocationType | ILeaf): IPointData[];
|
|
40
61
|
protected getWorldContentBounds(): IBoundsData;
|
|
41
62
|
protected getWorldBoxBounds(): IBoundsData;
|
|
42
63
|
protected getWorldStrokeBounds(): IBoundsData;
|
|
@@ -48,10 +69,10 @@ declare class LeafLayout implements ILeafLayout {
|
|
|
48
69
|
localBoxChange(): void;
|
|
49
70
|
strokeChange(): void;
|
|
50
71
|
renderChange(): void;
|
|
51
|
-
positionChange(): void;
|
|
52
72
|
scaleChange(): void;
|
|
53
73
|
rotationChange(): void;
|
|
54
74
|
protected _scaleOrRotationChange(): void;
|
|
75
|
+
matrixChange(): void;
|
|
55
76
|
surfaceChange(): void;
|
|
56
77
|
opacityChange(): void;
|
|
57
78
|
childrenSortChange(): void;
|