@leafer-draw/worker 1.5.3 → 1.6.1
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/worker.cjs +73 -75
- package/dist/worker.cjs.map +1 -1
- package/dist/worker.esm.js +73 -75
- package/dist/worker.esm.js.map +1 -1
- package/dist/worker.esm.min.js +1 -1
- package/dist/worker.esm.min.js.map +1 -1
- package/dist/worker.js +265 -169
- package/dist/worker.js.map +1 -1
- package/dist/worker.min.cjs +1 -1
- package/dist/worker.min.cjs.map +1 -1
- package/dist/worker.min.js +1 -1
- package/dist/worker.min.js.map +1 -1
- package/dist/worker.module.js +265 -169
- package/dist/worker.module.js.map +1 -1
- package/dist/worker.module.min.js +1 -1
- package/dist/worker.module.min.js.map +1 -1
- package/package.json +9 -7
- package/src/core.ts +86 -0
- package/src/index.ts +2 -2
- package/types/index.d.ts +8 -1
package/dist/worker.cjs
CHANGED
|
@@ -241,7 +241,6 @@ function updateChange(updateList) {
|
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
const { worldBounds } = core.LeafBoundsHelper;
|
|
244
|
-
const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
|
|
245
244
|
class LayoutBlockData {
|
|
246
245
|
constructor(list) {
|
|
247
246
|
this.updatedBounds = new core.Bounds();
|
|
@@ -255,13 +254,7 @@ class LayoutBlockData {
|
|
|
255
254
|
this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
256
255
|
}
|
|
257
256
|
setAfter() {
|
|
258
|
-
|
|
259
|
-
if (list.some(leaf => leaf.noBounds)) {
|
|
260
|
-
this.afterBounds.set(bigBounds);
|
|
261
|
-
}
|
|
262
|
-
else {
|
|
263
|
-
this.afterBounds.setListWithFn(list, worldBounds);
|
|
264
|
-
}
|
|
257
|
+
this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
|
|
265
258
|
this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
|
|
266
259
|
}
|
|
267
260
|
merge(data) {
|
|
@@ -463,6 +456,22 @@ class Renderer {
|
|
|
463
456
|
requestLayout() {
|
|
464
457
|
this.target.emit(core.LayoutEvent.REQUEST);
|
|
465
458
|
}
|
|
459
|
+
checkRender() {
|
|
460
|
+
if (this.running) {
|
|
461
|
+
const { target } = this;
|
|
462
|
+
if (target.isApp) {
|
|
463
|
+
target.emit(core.RenderEvent.CHILD_START, target);
|
|
464
|
+
target.children.forEach(leafer => {
|
|
465
|
+
leafer.renderer.FPS = this.FPS;
|
|
466
|
+
leafer.renderer.checkRender();
|
|
467
|
+
});
|
|
468
|
+
target.emit(core.RenderEvent.CHILD_END, target);
|
|
469
|
+
}
|
|
470
|
+
if (this.changed && this.canvas.view)
|
|
471
|
+
this.render();
|
|
472
|
+
this.target.emit(core.RenderEvent.NEXT);
|
|
473
|
+
}
|
|
474
|
+
}
|
|
466
475
|
render(callback) {
|
|
467
476
|
if (!(this.running && this.canvas.view))
|
|
468
477
|
return this.update();
|
|
@@ -471,8 +480,6 @@ class Renderer {
|
|
|
471
480
|
this.totalBounds = new core.Bounds();
|
|
472
481
|
debug.log(target.innerName, '--->');
|
|
473
482
|
try {
|
|
474
|
-
if (!target.isApp)
|
|
475
|
-
target.app.emit(core.RenderEvent.CHILD_START, target);
|
|
476
483
|
this.emitRender(core.RenderEvent.START);
|
|
477
484
|
this.renderOnce(callback);
|
|
478
485
|
this.emitRender(core.RenderEvent.END, this.totalBounds);
|
|
@@ -540,20 +547,12 @@ class Renderer {
|
|
|
540
547
|
}
|
|
541
548
|
clipRender(block) {
|
|
542
549
|
const t = core.Run.start('PartRender');
|
|
543
|
-
const { canvas } = this;
|
|
544
|
-
const bounds = block.getIntersect(canvas.bounds);
|
|
545
|
-
const includes = block.includes(this.target.__world);
|
|
546
|
-
const realBounds = new core.Bounds(bounds);
|
|
550
|
+
const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new core.Bounds(bounds);
|
|
547
551
|
canvas.save();
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
|
|
553
|
-
canvas.clearWorld(bounds, true);
|
|
554
|
-
canvas.clipWorld(bounds, true);
|
|
555
|
-
}
|
|
556
|
-
this.__render(bounds, includes, realBounds);
|
|
552
|
+
bounds.spread(Renderer.clipSpread).ceil();
|
|
553
|
+
canvas.clearWorld(bounds, true);
|
|
554
|
+
canvas.clipWorld(bounds, true);
|
|
555
|
+
this.__render(bounds, realBounds);
|
|
557
556
|
canvas.restore();
|
|
558
557
|
core.Run.end(t);
|
|
559
558
|
}
|
|
@@ -562,28 +561,22 @@ class Renderer {
|
|
|
562
561
|
const { canvas } = this;
|
|
563
562
|
canvas.save();
|
|
564
563
|
canvas.clear();
|
|
565
|
-
this.__render(canvas.bounds
|
|
564
|
+
this.__render(canvas.bounds);
|
|
566
565
|
canvas.restore();
|
|
567
566
|
core.Run.end(t);
|
|
568
567
|
}
|
|
569
|
-
__render(bounds,
|
|
570
|
-
const
|
|
568
|
+
__render(bounds, realBounds) {
|
|
569
|
+
const { canvas } = this, includes = bounds.includes(this.target.__world), options = includes ? { includes } : { bounds, includes };
|
|
571
570
|
if (this.needFill)
|
|
572
|
-
|
|
571
|
+
canvas.fillWorld(bounds, this.config.fill);
|
|
573
572
|
if (core.Debug.showRepaint)
|
|
574
|
-
|
|
575
|
-
this.target.__render(
|
|
573
|
+
core.Debug.drawRepaint(canvas, bounds);
|
|
574
|
+
this.target.__render(canvas, options);
|
|
576
575
|
this.renderBounds = realBounds = realBounds || bounds;
|
|
577
576
|
this.renderOptions = options;
|
|
578
577
|
this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
if (core.Debug.showBoundsView)
|
|
582
|
-
this.renderBoundsView(options);
|
|
583
|
-
this.canvas.updateRender(realBounds);
|
|
584
|
-
}
|
|
585
|
-
renderHitView(_options) { }
|
|
586
|
-
renderBoundsView(_options) { }
|
|
578
|
+
canvas.updateRender(realBounds);
|
|
579
|
+
}
|
|
587
580
|
addBlock(block) {
|
|
588
581
|
if (!this.updateBlocks)
|
|
589
582
|
this.updateBlocks = [];
|
|
@@ -599,17 +592,16 @@ class Renderer {
|
|
|
599
592
|
}
|
|
600
593
|
}
|
|
601
594
|
__requestRender() {
|
|
602
|
-
|
|
595
|
+
const target = this.target;
|
|
596
|
+
if (this.requestTime || !target)
|
|
603
597
|
return;
|
|
598
|
+
if (target.parentApp)
|
|
599
|
+
return target.parentApp.requestRender(false);
|
|
604
600
|
const requestTime = this.requestTime = Date.now();
|
|
605
601
|
core.Platform.requestRender(() => {
|
|
606
602
|
this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
|
|
607
603
|
this.requestTime = 0;
|
|
608
|
-
|
|
609
|
-
if (this.changed && this.canvas.view)
|
|
610
|
-
this.render();
|
|
611
|
-
this.target.emit(core.RenderEvent.NEXT);
|
|
612
|
-
}
|
|
604
|
+
this.checkRender();
|
|
613
605
|
});
|
|
614
606
|
}
|
|
615
607
|
__onResize(e) {
|
|
@@ -667,6 +659,7 @@ class Renderer {
|
|
|
667
659
|
}
|
|
668
660
|
}
|
|
669
661
|
}
|
|
662
|
+
Renderer.clipSpread = 10;
|
|
670
663
|
|
|
671
664
|
Object.assign(core.Creator, {
|
|
672
665
|
watcher: (target, options) => new Watcher(target, options),
|
|
@@ -1029,9 +1022,11 @@ const tempBox = new core.Bounds();
|
|
|
1029
1022
|
const tempPoint = {};
|
|
1030
1023
|
const tempScaleData = {};
|
|
1031
1024
|
function createData(leafPaint, image, paint, box) {
|
|
1032
|
-
const { blendMode, sync } = paint;
|
|
1025
|
+
const { blendMode, changeful, sync } = paint;
|
|
1033
1026
|
if (blendMode)
|
|
1034
1027
|
leafPaint.blendMode = blendMode;
|
|
1028
|
+
if (changeful)
|
|
1029
|
+
leafPaint.changeful = changeful;
|
|
1035
1030
|
if (sync)
|
|
1036
1031
|
leafPaint.sync = sync;
|
|
1037
1032
|
leafPaint.data = getPatternData(paint, box, image);
|
|
@@ -1296,40 +1291,32 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
1296
1291
|
};
|
|
1297
1292
|
|
|
1298
1293
|
const { abs } = Math;
|
|
1299
|
-
function checkImage(ui, canvas, paint,
|
|
1294
|
+
function checkImage(ui, canvas, paint, allowDraw) {
|
|
1300
1295
|
const { scaleX, scaleY } = core.ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
|
|
1301
|
-
const { pixelRatio } = canvas;
|
|
1302
|
-
if (!
|
|
1296
|
+
const { pixelRatio } = canvas, { data } = paint;
|
|
1297
|
+
if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !draw.Export.running)) {
|
|
1303
1298
|
return false;
|
|
1304
1299
|
}
|
|
1305
1300
|
else {
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
let { width, height } = data;
|
|
1310
|
-
width *= abs(scaleX) * pixelRatio;
|
|
1311
|
-
height *= abs(scaleY) * pixelRatio;
|
|
1312
|
-
if (data.scaleX) {
|
|
1313
|
-
width *= data.scaleX;
|
|
1314
|
-
height *= data.scaleY;
|
|
1315
|
-
}
|
|
1316
|
-
allowPaint = (width * height > core.Platform.image.maxCacheSize) || draw.Export.running;
|
|
1301
|
+
if (allowDraw) {
|
|
1302
|
+
if (data.repeat) {
|
|
1303
|
+
allowDraw = false;
|
|
1317
1304
|
}
|
|
1318
1305
|
else {
|
|
1319
|
-
|
|
1306
|
+
if (!(paint.changeful || core.ResizeEvent.isResizing(ui) || draw.Export.running)) {
|
|
1307
|
+
let { width, height } = data;
|
|
1308
|
+
width *= abs(scaleX) * pixelRatio;
|
|
1309
|
+
height *= abs(scaleY) * pixelRatio;
|
|
1310
|
+
if (data.scaleX) {
|
|
1311
|
+
width *= data.scaleX;
|
|
1312
|
+
height *= data.scaleY;
|
|
1313
|
+
}
|
|
1314
|
+
allowDraw = (width * height > core.Platform.image.maxCacheSize);
|
|
1315
|
+
}
|
|
1320
1316
|
}
|
|
1321
1317
|
}
|
|
1322
|
-
if (
|
|
1323
|
-
canvas
|
|
1324
|
-
ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
|
|
1325
|
-
if (paint.blendMode)
|
|
1326
|
-
canvas.blendMode = paint.blendMode;
|
|
1327
|
-
if (data.opacity)
|
|
1328
|
-
canvas.opacity *= data.opacity;
|
|
1329
|
-
if (data.transform)
|
|
1330
|
-
canvas.transform(data.transform);
|
|
1331
|
-
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1332
|
-
canvas.restore();
|
|
1318
|
+
if (allowDraw) {
|
|
1319
|
+
drawImage(ui, canvas, paint, data);
|
|
1333
1320
|
return true;
|
|
1334
1321
|
}
|
|
1335
1322
|
else {
|
|
@@ -1350,13 +1337,26 @@ function checkImage(ui, canvas, paint, allowPaint) {
|
|
|
1350
1337
|
}
|
|
1351
1338
|
}
|
|
1352
1339
|
}
|
|
1340
|
+
function drawImage(ui, canvas, paint, data) {
|
|
1341
|
+
canvas.save();
|
|
1342
|
+
ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
|
|
1343
|
+
if (paint.blendMode)
|
|
1344
|
+
canvas.blendMode = paint.blendMode;
|
|
1345
|
+
if (data.opacity)
|
|
1346
|
+
canvas.opacity *= data.opacity;
|
|
1347
|
+
if (data.transform)
|
|
1348
|
+
canvas.transform(data.transform);
|
|
1349
|
+
canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
|
|
1350
|
+
canvas.restore();
|
|
1351
|
+
}
|
|
1353
1352
|
|
|
1354
1353
|
function recycleImage(attrName, data) {
|
|
1355
1354
|
const paints = data['_' + attrName];
|
|
1356
1355
|
if (paints instanceof Array) {
|
|
1357
|
-
let image, recycleMap, input, url;
|
|
1356
|
+
let paint, image, recycleMap, input, url;
|
|
1358
1357
|
for (let i = 0, len = paints.length; i < len; i++) {
|
|
1359
|
-
|
|
1358
|
+
paint = paints[i];
|
|
1359
|
+
image = paint.image;
|
|
1360
1360
|
url = image && image.url;
|
|
1361
1361
|
if (url) {
|
|
1362
1362
|
if (!recycleMap)
|
|
@@ -1371,8 +1371,6 @@ function recycleImage(attrName, data) {
|
|
|
1371
1371
|
}
|
|
1372
1372
|
image.unload(paints[i].loadId, !input.some((item) => item.url === url));
|
|
1373
1373
|
}
|
|
1374
|
-
else
|
|
1375
|
-
paints[i].style = null;
|
|
1376
1374
|
}
|
|
1377
1375
|
}
|
|
1378
1376
|
return recycleMap;
|
|
@@ -1551,7 +1549,7 @@ const { toOffsetOutBounds } = core.BoundsHelper;
|
|
|
1551
1549
|
const offsetOutBounds = {};
|
|
1552
1550
|
function innerShadow(ui, current, shape) {
|
|
1553
1551
|
let copyBounds, spreadScale;
|
|
1554
|
-
const { __nowWorld: nowWorld, __layout
|
|
1552
|
+
const { __nowWorld: nowWorld, __layout } = ui;
|
|
1555
1553
|
const { innerShadow } = ui.__;
|
|
1556
1554
|
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
|
|
1557
1555
|
const other = current.getSameCanvas();
|