@leafer-draw/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 +10 -8
- package/src/core.ts +73 -0
- package/src/index.ts +1 -1
- package/types/index.d.ts +8 -1
package/dist/node.cjs
CHANGED
|
@@ -254,7 +254,6 @@ function updateChange(updateList) {
|
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
const { worldBounds } = core.LeafBoundsHelper;
|
|
257
|
-
const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
|
|
258
257
|
class LayoutBlockData {
|
|
259
258
|
constructor(list) {
|
|
260
259
|
this.updatedBounds = new core.Bounds();
|
|
@@ -268,13 +267,7 @@ class LayoutBlockData {
|
|
|
268
267
|
this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
269
268
|
}
|
|
270
269
|
setAfter() {
|
|
271
|
-
|
|
272
|
-
if (list.some(leaf => leaf.noBounds)) {
|
|
273
|
-
this.afterBounds.set(bigBounds);
|
|
274
|
-
}
|
|
275
|
-
else {
|
|
276
|
-
this.afterBounds.setListWithFn(list, worldBounds);
|
|
277
|
-
}
|
|
270
|
+
this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
278
271
|
this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
|
|
279
272
|
}
|
|
280
273
|
merge(data) {
|
|
@@ -476,6 +469,13 @@ class Renderer {
|
|
|
476
469
|
requestLayout() {
|
|
477
470
|
this.target.emit(core.LayoutEvent.REQUEST);
|
|
478
471
|
}
|
|
472
|
+
checkRender() {
|
|
473
|
+
if (this.running) {
|
|
474
|
+
if (this.changed && this.canvas.view)
|
|
475
|
+
this.render();
|
|
476
|
+
this.target.emit(core.RenderEvent.NEXT);
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
479
|
render(callback) {
|
|
480
480
|
if (!(this.running && this.canvas.view))
|
|
481
481
|
return this.update();
|
|
@@ -484,8 +484,6 @@ class Renderer {
|
|
|
484
484
|
this.totalBounds = new core.Bounds();
|
|
485
485
|
debug$1.log(target.innerName, '--->');
|
|
486
486
|
try {
|
|
487
|
-
if (!target.isApp)
|
|
488
|
-
target.app.emit(core.RenderEvent.CHILD_START, target);
|
|
489
487
|
this.emitRender(core.RenderEvent.START);
|
|
490
488
|
this.renderOnce(callback);
|
|
491
489
|
this.emitRender(core.RenderEvent.END, this.totalBounds);
|
|
@@ -553,20 +551,12 @@ class Renderer {
|
|
|
553
551
|
}
|
|
554
552
|
clipRender(block) {
|
|
555
553
|
const t = core.Run.start('PartRender');
|
|
556
|
-
const { canvas } = this;
|
|
557
|
-
const bounds = block.getIntersect(canvas.bounds);
|
|
558
|
-
const includes = block.includes(this.target.__world);
|
|
559
|
-
const realBounds = new core.Bounds(bounds);
|
|
554
|
+
const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
|
|
560
555
|
canvas.save();
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
|
|
566
|
-
canvas.clearWorld(bounds, true);
|
|
567
|
-
canvas.clipWorld(bounds, true);
|
|
568
|
-
}
|
|
569
|
-
this.__render(bounds, includes, realBounds);
|
|
556
|
+
bounds.spread(Renderer.clipSpread).ceil();
|
|
557
|
+
canvas.clearWorld(bounds, true);
|
|
558
|
+
canvas.clipWorld(bounds, true);
|
|
559
|
+
this.__render(bounds, block.includes(this.target.__world), realBounds);
|
|
570
560
|
canvas.restore();
|
|
571
561
|
core.Run.end(t);
|
|
572
562
|
}
|
|
@@ -580,23 +570,17 @@ class Renderer {
|
|
|
580
570
|
core.Run.end(t);
|
|
581
571
|
}
|
|
582
572
|
__render(bounds, includes, realBounds) {
|
|
583
|
-
const options =
|
|
573
|
+
const { canvas } = this, options = includes ? { includes } : { bounds, includes };
|
|
584
574
|
if (this.needFill)
|
|
585
|
-
|
|
575
|
+
canvas.fillWorld(bounds, this.config.fill);
|
|
586
576
|
if (core.Debug.showRepaint)
|
|
587
|
-
|
|
588
|
-
this.target.__render(
|
|
577
|
+
core.Debug.drawRepaint(canvas, bounds);
|
|
578
|
+
this.target.__render(canvas, options);
|
|
589
579
|
this.renderBounds = realBounds = realBounds || bounds;
|
|
590
580
|
this.renderOptions = options;
|
|
591
581
|
this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
if (core.Debug.showBoundsView)
|
|
595
|
-
this.renderBoundsView(options);
|
|
596
|
-
this.canvas.updateRender(realBounds);
|
|
597
|
-
}
|
|
598
|
-
renderHitView(_options) { }
|
|
599
|
-
renderBoundsView(_options) { }
|
|
582
|
+
canvas.updateRender(realBounds);
|
|
583
|
+
}
|
|
600
584
|
addBlock(block) {
|
|
601
585
|
if (!this.updateBlocks)
|
|
602
586
|
this.updateBlocks = [];
|
|
@@ -612,17 +596,24 @@ class Renderer {
|
|
|
612
596
|
}
|
|
613
597
|
}
|
|
614
598
|
__requestRender() {
|
|
599
|
+
const target = this.target;
|
|
600
|
+
if (target.parentApp)
|
|
601
|
+
return target.parentApp.renderer.update(false);
|
|
615
602
|
if (this.requestTime)
|
|
616
603
|
return;
|
|
617
604
|
const requestTime = this.requestTime = Date.now();
|
|
618
605
|
core.Platform.requestRender(() => {
|
|
619
606
|
this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
|
|
620
607
|
this.requestTime = 0;
|
|
621
|
-
if (
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
608
|
+
if (target.isApp) {
|
|
609
|
+
target.emit(core.RenderEvent.CHILD_START, target);
|
|
610
|
+
target.children.forEach(leafer => {
|
|
611
|
+
leafer.renderer.FPS = this.FPS;
|
|
612
|
+
leafer.renderer.checkRender();
|
|
613
|
+
});
|
|
614
|
+
target.emit(core.RenderEvent.CHILD_END, target);
|
|
625
615
|
}
|
|
616
|
+
this.checkRender();
|
|
626
617
|
});
|
|
627
618
|
}
|
|
628
619
|
__onResize(e) {
|
|
@@ -680,6 +671,7 @@ class Renderer {
|
|
|
680
671
|
}
|
|
681
672
|
}
|
|
682
673
|
}
|
|
674
|
+
Renderer.clipSpread = 10;
|
|
683
675
|
|
|
684
676
|
Object.assign(core.Creator, {
|
|
685
677
|
watcher: (target, options) => new Watcher(target, options),
|
|
@@ -1042,9 +1034,11 @@ const tempBox = new core.Bounds();
|
|
|
1042
1034
|
const tempPoint = {};
|
|
1043
1035
|
const tempScaleData = {};
|
|
1044
1036
|
function createData(leafPaint, image, paint, box) {
|
|
1045
|
-
const { blendMode, sync } = paint;
|
|
1037
|
+
const { blendMode, changeful, sync } = paint;
|
|
1046
1038
|
if (blendMode)
|
|
1047
1039
|
leafPaint.blendMode = blendMode;
|
|
1040
|
+
if (changeful)
|
|
1041
|
+
leafPaint.changeful = changeful;
|
|
1048
1042
|
if (sync)
|
|
1049
1043
|
leafPaint.sync = sync;
|
|
1050
1044
|
leafPaint.data = getPatternData(paint, box, image);
|
|
@@ -1277,40 +1271,32 @@ function createPattern(ui, paint, pixelRatio) {
|
|
|
1277
1271
|
}
|
|
1278
1272
|
|
|
1279
1273
|
const { abs } = Math;
|
|
1280
|
-
function checkImage(ui, canvas, paint,
|
|
1274
|
+
function checkImage(ui, canvas, paint, allowDraw) {
|
|
1281
1275
|
const { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
|
|
1282
|
-
const { pixelRatio } = canvas;
|
|
1283
|
-
if (!
|
|
1276
|
+
const { pixelRatio } = canvas, { data } = paint;
|
|
1277
|
+
if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
|
|
1284
1278
|
return false;
|
|
1285
1279
|
}
|
|
1286
1280
|
else {
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
let { width, height } = data;
|
|
1291
|
-
width *= abs(scaleX) * pixelRatio;
|
|
1292
|
-
height *= abs(scaleY) * pixelRatio;
|
|
1293
|
-
if (data.scaleX) {
|
|
1294
|
-
width *= data.scaleX;
|
|
1295
|
-
height *= data.scaleY;
|
|
1296
|
-
}
|
|
1297
|
-
allowPaint = (width * height > core.Platform.image.maxCacheSize) || draw.Export.running;
|
|
1281
|
+
if (allowDraw) {
|
|
1282
|
+
if (data.repeat) {
|
|
1283
|
+
allowDraw = false;
|
|
1298
1284
|
}
|
|
1299
1285
|
else {
|
|
1300
|
-
|
|
1286
|
+
if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
|
|
1287
|
+
let { width, height } = data;
|
|
1288
|
+
width *= abs(scaleX) * pixelRatio;
|
|
1289
|
+
height *= abs(scaleY) * pixelRatio;
|
|
1290
|
+
if (data.scaleX) {
|
|
1291
|
+
width *= data.scaleX;
|
|
1292
|
+
height *= data.scaleY;
|
|
1293
|
+
}
|
|
1294
|
+
allowDraw = (width * height > core.Platform.image.maxCacheSize);
|
|
1295
|
+
}
|
|
1301
1296
|
}
|
|
1302
1297
|
}
|
|
1303
|
-
if (
|
|
1304
|
-
canvas
|
|
1305
|
-
ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
|
|
1306
|
-
if (paint.blendMode)
|
|
1307
|
-
canvas.blendMode = paint.blendMode;
|
|
1308
|
-
if (data.opacity)
|
|
1309
|
-
canvas.opacity *= data.opacity;
|
|
1310
|
-
if (data.transform)
|
|
1311
|
-
canvas.transform(data.transform);
|
|
1312
|
-
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1313
|
-
canvas.restore();
|
|
1298
|
+
if (allowDraw) {
|
|
1299
|
+
drawImage(ui, canvas, paint, data);
|
|
1314
1300
|
return true;
|
|
1315
1301
|
}
|
|
1316
1302
|
else {
|
|
@@ -1331,13 +1317,26 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1331
1317
|
}
|
|
1332
1318
|
}
|
|
1333
1319
|
}
|
|
1320
|
+
function drawImage(ui, canvas, paint, data) {
|
|
1321
|
+
canvas.save();
|
|
1322
|
+
ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
|
|
1323
|
+
if (paint.blendMode)
|
|
1324
|
+
canvas.blendMode = paint.blendMode;
|
|
1325
|
+
if (data.opacity)
|
|
1326
|
+
canvas.opacity *= data.opacity;
|
|
1327
|
+
if (data.transform)
|
|
1328
|
+
canvas.transform(data.transform);
|
|
1329
|
+
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1330
|
+
canvas.restore();
|
|
1331
|
+
}
|
|
1334
1332
|
|
|
1335
1333
|
function recycleImage(attrName, data) {
|
|
1336
1334
|
const paints = data['_' + attrName];
|
|
1337
1335
|
if (paints instanceof Array) {
|
|
1338
|
-
let image, recycleMap, input, url;
|
|
1336
|
+
let paint, image, recycleMap, input, url;
|
|
1339
1337
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
1340
|
-
|
|
1338
|
+
paint = paints[i];
|
|
1339
|
+
image = paint.image;
|
|
1341
1340
|
url = image && image.url;
|
|
1342
1341
|
if (url) {
|
|
1343
1342
|
if (!recycleMap)
|
|
@@ -1352,8 +1351,6 @@ function recycleImage(attrName, data) {
|
|
|
1352
1351
|
}
|
|
1353
1352
|
image.unload(paints[i].loadId, !input.some((item) => item.url === url));
|
|
1354
1353
|
}
|
|
1355
|
-
else
|
|
1356
|
-
paints[i].style = null;
|
|
1357
1354
|
}
|
|
1358
1355
|
}
|
|
1359
1356
|
return recycleMap;
|
|
@@ -1532,7 +1529,7 @@ const { toOffsetOutBounds } = core.BoundsHelper;
|
|
|
1532
1529
|
const offsetOutBounds = {};
|
|
1533
1530
|
function innerShadow(ui, current, shape) {
|
|
1534
1531
|
let copyBounds, spreadScale;
|
|
1535
|
-
const { __nowWorld: nowWorld, __layout
|
|
1532
|
+
const { __nowWorld: nowWorld, __layout } = ui;
|
|
1536
1533
|
const { innerShadow } = ui.__;
|
|
1537
1534
|
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1538
1535
|
const other = current.getSameCanvas();
|