@leafer-ui/node 1.5.2 → 1.6.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/node.cjs +68 -71
- package/dist/node.cjs.map +1 -1
- package/dist/node.esm.js +68 -71
- package/dist/node.esm.js.map +1 -1
- package/dist/node.esm.min.js +1 -1
- package/dist/node.esm.min.js.map +1 -1
- package/dist/node.min.cjs +1 -1
- package/dist/node.min.cjs.map +1 -1
- package/package.json +12 -11
- package/src/core.ts +73 -0
- package/src/index.ts +2 -2
- package/types/index.d.ts +8 -1
package/dist/node.cjs
CHANGED
|
@@ -255,7 +255,6 @@ function updateChange(updateList) {
|
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
const { worldBounds } = core.LeafBoundsHelper;
|
|
258
|
-
const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
|
|
259
258
|
class LayoutBlockData {
|
|
260
259
|
constructor(list) {
|
|
261
260
|
this.updatedBounds = new core.Bounds();
|
|
@@ -269,13 +268,7 @@ class LayoutBlockData {
|
|
|
269
268
|
this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
270
269
|
}
|
|
271
270
|
setAfter() {
|
|
272
|
-
|
|
273
|
-
if (list.some(leaf => leaf.noBounds)) {
|
|
274
|
-
this.afterBounds.set(bigBounds);
|
|
275
|
-
}
|
|
276
|
-
else {
|
|
277
|
-
this.afterBounds.setListWithFn(list, worldBounds);
|
|
278
|
-
}
|
|
271
|
+
this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
279
272
|
this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
|
|
280
273
|
}
|
|
281
274
|
merge(data) {
|
|
@@ -477,6 +470,13 @@ class Renderer {
|
|
|
477
470
|
requestLayout() {
|
|
478
471
|
this.target.emit(core.LayoutEvent.REQUEST);
|
|
479
472
|
}
|
|
473
|
+
checkRender() {
|
|
474
|
+
if (this.running) {
|
|
475
|
+
if (this.changed && this.canvas.view)
|
|
476
|
+
this.render();
|
|
477
|
+
this.target.emit(core.RenderEvent.NEXT);
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
480
|
render(callback) {
|
|
481
481
|
if (!(this.running && this.canvas.view))
|
|
482
482
|
return this.update();
|
|
@@ -485,8 +485,6 @@ class Renderer {
|
|
|
485
485
|
this.totalBounds = new core.Bounds();
|
|
486
486
|
debug$1.log(target.innerName, '--->');
|
|
487
487
|
try {
|
|
488
|
-
if (!target.isApp)
|
|
489
|
-
target.app.emit(core.RenderEvent.CHILD_START, target);
|
|
490
488
|
this.emitRender(core.RenderEvent.START);
|
|
491
489
|
this.renderOnce(callback);
|
|
492
490
|
this.emitRender(core.RenderEvent.END, this.totalBounds);
|
|
@@ -554,20 +552,12 @@ class Renderer {
|
|
|
554
552
|
}
|
|
555
553
|
clipRender(block) {
|
|
556
554
|
const t = core.Run.start('PartRender');
|
|
557
|
-
const { canvas } = this;
|
|
558
|
-
const bounds = block.getIntersect(canvas.bounds);
|
|
559
|
-
const includes = block.includes(this.target.__world);
|
|
560
|
-
const realBounds = new core.Bounds(bounds);
|
|
555
|
+
const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
|
|
561
556
|
canvas.save();
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
|
|
567
|
-
canvas.clearWorld(bounds, true);
|
|
568
|
-
canvas.clipWorld(bounds, true);
|
|
569
|
-
}
|
|
570
|
-
this.__render(bounds, includes, realBounds);
|
|
557
|
+
bounds.spread(Renderer.clipSpread).ceil();
|
|
558
|
+
canvas.clearWorld(bounds, true);
|
|
559
|
+
canvas.clipWorld(bounds, true);
|
|
560
|
+
this.__render(bounds, block.includes(this.target.__world), realBounds);
|
|
571
561
|
canvas.restore();
|
|
572
562
|
core.Run.end(t);
|
|
573
563
|
}
|
|
@@ -581,23 +571,17 @@ class Renderer {
|
|
|
581
571
|
core.Run.end(t);
|
|
582
572
|
}
|
|
583
573
|
__render(bounds, includes, realBounds) {
|
|
584
|
-
const options =
|
|
574
|
+
const { canvas } = this, options = includes ? { includes } : { bounds, includes };
|
|
585
575
|
if (this.needFill)
|
|
586
|
-
|
|
576
|
+
canvas.fillWorld(bounds, this.config.fill);
|
|
587
577
|
if (core.Debug.showRepaint)
|
|
588
|
-
|
|
589
|
-
this.target.__render(
|
|
578
|
+
core.Debug.drawRepaint(canvas, bounds);
|
|
579
|
+
this.target.__render(canvas, options);
|
|
590
580
|
this.renderBounds = realBounds = realBounds || bounds;
|
|
591
581
|
this.renderOptions = options;
|
|
592
582
|
this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
if (core.Debug.showBoundsView)
|
|
596
|
-
this.renderBoundsView(options);
|
|
597
|
-
this.canvas.updateRender(realBounds);
|
|
598
|
-
}
|
|
599
|
-
renderHitView(_options) { }
|
|
600
|
-
renderBoundsView(_options) { }
|
|
583
|
+
canvas.updateRender(realBounds);
|
|
584
|
+
}
|
|
601
585
|
addBlock(block) {
|
|
602
586
|
if (!this.updateBlocks)
|
|
603
587
|
this.updateBlocks = [];
|
|
@@ -613,17 +597,24 @@ class Renderer {
|
|
|
613
597
|
}
|
|
614
598
|
}
|
|
615
599
|
__requestRender() {
|
|
600
|
+
const target = this.target;
|
|
601
|
+
if (target.parentApp)
|
|
602
|
+
return target.parentApp.renderer.update(false);
|
|
616
603
|
if (this.requestTime)
|
|
617
604
|
return;
|
|
618
605
|
const requestTime = this.requestTime = Date.now();
|
|
619
606
|
core.Platform.requestRender(() => {
|
|
620
607
|
this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
|
|
621
608
|
this.requestTime = 0;
|
|
622
|
-
if (
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
609
|
+
if (target.isApp) {
|
|
610
|
+
target.emit(core.RenderEvent.CHILD_START, target);
|
|
611
|
+
target.children.forEach(leafer => {
|
|
612
|
+
leafer.renderer.FPS = this.FPS;
|
|
613
|
+
leafer.renderer.checkRender();
|
|
614
|
+
});
|
|
615
|
+
target.emit(core.RenderEvent.CHILD_END, target);
|
|
626
616
|
}
|
|
617
|
+
this.checkRender();
|
|
627
618
|
});
|
|
628
619
|
}
|
|
629
620
|
__onResize(e) {
|
|
@@ -681,6 +672,7 @@ class Renderer {
|
|
|
681
672
|
}
|
|
682
673
|
}
|
|
683
674
|
}
|
|
675
|
+
Renderer.clipSpread = 10;
|
|
684
676
|
|
|
685
677
|
const { hitRadiusPoint } = core.BoundsHelper;
|
|
686
678
|
class Picker {
|
|
@@ -1200,9 +1192,11 @@ const tempBox = new core.Bounds();
|
|
|
1200
1192
|
const tempPoint = {};
|
|
1201
1193
|
const tempScaleData = {};
|
|
1202
1194
|
function createData(leafPaint, image, paint, box) {
|
|
1203
|
-
const { blendMode, sync } = paint;
|
|
1195
|
+
const { blendMode, changeful, sync } = paint;
|
|
1204
1196
|
if (blendMode)
|
|
1205
1197
|
leafPaint.blendMode = blendMode;
|
|
1198
|
+
if (changeful)
|
|
1199
|
+
leafPaint.changeful = changeful;
|
|
1206
1200
|
if (sync)
|
|
1207
1201
|
leafPaint.sync = sync;
|
|
1208
1202
|
leafPaint.data = getPatternData(paint, box, image);
|
|
@@ -1435,40 +1429,32 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1435
1429
|
}
|
|
1436
1430
|
|
|
1437
1431
|
const { abs } = Math;
|
|
1438
|
-
function checkImage(ui, canvas, paint,
|
|
1432
|
+
function checkImage(ui, canvas, paint, allowDraw) {
|
|
1439
1433
|
const { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
|
|
1440
|
-
const { pixelRatio } = canvas;
|
|
1441
|
-
if (!
|
|
1434
|
+
const { pixelRatio } = canvas, { data } = paint;
|
|
1435
|
+
if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
|
|
1442
1436
|
return false;
|
|
1443
1437
|
}
|
|
1444
1438
|
else {
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
let { width, height } = data;
|
|
1449
|
-
width *= abs(scaleX) * pixelRatio;
|
|
1450
|
-
height *= abs(scaleY) * pixelRatio;
|
|
1451
|
-
if (data.scaleX) {
|
|
1452
|
-
width *= data.scaleX;
|
|
1453
|
-
height *= data.scaleY;
|
|
1454
|
-
}
|
|
1455
|
-
allowPaint = (width * height > core.Platform.image.maxCacheSize) || draw.Export.running;
|
|
1439
|
+
if (allowDraw) {
|
|
1440
|
+
if (data.repeat) {
|
|
1441
|
+
allowDraw = false;
|
|
1456
1442
|
}
|
|
1457
1443
|
else {
|
|
1458
|
-
|
|
1444
|
+
if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
|
|
1445
|
+
let { width, height } = data;
|
|
1446
|
+
width *= abs(scaleX) * pixelRatio;
|
|
1447
|
+
height *= abs(scaleY) * pixelRatio;
|
|
1448
|
+
if (data.scaleX) {
|
|
1449
|
+
width *= data.scaleX;
|
|
1450
|
+
height *= data.scaleY;
|
|
1451
|
+
}
|
|
1452
|
+
allowDraw = (width * height > core.Platform.image.maxCacheSize);
|
|
1453
|
+
}
|
|
1459
1454
|
}
|
|
1460
1455
|
}
|
|
1461
|
-
if (
|
|
1462
|
-
canvas
|
|
1463
|
-
ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
|
|
1464
|
-
if (paint.blendMode)
|
|
1465
|
-
canvas.blendMode = paint.blendMode;
|
|
1466
|
-
if (data.opacity)
|
|
1467
|
-
canvas.opacity *= data.opacity;
|
|
1468
|
-
if (data.transform)
|
|
1469
|
-
canvas.transform(data.transform);
|
|
1470
|
-
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1471
|
-
canvas.restore();
|
|
1456
|
+
if (allowDraw) {
|
|
1457
|
+
drawImage(ui, canvas, paint, data);
|
|
1472
1458
|
return true;
|
|
1473
1459
|
}
|
|
1474
1460
|
else {
|
|
@@ -1489,13 +1475,26 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1489
1475
|
}
|
|
1490
1476
|
}
|
|
1491
1477
|
}
|
|
1478
|
+
function drawImage(ui, canvas, paint, data) {
|
|
1479
|
+
canvas.save();
|
|
1480
|
+
ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
|
|
1481
|
+
if (paint.blendMode)
|
|
1482
|
+
canvas.blendMode = paint.blendMode;
|
|
1483
|
+
if (data.opacity)
|
|
1484
|
+
canvas.opacity *= data.opacity;
|
|
1485
|
+
if (data.transform)
|
|
1486
|
+
canvas.transform(data.transform);
|
|
1487
|
+
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1488
|
+
canvas.restore();
|
|
1489
|
+
}
|
|
1492
1490
|
|
|
1493
1491
|
function recycleImage(attrName, data) {
|
|
1494
1492
|
const paints = data['_' + attrName];
|
|
1495
1493
|
if (paints instanceof Array) {
|
|
1496
|
-
let image, recycleMap, input, url;
|
|
1494
|
+
let paint, image, recycleMap, input, url;
|
|
1497
1495
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
1498
|
-
|
|
1496
|
+
paint = paints[i];
|
|
1497
|
+
image = paint.image;
|
|
1499
1498
|
url = image && image.url;
|
|
1500
1499
|
if (url) {
|
|
1501
1500
|
if (!recycleMap)
|
|
@@ -1510,8 +1509,6 @@ function recycleImage(attrName, data) {
|
|
|
1510
1509
|
}
|
|
1511
1510
|
image.unload(paints[i].loadId, !input.some((item) => item.url === url));
|
|
1512
1511
|
}
|
|
1513
|
-
else
|
|
1514
|
-
paints[i].style = null;
|
|
1515
1512
|
}
|
|
1516
1513
|
}
|
|
1517
1514
|
return recycleMap;
|
|
@@ -1690,7 +1687,7 @@ const { toOffsetOutBounds } = core.BoundsHelper;
|
|
|
1690
1687
|
const offsetOutBounds = {};
|
|
1691
1688
|
function innerShadow(ui, current, shape) {
|
|
1692
1689
|
let copyBounds, spreadScale;
|
|
1693
|
-
const { __nowWorld: nowWorld, __layout
|
|
1690
|
+
const { __nowWorld: nowWorld, __layout } = ui;
|
|
1694
1691
|
const { innerShadow } = ui.__;
|
|
1695
1692
|
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1696
1693
|
const other = current.getSameCanvas();
|