modern-canvas 0.7.14 → 0.8.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.
- package/dist/index.cjs +200 -111
- package/dist/index.d.cts +91 -20
- package/dist/index.d.mts +91 -20
- package/dist/index.d.ts +91 -20
- package/dist/index.js +52 -45
- package/dist/index.mjs +187 -109
- package/package.json +19 -15
package/dist/index.cjs
CHANGED
|
@@ -5,7 +5,6 @@ const colord = require('colord');
|
|
|
5
5
|
const namesPlugin = require('colord/plugins/names');
|
|
6
6
|
const modernPath2d = require('modern-path2d');
|
|
7
7
|
const modernText = require('modern-text');
|
|
8
|
-
const load = require('yoga-layout/load');
|
|
9
8
|
|
|
10
9
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
11
10
|
|
|
@@ -1746,7 +1745,7 @@ class Matrix3 extends Matrix {
|
|
|
1746
1745
|
constructor(array) {
|
|
1747
1746
|
super(3, 3, array);
|
|
1748
1747
|
}
|
|
1749
|
-
|
|
1748
|
+
affineInvert() {
|
|
1750
1749
|
const [
|
|
1751
1750
|
n11,
|
|
1752
1751
|
n21,
|
|
@@ -2198,10 +2197,10 @@ class Transform2D extends Matrix3 {
|
|
|
2198
2197
|
newPos.y = b * x + d * y + ty;
|
|
2199
2198
|
return newPos;
|
|
2200
2199
|
}
|
|
2201
|
-
|
|
2202
|
-
return this.clone().
|
|
2200
|
+
affineInverse() {
|
|
2201
|
+
return this.clone().affineInvert();
|
|
2203
2202
|
}
|
|
2204
|
-
|
|
2203
|
+
applyAffineInverse(pos, newPos) {
|
|
2205
2204
|
newPos = newPos || new Vector2();
|
|
2206
2205
|
const { a, b, c, d, tx, ty } = this.toObject();
|
|
2207
2206
|
const id = 1 / (a * d + c * -b);
|
|
@@ -2580,8 +2579,10 @@ attribute vec4 aBackgroundColor;
|
|
|
2580
2579
|
attribute vec4 aDisableWrapMode;
|
|
2581
2580
|
|
|
2582
2581
|
uniform mat3 projectionMatrix;
|
|
2583
|
-
uniform mat3
|
|
2582
|
+
uniform mat3 viewMatrix;
|
|
2584
2583
|
uniform vec4 modulate;
|
|
2584
|
+
uniform float canvasWidth;
|
|
2585
|
+
uniform float canvasHeight;
|
|
2585
2586
|
|
|
2586
2587
|
varying float vTextureId;
|
|
2587
2588
|
varying vec2 vUv;
|
|
@@ -2589,6 +2590,10 @@ varying vec4 vModulate;
|
|
|
2589
2590
|
varying vec4 vBackgroundColor;
|
|
2590
2591
|
varying vec4 vDisableWrapMode;
|
|
2591
2592
|
|
|
2593
|
+
vec2 roundPixels(vec2 position, vec2 targetSize) {
|
|
2594
|
+
return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
|
|
2595
|
+
}
|
|
2596
|
+
|
|
2592
2597
|
void main(void) {
|
|
2593
2598
|
mat3 modelMatrix = mat3(
|
|
2594
2599
|
1.0, 0.0, 0.0,
|
|
@@ -2596,8 +2601,9 @@ void main(void) {
|
|
|
2596
2601
|
0.0, 0.0, 1.0
|
|
2597
2602
|
);
|
|
2598
2603
|
vTextureId = aTextureId;
|
|
2599
|
-
|
|
2600
|
-
gl_Position = vec4((
|
|
2604
|
+
vec3 pos = projectionMatrix * viewMatrix * modelMatrix * vec3(aPosition, 1.0);
|
|
2605
|
+
gl_Position = vec4(roundPixels(pos.xy, vec2(canvasWidth, canvasHeight)), 0.0, 1.0);
|
|
2606
|
+
|
|
2601
2607
|
vUv = aUv;
|
|
2602
2608
|
vModulate = aModulate * modulate;
|
|
2603
2609
|
vBackgroundColor = aBackgroundColor;
|
|
@@ -2682,6 +2688,8 @@ void main(void) {
|
|
|
2682
2688
|
renderer2.program.updateUniforms(program, {
|
|
2683
2689
|
samplers,
|
|
2684
2690
|
modulate: [1, 1, 1, 1],
|
|
2691
|
+
canvasWidth: renderer2.gl.drawingBufferWidth,
|
|
2692
|
+
canvasHeight: renderer2.gl.drawingBufferHeight,
|
|
2685
2693
|
...renderer2.program.uniforms
|
|
2686
2694
|
});
|
|
2687
2695
|
renderer2.vertexArray.bind(vao ?? vertexArray);
|
|
@@ -3327,7 +3335,7 @@ class WebGLProgramModule extends WebGLModule {
|
|
|
3327
3335
|
boundProgram = null;
|
|
3328
3336
|
uniforms = {
|
|
3329
3337
|
projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
|
|
3330
|
-
|
|
3338
|
+
viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
|
|
3331
3339
|
};
|
|
3332
3340
|
create(options) {
|
|
3333
3341
|
const program = this.gl.createProgram();
|
|
@@ -3531,7 +3539,7 @@ ${gl.getShaderInfoLog(shader)}`);
|
|
|
3531
3539
|
this.boundProgram = null;
|
|
3532
3540
|
this.uniforms = {
|
|
3533
3541
|
projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
|
|
3534
|
-
|
|
3542
|
+
viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
|
|
3535
3543
|
};
|
|
3536
3544
|
}
|
|
3537
3545
|
free() {
|
|
@@ -3625,8 +3633,8 @@ class WebGLScissorModule extends WebGLModule {
|
|
|
3625
3633
|
use() {
|
|
3626
3634
|
const renderer = this._renderer;
|
|
3627
3635
|
const { pixelRatio, mask, viewport, screen, gl, program } = renderer;
|
|
3628
|
-
const {
|
|
3629
|
-
const rect = transformRectToAABB(
|
|
3636
|
+
const { viewMatrix } = program.uniforms;
|
|
3637
|
+
const rect = transformRectToAABB(viewMatrix, mask.last.mask);
|
|
3630
3638
|
const { x, y, width, height } = rect;
|
|
3631
3639
|
let scissorY;
|
|
3632
3640
|
if (viewport.boundViewport) {
|
|
@@ -6565,7 +6573,7 @@ exports.Viewport = class Viewport extends exports.Node {
|
|
|
6565
6573
|
this.projection.flipY(flipY);
|
|
6566
6574
|
}
|
|
6567
6575
|
projection = new Projection2D();
|
|
6568
|
-
|
|
6576
|
+
canvasTransform = new Transform2D();
|
|
6569
6577
|
_framebufferIndex = 0;
|
|
6570
6578
|
_framebuffers = [
|
|
6571
6579
|
{ texture: new ViewportTexture(), needsUpload: false },
|
|
@@ -6680,7 +6688,7 @@ exports.Viewport = class Viewport extends exports.Node {
|
|
|
6680
6688
|
render(renderer, next) {
|
|
6681
6689
|
const oldViewport = this._tree?.getCurrentViewport();
|
|
6682
6690
|
renderer.program.uniforms.projectionMatrix = this.projection.toArray(true);
|
|
6683
|
-
renderer.program.uniforms.
|
|
6691
|
+
renderer.program.uniforms.viewMatrix = this.canvasTransform.toArray(true);
|
|
6684
6692
|
this.activate(renderer);
|
|
6685
6693
|
renderer.clear();
|
|
6686
6694
|
super.render(renderer, next);
|
|
@@ -6695,11 +6703,11 @@ exports.Viewport = class Viewport extends exports.Node {
|
|
|
6695
6703
|
getRect() {
|
|
6696
6704
|
return new Rect2(this.x, this.y, this.width, this.height);
|
|
6697
6705
|
}
|
|
6698
|
-
|
|
6699
|
-
return this.
|
|
6706
|
+
toCanvasGlobal(screenPos, newPos) {
|
|
6707
|
+
return this.canvasTransform.applyAffineInverse(screenPos, newPos);
|
|
6700
6708
|
}
|
|
6701
|
-
|
|
6702
|
-
return this.
|
|
6709
|
+
toCanvasScreen(globalPos, newPos) {
|
|
6710
|
+
return this.canvasTransform.apply(globalPos, newPos);
|
|
6703
6711
|
}
|
|
6704
6712
|
};
|
|
6705
6713
|
__decorateClass$P([
|
|
@@ -7237,35 +7245,28 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
|
|
|
7237
7245
|
getTransformOrigin() {
|
|
7238
7246
|
return new Vector2(0, 0);
|
|
7239
7247
|
}
|
|
7240
|
-
|
|
7248
|
+
updateTransform(cb) {
|
|
7241
7249
|
const origin = this.getTransformOrigin();
|
|
7242
|
-
const transform =
|
|
7243
|
-
transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
|
|
7250
|
+
const transform = this.transform.identity().translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
|
|
7244
7251
|
cb?.(transform);
|
|
7245
7252
|
transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
|
|
7246
|
-
return transform;
|
|
7247
|
-
}
|
|
7248
|
-
updateTransform() {
|
|
7249
|
-
this.transform.copy(this.getTransform());
|
|
7250
7253
|
}
|
|
7251
7254
|
updateGlobalTransform() {
|
|
7252
7255
|
this.updateTransform();
|
|
7253
7256
|
const parent = this.getParent();
|
|
7254
7257
|
if (parent?.globalTransform) {
|
|
7255
|
-
|
|
7256
|
-
|
|
7257
|
-
|
|
7258
|
-
|
|
7259
|
-
|
|
7260
|
-
|
|
7261
|
-
|
|
7262
|
-
|
|
7263
|
-
);
|
|
7264
|
-
this.
|
|
7265
|
-
|
|
7266
|
-
|
|
7267
|
-
);
|
|
7268
|
-
this.globalRotation = parent.globalRotation + this.rotation;
|
|
7258
|
+
const {
|
|
7259
|
+
globalPosition,
|
|
7260
|
+
globalScale,
|
|
7261
|
+
globalSkew,
|
|
7262
|
+
globalTransform,
|
|
7263
|
+
globalRotation
|
|
7264
|
+
} = parent;
|
|
7265
|
+
this._parentTransformDirtyId = globalTransform.dirtyId;
|
|
7266
|
+
this.globalPosition.set(globalPosition.x + this.position.x, globalPosition.y + this.position.y);
|
|
7267
|
+
this.globalScale.set(globalScale.x * this.scale.x, globalScale.y * this.scale.y);
|
|
7268
|
+
this.globalSkew.set(globalSkew.x * this.skew.x, globalSkew.y * this.skew.y);
|
|
7269
|
+
this.globalRotation = globalRotation + this.rotation;
|
|
7269
7270
|
parent.globalTransform.multiply(this.transform, this.globalTransform);
|
|
7270
7271
|
} else {
|
|
7271
7272
|
this.globalPosition.copy(this.position);
|
|
@@ -7314,7 +7315,7 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
|
|
|
7314
7315
|
}
|
|
7315
7316
|
}
|
|
7316
7317
|
toLocal(globalPos, newPos) {
|
|
7317
|
-
return this.globalTransform.
|
|
7318
|
+
return this.globalTransform.applyAffineInverse(globalPos, newPos);
|
|
7318
7319
|
}
|
|
7319
7320
|
toGlobal(localPos, newPos) {
|
|
7320
7321
|
return this.globalTransform.apply(localPos, newPos);
|
|
@@ -7341,7 +7342,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
|
|
|
7341
7342
|
return result;
|
|
7342
7343
|
};
|
|
7343
7344
|
exports.Camera2D = class Camera2D extends exports.Node2D {
|
|
7344
|
-
zoom = new Vector2(1, 1).on("update", () => this.
|
|
7345
|
+
zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
|
|
7345
7346
|
maxZoom = new Vector2(6, 6);
|
|
7346
7347
|
minZoom = new Vector2(0.1, 0.1);
|
|
7347
7348
|
_screenOffset = { x: 0, y: 0 };
|
|
@@ -7428,14 +7429,26 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
|
|
|
7428
7429
|
}
|
|
7429
7430
|
updateTransform() {
|
|
7430
7431
|
super.updateTransform();
|
|
7431
|
-
this.
|
|
7432
|
+
this.updateCanvasTransform();
|
|
7432
7433
|
}
|
|
7433
|
-
|
|
7434
|
+
updateCanvasTransform() {
|
|
7434
7435
|
const viewport = this.getViewport();
|
|
7435
7436
|
if (!viewport)
|
|
7436
7437
|
return;
|
|
7437
|
-
viewport.
|
|
7438
|
-
this.emit("
|
|
7438
|
+
viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
|
|
7439
|
+
this.emit("updateCanvasTransform");
|
|
7440
|
+
}
|
|
7441
|
+
toGlobal(screenPos, newPos) {
|
|
7442
|
+
const viewport = this.getViewport();
|
|
7443
|
+
if (!viewport)
|
|
7444
|
+
throw new Error("Failed to toGlobal, viewport is empty");
|
|
7445
|
+
return viewport.toCanvasGlobal(screenPos, newPos);
|
|
7446
|
+
}
|
|
7447
|
+
toScreen(globalPos, newPos) {
|
|
7448
|
+
const viewport = this.getViewport();
|
|
7449
|
+
if (!viewport)
|
|
7450
|
+
throw new Error("Failed to toScreen, viewport is empty");
|
|
7451
|
+
return viewport.toCanvasScreen(globalPos, newPos);
|
|
7439
7452
|
}
|
|
7440
7453
|
};
|
|
7441
7454
|
__decorateClass$I([
|
|
@@ -10038,9 +10051,9 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
|
|
|
10038
10051
|
const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
|
|
10039
10052
|
return new Vector2(originX * width, originY * height);
|
|
10040
10053
|
}
|
|
10041
|
-
|
|
10054
|
+
updateTransform(cb) {
|
|
10042
10055
|
const { width, height } = this.size;
|
|
10043
|
-
|
|
10056
|
+
super.updateTransform((transform) => {
|
|
10044
10057
|
parseCSSTransform(this.style.transform ?? "", width, height, transform);
|
|
10045
10058
|
cb?.(transform);
|
|
10046
10059
|
});
|
|
@@ -10229,7 +10242,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
|
|
|
10229
10242
|
const pos = new Vector2(screenX, screenY);
|
|
10230
10243
|
const viewport = this.getViewport();
|
|
10231
10244
|
if (viewport) {
|
|
10232
|
-
viewport.
|
|
10245
|
+
viewport.toCanvasGlobal(pos, pos);
|
|
10233
10246
|
}
|
|
10234
10247
|
this.toLocal(pos, pos);
|
|
10235
10248
|
if (this._positionInput(pos, key)) {
|
|
@@ -10345,59 +10358,123 @@ exports.Element2D = __decorateClass$k([
|
|
|
10345
10358
|
customNode("Element2D")
|
|
10346
10359
|
], exports.Element2D);
|
|
10347
10360
|
|
|
10361
|
+
const edgeMap = {
|
|
10362
|
+
left: 0,
|
|
10363
|
+
// Edge.Left
|
|
10364
|
+
top: 1,
|
|
10365
|
+
// Edge.Top
|
|
10366
|
+
right: 2,
|
|
10367
|
+
// Edge.Right
|
|
10368
|
+
bottom: 3,
|
|
10369
|
+
// Edge.Bottom
|
|
10370
|
+
start: 4,
|
|
10371
|
+
// Edge.Start
|
|
10372
|
+
end: 5,
|
|
10373
|
+
// Edge.End
|
|
10374
|
+
horizontal: 6,
|
|
10375
|
+
// Edge.Horizontal
|
|
10376
|
+
vertical: 7,
|
|
10377
|
+
// Edge.Vertical
|
|
10378
|
+
all: 8
|
|
10379
|
+
// Edge.All
|
|
10380
|
+
};
|
|
10381
|
+
const gutterMap = {
|
|
10382
|
+
column: 0,
|
|
10383
|
+
// Gutter.Column
|
|
10384
|
+
row: 1,
|
|
10385
|
+
// Gutter.Row
|
|
10386
|
+
all: 2
|
|
10387
|
+
// Gutter.All
|
|
10388
|
+
};
|
|
10348
10389
|
const alignMap = {
|
|
10349
|
-
"auto":
|
|
10350
|
-
|
|
10351
|
-
"
|
|
10352
|
-
|
|
10353
|
-
"
|
|
10354
|
-
|
|
10355
|
-
"
|
|
10356
|
-
|
|
10357
|
-
"
|
|
10390
|
+
"auto": 0,
|
|
10391
|
+
// Align.Auto
|
|
10392
|
+
"flex-start": 1,
|
|
10393
|
+
// Align.FlexStart
|
|
10394
|
+
"center": 2,
|
|
10395
|
+
// Align.Center
|
|
10396
|
+
"flex-end": 3,
|
|
10397
|
+
// Align.FlexEnd
|
|
10398
|
+
"stretch": 4,
|
|
10399
|
+
// Align.Stretch
|
|
10400
|
+
"baseline": 5,
|
|
10401
|
+
// Align.Baseline
|
|
10402
|
+
"space-between": 6,
|
|
10403
|
+
// Align.SpaceBetween
|
|
10404
|
+
"space-around": 7,
|
|
10405
|
+
// Align.SpaceAround
|
|
10406
|
+
"space-evenly": 8
|
|
10407
|
+
// Align.SpaceEvenly
|
|
10358
10408
|
};
|
|
10359
10409
|
const displayMap = {
|
|
10360
|
-
|
|
10361
|
-
|
|
10362
|
-
|
|
10410
|
+
flex: 0,
|
|
10411
|
+
// Display.Flex
|
|
10412
|
+
none: 1,
|
|
10413
|
+
// Display.None
|
|
10414
|
+
contents: 2
|
|
10415
|
+
// Display.Contents
|
|
10363
10416
|
};
|
|
10364
10417
|
const directionMap = {
|
|
10365
|
-
inherit:
|
|
10366
|
-
|
|
10367
|
-
|
|
10418
|
+
inherit: 0,
|
|
10419
|
+
// Direction.Inherit
|
|
10420
|
+
ltr: 1,
|
|
10421
|
+
// Direction.LTR
|
|
10422
|
+
rtl: 2
|
|
10423
|
+
// Direction.RTL
|
|
10368
10424
|
};
|
|
10369
10425
|
const flexDirectionMap = {
|
|
10370
|
-
"column":
|
|
10371
|
-
|
|
10372
|
-
"
|
|
10373
|
-
|
|
10426
|
+
"column": 0,
|
|
10427
|
+
// FlexDirection.Column
|
|
10428
|
+
"column-reverse": 1,
|
|
10429
|
+
// FlexDirection.ColumnReverse
|
|
10430
|
+
"row": 2,
|
|
10431
|
+
// FlexDirection.Row
|
|
10432
|
+
"row-reverse": 3
|
|
10433
|
+
// FlexDirection.RowReverse
|
|
10374
10434
|
};
|
|
10375
10435
|
const flexWrapMap = {
|
|
10376
|
-
"no-wrap":
|
|
10377
|
-
|
|
10378
|
-
"
|
|
10436
|
+
"no-wrap": 0,
|
|
10437
|
+
// Wrap.NoWrap
|
|
10438
|
+
"wrap": 1,
|
|
10439
|
+
// Wrap.Wrap
|
|
10440
|
+
"Wrap-reverse": 2
|
|
10441
|
+
// Wrap.WrapReverse
|
|
10379
10442
|
};
|
|
10380
10443
|
const justifyMap = {
|
|
10381
|
-
"flex-start":
|
|
10382
|
-
|
|
10383
|
-
"
|
|
10384
|
-
|
|
10385
|
-
"
|
|
10386
|
-
|
|
10444
|
+
"flex-start": 0,
|
|
10445
|
+
// Justify.FlexStart
|
|
10446
|
+
"center": 1,
|
|
10447
|
+
// Justify.Center
|
|
10448
|
+
"flex-end": 2,
|
|
10449
|
+
// Justify.FlexEnd
|
|
10450
|
+
"space-between": 3,
|
|
10451
|
+
// Justify.SpaceBetween
|
|
10452
|
+
"space-around": 4,
|
|
10453
|
+
// Justify.SpaceAround
|
|
10454
|
+
"space-evenly": 5
|
|
10455
|
+
// Justify.SpaceEvenly
|
|
10387
10456
|
};
|
|
10388
10457
|
const overflowMap = {
|
|
10389
|
-
visible:
|
|
10390
|
-
|
|
10391
|
-
|
|
10458
|
+
visible: 0,
|
|
10459
|
+
// Overflow.Visible
|
|
10460
|
+
hidden: 1,
|
|
10461
|
+
// Overflow.Hidden
|
|
10462
|
+
scroll: 2
|
|
10463
|
+
// Overflow.Scroll
|
|
10392
10464
|
};
|
|
10393
10465
|
const positionTypeMap = {
|
|
10394
|
-
static:
|
|
10395
|
-
|
|
10396
|
-
|
|
10466
|
+
static: 0,
|
|
10467
|
+
// PositionType.Static
|
|
10468
|
+
relative: 1,
|
|
10469
|
+
// PositionType.Relative
|
|
10470
|
+
absolute: 2
|
|
10471
|
+
// PositionType.Absolute
|
|
10397
10472
|
};
|
|
10398
10473
|
const boxSizingMap = {
|
|
10399
|
-
"border-box":
|
|
10400
|
-
|
|
10474
|
+
"border-box": 0,
|
|
10475
|
+
// BoxSizing.BorderBox
|
|
10476
|
+
"content-box": 1
|
|
10477
|
+
// BoxSizing.ContentBox
|
|
10401
10478
|
};
|
|
10402
10479
|
class FlexLayout {
|
|
10403
10480
|
constructor(_element) {
|
|
@@ -10405,7 +10482,8 @@ class FlexLayout {
|
|
|
10405
10482
|
}
|
|
10406
10483
|
static _yoga;
|
|
10407
10484
|
static async load() {
|
|
10408
|
-
|
|
10485
|
+
const { loadYoga } = await import('yoga-layout/load');
|
|
10486
|
+
this._yoga = await loadYoga();
|
|
10409
10487
|
}
|
|
10410
10488
|
_node = FlexLayout._yoga.Node.create();
|
|
10411
10489
|
get _style() {
|
|
@@ -10451,19 +10529,19 @@ class FlexLayout {
|
|
|
10451
10529
|
this._node.setAspectRatio(value);
|
|
10452
10530
|
break;
|
|
10453
10531
|
case "borderTop":
|
|
10454
|
-
this._node.setBorder(
|
|
10532
|
+
this._node.setBorder(edgeMap.top, this._style.borderWidth);
|
|
10455
10533
|
break;
|
|
10456
10534
|
case "borderBottom":
|
|
10457
|
-
this._node.setBorder(
|
|
10535
|
+
this._node.setBorder(edgeMap.bottom, this._style.borderWidth);
|
|
10458
10536
|
break;
|
|
10459
10537
|
case "borderLeft":
|
|
10460
|
-
this._node.setBorder(
|
|
10538
|
+
this._node.setBorder(edgeMap.left, this._style.borderWidth);
|
|
10461
10539
|
break;
|
|
10462
10540
|
case "borderRight":
|
|
10463
|
-
this._node.setBorder(
|
|
10541
|
+
this._node.setBorder(edgeMap.right, this._style.borderWidth);
|
|
10464
10542
|
break;
|
|
10465
10543
|
case "border":
|
|
10466
|
-
this._node.setBorder(
|
|
10544
|
+
this._node.setBorder(edgeMap.all, this._style.borderWidth);
|
|
10467
10545
|
break;
|
|
10468
10546
|
case "direction":
|
|
10469
10547
|
this._node.setDirection(
|
|
@@ -10506,22 +10584,22 @@ class FlexLayout {
|
|
|
10506
10584
|
);
|
|
10507
10585
|
break;
|
|
10508
10586
|
case "gap":
|
|
10509
|
-
value !== void 0 && this._node.setGap(
|
|
10587
|
+
value !== void 0 && this._node.setGap(gutterMap.all, value);
|
|
10510
10588
|
break;
|
|
10511
10589
|
case "marginTop":
|
|
10512
|
-
this._node.setMargin(
|
|
10590
|
+
this._node.setMargin(edgeMap.top, value);
|
|
10513
10591
|
break;
|
|
10514
10592
|
case "marginBottom":
|
|
10515
|
-
this._node.setMargin(
|
|
10593
|
+
this._node.setMargin(edgeMap.bottom, value);
|
|
10516
10594
|
break;
|
|
10517
10595
|
case "marginLeft":
|
|
10518
|
-
this._node.setMargin(
|
|
10596
|
+
this._node.setMargin(edgeMap.left, value);
|
|
10519
10597
|
break;
|
|
10520
10598
|
case "marginRight":
|
|
10521
|
-
this._node.setMargin(
|
|
10599
|
+
this._node.setMargin(edgeMap.right, value);
|
|
10522
10600
|
break;
|
|
10523
10601
|
case "margin":
|
|
10524
|
-
this._node.setMargin(
|
|
10602
|
+
this._node.setMargin(edgeMap.all, value);
|
|
10525
10603
|
break;
|
|
10526
10604
|
case "maxHeight":
|
|
10527
10605
|
this._node.setMaxHeight(value);
|
|
@@ -10543,31 +10621,31 @@ class FlexLayout {
|
|
|
10543
10621
|
);
|
|
10544
10622
|
break;
|
|
10545
10623
|
case "paddingTop":
|
|
10546
|
-
this._node.setPadding(
|
|
10624
|
+
this._node.setPadding(edgeMap.top, this._style.paddingTop);
|
|
10547
10625
|
break;
|
|
10548
10626
|
case "paddingBottom":
|
|
10549
|
-
this._node.setPadding(
|
|
10627
|
+
this._node.setPadding(edgeMap.bottom, this._style.paddingBottom);
|
|
10550
10628
|
break;
|
|
10551
10629
|
case "paddingLeft":
|
|
10552
|
-
this._node.setPadding(
|
|
10630
|
+
this._node.setPadding(edgeMap.left, this._style.paddingLeft);
|
|
10553
10631
|
break;
|
|
10554
10632
|
case "paddingRight":
|
|
10555
|
-
this._node.setPadding(
|
|
10633
|
+
this._node.setPadding(edgeMap.right, this._style.paddingRight);
|
|
10556
10634
|
break;
|
|
10557
10635
|
case "padding":
|
|
10558
|
-
this._node.setPadding(
|
|
10636
|
+
this._node.setPadding(edgeMap.all, this._style.padding);
|
|
10559
10637
|
break;
|
|
10560
10638
|
case "top":
|
|
10561
|
-
this._node.setPosition(
|
|
10639
|
+
this._node.setPosition(edgeMap.top, this._style.top);
|
|
10562
10640
|
break;
|
|
10563
10641
|
case "bottom":
|
|
10564
|
-
this._node.setPosition(
|
|
10642
|
+
this._node.setPosition(edgeMap.bottom, this._style.bottom);
|
|
10565
10643
|
break;
|
|
10566
10644
|
case "left":
|
|
10567
|
-
this._node.setPosition(
|
|
10645
|
+
this._node.setPosition(edgeMap.left, this._style.left);
|
|
10568
10646
|
break;
|
|
10569
10647
|
case "right":
|
|
10570
|
-
this._node.setPosition(
|
|
10648
|
+
this._node.setPosition(edgeMap.right, this._style.right);
|
|
10571
10649
|
break;
|
|
10572
10650
|
case "position":
|
|
10573
10651
|
this._node.setPositionType(
|
|
@@ -10648,7 +10726,7 @@ exports.FlexElement2D = class FlexElement2D extends exports.BaseElement2D {
|
|
|
10648
10726
|
}
|
|
10649
10727
|
}
|
|
10650
10728
|
updateTransform() {
|
|
10651
|
-
this.calculateLayout(void 0, void 0,
|
|
10729
|
+
this.calculateLayout(void 0, void 0, directionMap.ltr);
|
|
10652
10730
|
const { left, top, width, height } = this._layout.getComputedLayout();
|
|
10653
10731
|
this.position.x = left;
|
|
10654
10732
|
this.position.y = top;
|
|
@@ -13431,7 +13509,7 @@ exports.TwistTransition = __decorateClass$1([
|
|
|
13431
13509
|
customNode("TwistTransition")
|
|
13432
13510
|
], exports.TwistTransition);
|
|
13433
13511
|
|
|
13434
|
-
class
|
|
13512
|
+
class GifLoader extends Loader {
|
|
13435
13513
|
install(assets) {
|
|
13436
13514
|
const handler = async (url) => {
|
|
13437
13515
|
const { decodeFrames } = await import('modern-gif');
|
|
@@ -13457,7 +13535,7 @@ class GIFLoader extends Loader {
|
|
|
13457
13535
|
}
|
|
13458
13536
|
}
|
|
13459
13537
|
|
|
13460
|
-
class
|
|
13538
|
+
class JsonLoader extends Loader {
|
|
13461
13539
|
install(assets) {
|
|
13462
13540
|
const handler = (url) => {
|
|
13463
13541
|
return assets.fetch(url).then((rep) => rep.json());
|
|
@@ -13789,7 +13867,7 @@ class Assets {
|
|
|
13789
13867
|
this._handled.clear();
|
|
13790
13868
|
}
|
|
13791
13869
|
}
|
|
13792
|
-
const assets = new Assets().use(new FontLoader()).use(new
|
|
13870
|
+
const assets = new Assets().use(new FontLoader()).use(new GifLoader()).use(new JsonLoader()).use(new LottieLoader()).use(new TextLoader()).use(new TextureLoader()).use(new VideoLoader());
|
|
13793
13871
|
|
|
13794
13872
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
13795
13873
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -14261,8 +14339,8 @@ exports.Engine = Engine;
|
|
|
14261
14339
|
exports.FlexElement2DStyle = FlexElement2DStyle;
|
|
14262
14340
|
exports.FlexLayout = FlexLayout;
|
|
14263
14341
|
exports.FontLoader = FontLoader;
|
|
14264
|
-
exports.GIFLoader = GIFLoader;
|
|
14265
14342
|
exports.Geometry = Geometry;
|
|
14343
|
+
exports.GifLoader = GifLoader;
|
|
14266
14344
|
exports.GradientTexture = GradientTexture;
|
|
14267
14345
|
exports.HTMLAudio = HTMLAudio;
|
|
14268
14346
|
exports.HTMLAudioContext = HTMLAudioContext;
|
|
@@ -14272,7 +14350,7 @@ exports.ImageTexture = ImageTexture;
|
|
|
14272
14350
|
exports.IndexBuffer = IndexBuffer;
|
|
14273
14351
|
exports.Input = Input;
|
|
14274
14352
|
exports.InputEvent = InputEvent;
|
|
14275
|
-
exports.
|
|
14353
|
+
exports.JsonLoader = JsonLoader;
|
|
14276
14354
|
exports.KeyboardInputEvent = KeyboardInputEvent;
|
|
14277
14355
|
exports.Loader = Loader;
|
|
14278
14356
|
exports.LottieLoader = LottieLoader;
|
|
@@ -14348,7 +14426,9 @@ exports.WebGLVertexArrayModule = WebGLVertexArrayModule;
|
|
|
14348
14426
|
exports.WebGLViewportModule = WebGLViewportModule;
|
|
14349
14427
|
exports.WebSound = WebSound;
|
|
14350
14428
|
exports.WheelInputEvent = WheelInputEvent;
|
|
14429
|
+
exports.alignMap = alignMap;
|
|
14351
14430
|
exports.assets = assets;
|
|
14431
|
+
exports.boxSizingMap = boxSizingMap;
|
|
14352
14432
|
exports.clamp = clamp;
|
|
14353
14433
|
exports.clampFrag = clampFrag;
|
|
14354
14434
|
exports.createHTMLCanvas = createHTMLCanvas;
|
|
@@ -14360,29 +14440,38 @@ exports.customNode = customNode;
|
|
|
14360
14440
|
exports.customNodes = customNodes;
|
|
14361
14441
|
exports.defaultOptions = defaultOptions;
|
|
14362
14442
|
exports.determineCrossOrigin = determineCrossOrigin;
|
|
14443
|
+
exports.directionMap = directionMap;
|
|
14444
|
+
exports.displayMap = displayMap;
|
|
14363
14445
|
exports.ease = ease;
|
|
14364
14446
|
exports.easeIn = easeIn;
|
|
14365
14447
|
exports.easeInOut = easeInOut;
|
|
14366
14448
|
exports.easeOut = easeOut;
|
|
14449
|
+
exports.edgeMap = edgeMap;
|
|
14450
|
+
exports.flexDirectionMap = flexDirectionMap;
|
|
14451
|
+
exports.flexWrapMap = flexWrapMap;
|
|
14367
14452
|
exports.frag = frag$1;
|
|
14368
14453
|
exports.getDefaultCssPropertyValue = getDefaultCssPropertyValue;
|
|
14454
|
+
exports.gutterMap = gutterMap;
|
|
14369
14455
|
exports.isCanvasElement = isCanvasElement;
|
|
14370
14456
|
exports.isElementNode = isElementNode;
|
|
14371
14457
|
exports.isImageElement = isImageElement;
|
|
14372
14458
|
exports.isPow2 = isPow2;
|
|
14373
14459
|
exports.isVideoElement = isVideoElement;
|
|
14374
14460
|
exports.isWebgl2 = isWebgl2;
|
|
14461
|
+
exports.justifyMap = justifyMap;
|
|
14375
14462
|
exports.lerp = lerp;
|
|
14376
14463
|
exports.linear = linear;
|
|
14377
14464
|
exports.log2 = log2;
|
|
14378
14465
|
exports.mapWebGLBlendModes = mapWebGLBlendModes;
|
|
14379
14466
|
exports.nextPow2 = nextPow2;
|
|
14380
14467
|
exports.nextTick = nextTick;
|
|
14468
|
+
exports.overflowMap = overflowMap;
|
|
14381
14469
|
exports.parseCSSFilter = parseCSSFilter;
|
|
14382
14470
|
exports.parseCSSTransform = parseCSSTransform;
|
|
14383
14471
|
exports.parseCSSTransformOrigin = parseCSSTransformOrigin;
|
|
14384
14472
|
exports.parseCssFunctions = parseCssFunctions;
|
|
14385
14473
|
exports.parseCssProperty = parseCssProperty;
|
|
14474
|
+
exports.positionTypeMap = positionTypeMap;
|
|
14386
14475
|
exports.render = render;
|
|
14387
14476
|
exports.timingFunctions = timingFunctions;
|
|
14388
14477
|
exports.uid = uid;
|