leafer-draw 1.2.1 → 1.3.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/web.cjs +17 -201
- package/dist/web.esm.js +18 -202
- package/dist/web.esm.min.js +1 -1
- package/dist/web.js +137 -306
- package/dist/web.min.cjs +1 -1
- package/dist/web.min.js +1 -1
- package/dist/web.module.js +137 -306
- package/dist/web.module.min.js +1 -1
- package/package.json +2 -2
package/dist/web.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var core = require('@leafer/core');
|
|
4
4
|
var draw = require('@leafer-ui/draw');
|
|
5
5
|
|
|
6
|
-
const debug$
|
|
6
|
+
const debug$2 = core.Debug.get('LeaferCanvas');
|
|
7
7
|
class LeaferCanvas extends core.LeaferCanvasBase {
|
|
8
8
|
set zIndex(zIndex) {
|
|
9
9
|
const { style } = this.view;
|
|
@@ -75,7 +75,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
else {
|
|
78
|
-
debug$
|
|
78
|
+
debug$2.error(`no id: ${inputView}`);
|
|
79
79
|
this.__createView();
|
|
80
80
|
}
|
|
81
81
|
}
|
|
@@ -93,7 +93,8 @@ class LeaferCanvas extends core.LeaferCanvasBase {
|
|
|
93
93
|
this.view.height = Math.ceil(height * pixelRatio);
|
|
94
94
|
}
|
|
95
95
|
updateClientBounds() {
|
|
96
|
-
|
|
96
|
+
if (this.view.parentElement)
|
|
97
|
+
this.clientBounds = this.view.getBoundingClientRect();
|
|
97
98
|
}
|
|
98
99
|
startAutoLayout(autoBounds, listener) {
|
|
99
100
|
this.resizeListener = listener;
|
|
@@ -112,7 +113,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
|
|
|
112
113
|
}
|
|
113
114
|
else {
|
|
114
115
|
this.checkAutoBounds(this.view);
|
|
115
|
-
debug$
|
|
116
|
+
debug$2.warn('no parent');
|
|
116
117
|
}
|
|
117
118
|
}
|
|
118
119
|
catch (_a) {
|
|
@@ -448,7 +449,7 @@ class LayoutBlockData {
|
|
|
448
449
|
}
|
|
449
450
|
|
|
450
451
|
const { updateAllMatrix, updateAllChange } = core.LeafHelper;
|
|
451
|
-
const debug$
|
|
452
|
+
const debug$1 = core.Debug.get('Layouter');
|
|
452
453
|
class Layouter {
|
|
453
454
|
constructor(target, userConfig) {
|
|
454
455
|
this.totalTimes = 0;
|
|
@@ -483,7 +484,7 @@ class Layouter {
|
|
|
483
484
|
target.emitEvent(new core.LayoutEvent(core.LayoutEvent.END, this.layoutedBlocks, this.times));
|
|
484
485
|
}
|
|
485
486
|
catch (e) {
|
|
486
|
-
debug$
|
|
487
|
+
debug$1.error(e);
|
|
487
488
|
}
|
|
488
489
|
this.layoutedBlocks = null;
|
|
489
490
|
}
|
|
@@ -497,9 +498,9 @@ class Layouter {
|
|
|
497
498
|
}
|
|
498
499
|
layoutOnce() {
|
|
499
500
|
if (this.layouting)
|
|
500
|
-
return debug$
|
|
501
|
+
return debug$1.warn('layouting');
|
|
501
502
|
if (this.times > 3)
|
|
502
|
-
return debug$
|
|
503
|
+
return debug$1.warn('layout max times');
|
|
503
504
|
this.times++;
|
|
504
505
|
this.totalTimes++;
|
|
505
506
|
this.layouting = true;
|
|
@@ -603,7 +604,7 @@ class Layouter {
|
|
|
603
604
|
}
|
|
604
605
|
}
|
|
605
606
|
|
|
606
|
-
const debug
|
|
607
|
+
const debug = core.Debug.get('Renderer');
|
|
607
608
|
class Renderer {
|
|
608
609
|
get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
|
|
609
610
|
constructor(target, canvas, userConfig) {
|
|
@@ -641,7 +642,7 @@ class Renderer {
|
|
|
641
642
|
const { target } = this;
|
|
642
643
|
this.times = 0;
|
|
643
644
|
this.totalBounds = new core.Bounds();
|
|
644
|
-
debug
|
|
645
|
+
debug.log(target.innerName, '--->');
|
|
645
646
|
try {
|
|
646
647
|
if (!target.isApp)
|
|
647
648
|
target.app.emit(core.RenderEvent.CHILD_START, target);
|
|
@@ -652,9 +653,9 @@ class Renderer {
|
|
|
652
653
|
}
|
|
653
654
|
catch (e) {
|
|
654
655
|
this.rendering = false;
|
|
655
|
-
debug
|
|
656
|
+
debug.error(e);
|
|
656
657
|
}
|
|
657
|
-
debug
|
|
658
|
+
debug.log('-------------|');
|
|
658
659
|
}
|
|
659
660
|
renderAgain() {
|
|
660
661
|
if (this.rendering) {
|
|
@@ -666,9 +667,9 @@ class Renderer {
|
|
|
666
667
|
}
|
|
667
668
|
renderOnce(callback) {
|
|
668
669
|
if (this.rendering)
|
|
669
|
-
return debug
|
|
670
|
+
return debug.warn('rendering');
|
|
670
671
|
if (this.times > 3)
|
|
671
|
-
return debug
|
|
672
|
+
return debug.warn('render max times');
|
|
672
673
|
this.times++;
|
|
673
674
|
this.totalTimes++;
|
|
674
675
|
this.rendering = true;
|
|
@@ -705,7 +706,7 @@ class Renderer {
|
|
|
705
706
|
partRender() {
|
|
706
707
|
const { canvas, updateBlocks: list } = this;
|
|
707
708
|
if (!list)
|
|
708
|
-
return debug
|
|
709
|
+
return debug.warn('PartRender: need update attr');
|
|
709
710
|
this.mergeBlocks();
|
|
710
711
|
list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
|
|
711
712
|
this.clipRender(block); });
|
|
@@ -808,7 +809,7 @@ class Renderer {
|
|
|
808
809
|
empty = (!leaf.__world.width || !leaf.__world.height);
|
|
809
810
|
if (empty) {
|
|
810
811
|
if (!leaf.isLeafer)
|
|
811
|
-
debug
|
|
812
|
+
debug.tip(leaf.innerName, ': empty');
|
|
812
813
|
empty = (!leaf.isBranch || leaf.isBranchLeaf);
|
|
813
814
|
}
|
|
814
815
|
return empty;
|
|
@@ -2360,197 +2361,12 @@ const ColorConvertModule = {
|
|
|
2360
2361
|
string
|
|
2361
2362
|
};
|
|
2362
2363
|
|
|
2363
|
-
const { setPoint, addPoint, toBounds } = core.TwoPointBoundsHelper;
|
|
2364
|
-
function getTrimBounds(canvas) {
|
|
2365
|
-
const { width, height } = canvas.view;
|
|
2366
|
-
const { data } = canvas.context.getImageData(0, 0, width, height);
|
|
2367
|
-
let x, y, pointBounds, index = 0;
|
|
2368
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
2369
|
-
if (data[i + 3] !== 0) {
|
|
2370
|
-
x = index % width;
|
|
2371
|
-
y = (index - x) / width;
|
|
2372
|
-
pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
|
|
2373
|
-
}
|
|
2374
|
-
index++;
|
|
2375
|
-
}
|
|
2376
|
-
const bounds = new core.Bounds();
|
|
2377
|
-
toBounds(pointBounds, bounds);
|
|
2378
|
-
return bounds.scale(1 / canvas.pixelRatio).ceil();
|
|
2379
|
-
}
|
|
2380
|
-
|
|
2381
|
-
const ExportModule = {
|
|
2382
|
-
export(leaf, filename, options) {
|
|
2383
|
-
this.running = true;
|
|
2384
|
-
const fileType = core.FileHelper.fileType(filename);
|
|
2385
|
-
const isDownload = filename.includes('.');
|
|
2386
|
-
options = core.FileHelper.getExportOptions(options);
|
|
2387
|
-
return addTask((success) => new Promise((resolve) => {
|
|
2388
|
-
const over = (result) => {
|
|
2389
|
-
success(result);
|
|
2390
|
-
resolve();
|
|
2391
|
-
this.running = false;
|
|
2392
|
-
};
|
|
2393
|
-
const { toURL } = core.Platform;
|
|
2394
|
-
const { download } = core.Platform.origin;
|
|
2395
|
-
if (fileType === 'json') {
|
|
2396
|
-
isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
|
|
2397
|
-
return over({ data: isDownload ? true : leaf.toJSON(options.json) });
|
|
2398
|
-
}
|
|
2399
|
-
if (fileType === 'svg') {
|
|
2400
|
-
isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
|
|
2401
|
-
return over({ data: isDownload ? true : leaf.toSVG() });
|
|
2402
|
-
}
|
|
2403
|
-
const { leafer } = leaf;
|
|
2404
|
-
if (leafer) {
|
|
2405
|
-
checkLazy(leaf);
|
|
2406
|
-
leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
|
|
2407
|
-
let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
|
|
2408
|
-
const { worldTransform, isLeafer, isFrame } = leaf;
|
|
2409
|
-
const { slice, trim, onCanvas } = options;
|
|
2410
|
-
const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
|
|
2411
|
-
const contextSettings = options.contextSettings || leafer.config.contextSettings;
|
|
2412
|
-
const screenshot = options.screenshot || leaf.isApp;
|
|
2413
|
-
const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
|
|
2414
|
-
const needFill = core.FileHelper.isOpaqueImage(filename) || fill, matrix = new core.Matrix();
|
|
2415
|
-
if (screenshot) {
|
|
2416
|
-
renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
|
|
2417
|
-
}
|
|
2418
|
-
else {
|
|
2419
|
-
let relative = options.relative || (isLeafer ? 'inner' : 'local');
|
|
2420
|
-
scaleX = worldTransform.scaleX;
|
|
2421
|
-
scaleY = worldTransform.scaleY;
|
|
2422
|
-
switch (relative) {
|
|
2423
|
-
case 'inner':
|
|
2424
|
-
matrix.set(worldTransform);
|
|
2425
|
-
break;
|
|
2426
|
-
case 'local':
|
|
2427
|
-
matrix.set(worldTransform).divide(leaf.localTransform);
|
|
2428
|
-
scaleX /= leaf.scaleX;
|
|
2429
|
-
scaleY /= leaf.scaleY;
|
|
2430
|
-
break;
|
|
2431
|
-
case 'world':
|
|
2432
|
-
scaleX = 1;
|
|
2433
|
-
scaleY = 1;
|
|
2434
|
-
break;
|
|
2435
|
-
case 'page':
|
|
2436
|
-
relative = leaf.leafer;
|
|
2437
|
-
default:
|
|
2438
|
-
matrix.set(worldTransform).divide(leaf.getTransform(relative));
|
|
2439
|
-
const l = relative.worldTransform;
|
|
2440
|
-
scaleX /= scaleX / l.scaleX;
|
|
2441
|
-
scaleY /= scaleY / l.scaleY;
|
|
2442
|
-
}
|
|
2443
|
-
renderBounds = leaf.getBounds('render', relative);
|
|
2444
|
-
}
|
|
2445
|
-
const scaleData = { scaleX: 1, scaleY: 1 };
|
|
2446
|
-
core.MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
|
|
2447
|
-
let pixelRatio = options.pixelRatio || 1;
|
|
2448
|
-
if (leaf.isApp) {
|
|
2449
|
-
scaleData.scaleX *= pixelRatio;
|
|
2450
|
-
scaleData.scaleY *= pixelRatio;
|
|
2451
|
-
pixelRatio = leaf.app.pixelRatio;
|
|
2452
|
-
}
|
|
2453
|
-
const { x, y, width, height } = new core.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
|
|
2454
|
-
const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
|
|
2455
|
-
let canvas = core.Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
|
|
2456
|
-
let sliceLeaf;
|
|
2457
|
-
if (slice) {
|
|
2458
|
-
sliceLeaf = leaf;
|
|
2459
|
-
sliceLeaf.__worldOpacity = 0;
|
|
2460
|
-
leaf = leafer;
|
|
2461
|
-
renderOptions.bounds = canvas.bounds;
|
|
2462
|
-
}
|
|
2463
|
-
canvas.save();
|
|
2464
|
-
if (isFrame && fill !== undefined) {
|
|
2465
|
-
const oldFill = leaf.get('fill');
|
|
2466
|
-
leaf.fill = '';
|
|
2467
|
-
leaf.__render(canvas, renderOptions);
|
|
2468
|
-
leaf.fill = oldFill;
|
|
2469
|
-
}
|
|
2470
|
-
else {
|
|
2471
|
-
leaf.__render(canvas, renderOptions);
|
|
2472
|
-
}
|
|
2473
|
-
canvas.restore();
|
|
2474
|
-
if (sliceLeaf)
|
|
2475
|
-
sliceLeaf.__updateWorldOpacity();
|
|
2476
|
-
if (trim) {
|
|
2477
|
-
trimBounds = getTrimBounds(canvas);
|
|
2478
|
-
const old = canvas, { width, height } = trimBounds;
|
|
2479
|
-
const config = { x: 0, y: 0, width, height, pixelRatio };
|
|
2480
|
-
canvas = core.Creator.canvas(config);
|
|
2481
|
-
canvas.copyWorld(old, trimBounds, config);
|
|
2482
|
-
}
|
|
2483
|
-
if (needFill)
|
|
2484
|
-
canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
|
|
2485
|
-
if (onCanvas)
|
|
2486
|
-
onCanvas(canvas);
|
|
2487
|
-
const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
|
|
2488
|
-
over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
|
|
2489
|
-
}));
|
|
2490
|
-
}
|
|
2491
|
-
else {
|
|
2492
|
-
over({ data: false });
|
|
2493
|
-
}
|
|
2494
|
-
}));
|
|
2495
|
-
}
|
|
2496
|
-
};
|
|
2497
|
-
let tasker;
|
|
2498
|
-
function addTask(task) {
|
|
2499
|
-
if (!tasker)
|
|
2500
|
-
tasker = new core.TaskProcessor();
|
|
2501
|
-
return new Promise((resolve) => {
|
|
2502
|
-
tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
|
|
2503
|
-
});
|
|
2504
|
-
}
|
|
2505
|
-
function checkLazy(leaf) {
|
|
2506
|
-
if (leaf.__.__needComputePaint)
|
|
2507
|
-
leaf.__.__computePaint();
|
|
2508
|
-
if (leaf.isBranch)
|
|
2509
|
-
leaf.children.forEach(child => checkLazy(child));
|
|
2510
|
-
}
|
|
2511
|
-
|
|
2512
|
-
const canvas = core.LeaferCanvasBase.prototype;
|
|
2513
|
-
const debug = core.Debug.get('@leafer-ui/export');
|
|
2514
|
-
canvas.export = function (filename, options) {
|
|
2515
|
-
const { quality, blob } = core.FileHelper.getExportOptions(options);
|
|
2516
|
-
if (filename.includes('.'))
|
|
2517
|
-
return this.saveAs(filename, quality);
|
|
2518
|
-
else if (blob)
|
|
2519
|
-
return this.toBlob(filename, quality);
|
|
2520
|
-
else
|
|
2521
|
-
return this.toDataURL(filename, quality);
|
|
2522
|
-
};
|
|
2523
|
-
canvas.toBlob = function (type, quality) {
|
|
2524
|
-
return new Promise((resolve) => {
|
|
2525
|
-
core.Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
|
|
2526
|
-
resolve(blob);
|
|
2527
|
-
}).catch((e) => {
|
|
2528
|
-
debug.error(e);
|
|
2529
|
-
resolve(null);
|
|
2530
|
-
});
|
|
2531
|
-
});
|
|
2532
|
-
};
|
|
2533
|
-
canvas.toDataURL = function (type, quality) {
|
|
2534
|
-
return core.Platform.origin.canvasToDataURL(this.view, type, quality);
|
|
2535
|
-
};
|
|
2536
|
-
canvas.saveAs = function (filename, quality) {
|
|
2537
|
-
return new Promise((resolve) => {
|
|
2538
|
-
core.Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
|
|
2539
|
-
resolve(true);
|
|
2540
|
-
}).catch((e) => {
|
|
2541
|
-
debug.error(e);
|
|
2542
|
-
resolve(false);
|
|
2543
|
-
});
|
|
2544
|
-
});
|
|
2545
|
-
};
|
|
2546
|
-
|
|
2547
2364
|
Object.assign(draw.TextConvert, TextConvertModule);
|
|
2548
2365
|
Object.assign(draw.ColorConvert, ColorConvertModule);
|
|
2549
2366
|
Object.assign(draw.Paint, PaintModule);
|
|
2550
2367
|
Object.assign(draw.PaintImage, PaintImageModule);
|
|
2551
2368
|
Object.assign(draw.PaintGradient, PaintGradientModule);
|
|
2552
2369
|
Object.assign(draw.Effect, EffectModule);
|
|
2553
|
-
Object.assign(draw.Export, ExportModule);
|
|
2554
2370
|
|
|
2555
2371
|
useCanvas();
|
|
2556
2372
|
|
package/dist/web.esm.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, defineKey, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4
|
|
1
|
+
import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, defineKey, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4 } from '@leafer/core';
|
|
2
2
|
export * from '@leafer/core';
|
|
3
3
|
export { LeaferImage } from '@leafer/core';
|
|
4
4
|
import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
|
|
5
5
|
export * from '@leafer-ui/draw';
|
|
6
6
|
|
|
7
|
-
const debug$
|
|
7
|
+
const debug$2 = Debug.get('LeaferCanvas');
|
|
8
8
|
class LeaferCanvas extends LeaferCanvasBase {
|
|
9
9
|
set zIndex(zIndex) {
|
|
10
10
|
const { style } = this.view;
|
|
@@ -76,7 +76,7 @@ class LeaferCanvas extends LeaferCanvasBase {
|
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
else {
|
|
79
|
-
debug$
|
|
79
|
+
debug$2.error(`no id: ${inputView}`);
|
|
80
80
|
this.__createView();
|
|
81
81
|
}
|
|
82
82
|
}
|
|
@@ -94,7 +94,8 @@ class LeaferCanvas extends LeaferCanvasBase {
|
|
|
94
94
|
this.view.height = Math.ceil(height * pixelRatio);
|
|
95
95
|
}
|
|
96
96
|
updateClientBounds() {
|
|
97
|
-
|
|
97
|
+
if (this.view.parentElement)
|
|
98
|
+
this.clientBounds = this.view.getBoundingClientRect();
|
|
98
99
|
}
|
|
99
100
|
startAutoLayout(autoBounds, listener) {
|
|
100
101
|
this.resizeListener = listener;
|
|
@@ -113,7 +114,7 @@ class LeaferCanvas extends LeaferCanvasBase {
|
|
|
113
114
|
}
|
|
114
115
|
else {
|
|
115
116
|
this.checkAutoBounds(this.view);
|
|
116
|
-
debug$
|
|
117
|
+
debug$2.warn('no parent');
|
|
117
118
|
}
|
|
118
119
|
}
|
|
119
120
|
catch (_a) {
|
|
@@ -449,7 +450,7 @@ class LayoutBlockData {
|
|
|
449
450
|
}
|
|
450
451
|
|
|
451
452
|
const { updateAllMatrix, updateAllChange } = LeafHelper;
|
|
452
|
-
const debug$
|
|
453
|
+
const debug$1 = Debug.get('Layouter');
|
|
453
454
|
class Layouter {
|
|
454
455
|
constructor(target, userConfig) {
|
|
455
456
|
this.totalTimes = 0;
|
|
@@ -484,7 +485,7 @@ class Layouter {
|
|
|
484
485
|
target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
|
|
485
486
|
}
|
|
486
487
|
catch (e) {
|
|
487
|
-
debug$
|
|
488
|
+
debug$1.error(e);
|
|
488
489
|
}
|
|
489
490
|
this.layoutedBlocks = null;
|
|
490
491
|
}
|
|
@@ -498,9 +499,9 @@ class Layouter {
|
|
|
498
499
|
}
|
|
499
500
|
layoutOnce() {
|
|
500
501
|
if (this.layouting)
|
|
501
|
-
return debug$
|
|
502
|
+
return debug$1.warn('layouting');
|
|
502
503
|
if (this.times > 3)
|
|
503
|
-
return debug$
|
|
504
|
+
return debug$1.warn('layout max times');
|
|
504
505
|
this.times++;
|
|
505
506
|
this.totalTimes++;
|
|
506
507
|
this.layouting = true;
|
|
@@ -604,7 +605,7 @@ class Layouter {
|
|
|
604
605
|
}
|
|
605
606
|
}
|
|
606
607
|
|
|
607
|
-
const debug
|
|
608
|
+
const debug = Debug.get('Renderer');
|
|
608
609
|
class Renderer {
|
|
609
610
|
get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
|
|
610
611
|
constructor(target, canvas, userConfig) {
|
|
@@ -642,7 +643,7 @@ class Renderer {
|
|
|
642
643
|
const { target } = this;
|
|
643
644
|
this.times = 0;
|
|
644
645
|
this.totalBounds = new Bounds();
|
|
645
|
-
debug
|
|
646
|
+
debug.log(target.innerName, '--->');
|
|
646
647
|
try {
|
|
647
648
|
if (!target.isApp)
|
|
648
649
|
target.app.emit(RenderEvent.CHILD_START, target);
|
|
@@ -653,9 +654,9 @@ class Renderer {
|
|
|
653
654
|
}
|
|
654
655
|
catch (e) {
|
|
655
656
|
this.rendering = false;
|
|
656
|
-
debug
|
|
657
|
+
debug.error(e);
|
|
657
658
|
}
|
|
658
|
-
debug
|
|
659
|
+
debug.log('-------------|');
|
|
659
660
|
}
|
|
660
661
|
renderAgain() {
|
|
661
662
|
if (this.rendering) {
|
|
@@ -667,9 +668,9 @@ class Renderer {
|
|
|
667
668
|
}
|
|
668
669
|
renderOnce(callback) {
|
|
669
670
|
if (this.rendering)
|
|
670
|
-
return debug
|
|
671
|
+
return debug.warn('rendering');
|
|
671
672
|
if (this.times > 3)
|
|
672
|
-
return debug
|
|
673
|
+
return debug.warn('render max times');
|
|
673
674
|
this.times++;
|
|
674
675
|
this.totalTimes++;
|
|
675
676
|
this.rendering = true;
|
|
@@ -706,7 +707,7 @@ class Renderer {
|
|
|
706
707
|
partRender() {
|
|
707
708
|
const { canvas, updateBlocks: list } = this;
|
|
708
709
|
if (!list)
|
|
709
|
-
return debug
|
|
710
|
+
return debug.warn('PartRender: need update attr');
|
|
710
711
|
this.mergeBlocks();
|
|
711
712
|
list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
|
|
712
713
|
this.clipRender(block); });
|
|
@@ -809,7 +810,7 @@ class Renderer {
|
|
|
809
810
|
empty = (!leaf.__world.width || !leaf.__world.height);
|
|
810
811
|
if (empty) {
|
|
811
812
|
if (!leaf.isLeafer)
|
|
812
|
-
debug
|
|
813
|
+
debug.tip(leaf.innerName, ': empty');
|
|
813
814
|
empty = (!leaf.isBranch || leaf.isBranchLeaf);
|
|
814
815
|
}
|
|
815
816
|
return empty;
|
|
@@ -2361,197 +2362,12 @@ const ColorConvertModule = {
|
|
|
2361
2362
|
string
|
|
2362
2363
|
};
|
|
2363
2364
|
|
|
2364
|
-
const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper;
|
|
2365
|
-
function getTrimBounds(canvas) {
|
|
2366
|
-
const { width, height } = canvas.view;
|
|
2367
|
-
const { data } = canvas.context.getImageData(0, 0, width, height);
|
|
2368
|
-
let x, y, pointBounds, index = 0;
|
|
2369
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
2370
|
-
if (data[i + 3] !== 0) {
|
|
2371
|
-
x = index % width;
|
|
2372
|
-
y = (index - x) / width;
|
|
2373
|
-
pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
|
|
2374
|
-
}
|
|
2375
|
-
index++;
|
|
2376
|
-
}
|
|
2377
|
-
const bounds = new Bounds();
|
|
2378
|
-
toBounds(pointBounds, bounds);
|
|
2379
|
-
return bounds.scale(1 / canvas.pixelRatio).ceil();
|
|
2380
|
-
}
|
|
2381
|
-
|
|
2382
|
-
const ExportModule = {
|
|
2383
|
-
export(leaf, filename, options) {
|
|
2384
|
-
this.running = true;
|
|
2385
|
-
const fileType = FileHelper.fileType(filename);
|
|
2386
|
-
const isDownload = filename.includes('.');
|
|
2387
|
-
options = FileHelper.getExportOptions(options);
|
|
2388
|
-
return addTask((success) => new Promise((resolve) => {
|
|
2389
|
-
const over = (result) => {
|
|
2390
|
-
success(result);
|
|
2391
|
-
resolve();
|
|
2392
|
-
this.running = false;
|
|
2393
|
-
};
|
|
2394
|
-
const { toURL } = Platform;
|
|
2395
|
-
const { download } = Platform.origin;
|
|
2396
|
-
if (fileType === 'json') {
|
|
2397
|
-
isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
|
|
2398
|
-
return over({ data: isDownload ? true : leaf.toJSON(options.json) });
|
|
2399
|
-
}
|
|
2400
|
-
if (fileType === 'svg') {
|
|
2401
|
-
isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
|
|
2402
|
-
return over({ data: isDownload ? true : leaf.toSVG() });
|
|
2403
|
-
}
|
|
2404
|
-
const { leafer } = leaf;
|
|
2405
|
-
if (leafer) {
|
|
2406
|
-
checkLazy(leaf);
|
|
2407
|
-
leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
|
|
2408
|
-
let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
|
|
2409
|
-
const { worldTransform, isLeafer, isFrame } = leaf;
|
|
2410
|
-
const { slice, trim, onCanvas } = options;
|
|
2411
|
-
const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
|
|
2412
|
-
const contextSettings = options.contextSettings || leafer.config.contextSettings;
|
|
2413
|
-
const screenshot = options.screenshot || leaf.isApp;
|
|
2414
|
-
const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
|
|
2415
|
-
const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
|
|
2416
|
-
if (screenshot) {
|
|
2417
|
-
renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
|
|
2418
|
-
}
|
|
2419
|
-
else {
|
|
2420
|
-
let relative = options.relative || (isLeafer ? 'inner' : 'local');
|
|
2421
|
-
scaleX = worldTransform.scaleX;
|
|
2422
|
-
scaleY = worldTransform.scaleY;
|
|
2423
|
-
switch (relative) {
|
|
2424
|
-
case 'inner':
|
|
2425
|
-
matrix.set(worldTransform);
|
|
2426
|
-
break;
|
|
2427
|
-
case 'local':
|
|
2428
|
-
matrix.set(worldTransform).divide(leaf.localTransform);
|
|
2429
|
-
scaleX /= leaf.scaleX;
|
|
2430
|
-
scaleY /= leaf.scaleY;
|
|
2431
|
-
break;
|
|
2432
|
-
case 'world':
|
|
2433
|
-
scaleX = 1;
|
|
2434
|
-
scaleY = 1;
|
|
2435
|
-
break;
|
|
2436
|
-
case 'page':
|
|
2437
|
-
relative = leaf.leafer;
|
|
2438
|
-
default:
|
|
2439
|
-
matrix.set(worldTransform).divide(leaf.getTransform(relative));
|
|
2440
|
-
const l = relative.worldTransform;
|
|
2441
|
-
scaleX /= scaleX / l.scaleX;
|
|
2442
|
-
scaleY /= scaleY / l.scaleY;
|
|
2443
|
-
}
|
|
2444
|
-
renderBounds = leaf.getBounds('render', relative);
|
|
2445
|
-
}
|
|
2446
|
-
const scaleData = { scaleX: 1, scaleY: 1 };
|
|
2447
|
-
MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
|
|
2448
|
-
let pixelRatio = options.pixelRatio || 1;
|
|
2449
|
-
if (leaf.isApp) {
|
|
2450
|
-
scaleData.scaleX *= pixelRatio;
|
|
2451
|
-
scaleData.scaleY *= pixelRatio;
|
|
2452
|
-
pixelRatio = leaf.app.pixelRatio;
|
|
2453
|
-
}
|
|
2454
|
-
const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
|
|
2455
|
-
const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
|
|
2456
|
-
let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
|
|
2457
|
-
let sliceLeaf;
|
|
2458
|
-
if (slice) {
|
|
2459
|
-
sliceLeaf = leaf;
|
|
2460
|
-
sliceLeaf.__worldOpacity = 0;
|
|
2461
|
-
leaf = leafer;
|
|
2462
|
-
renderOptions.bounds = canvas.bounds;
|
|
2463
|
-
}
|
|
2464
|
-
canvas.save();
|
|
2465
|
-
if (isFrame && fill !== undefined) {
|
|
2466
|
-
const oldFill = leaf.get('fill');
|
|
2467
|
-
leaf.fill = '';
|
|
2468
|
-
leaf.__render(canvas, renderOptions);
|
|
2469
|
-
leaf.fill = oldFill;
|
|
2470
|
-
}
|
|
2471
|
-
else {
|
|
2472
|
-
leaf.__render(canvas, renderOptions);
|
|
2473
|
-
}
|
|
2474
|
-
canvas.restore();
|
|
2475
|
-
if (sliceLeaf)
|
|
2476
|
-
sliceLeaf.__updateWorldOpacity();
|
|
2477
|
-
if (trim) {
|
|
2478
|
-
trimBounds = getTrimBounds(canvas);
|
|
2479
|
-
const old = canvas, { width, height } = trimBounds;
|
|
2480
|
-
const config = { x: 0, y: 0, width, height, pixelRatio };
|
|
2481
|
-
canvas = Creator.canvas(config);
|
|
2482
|
-
canvas.copyWorld(old, trimBounds, config);
|
|
2483
|
-
}
|
|
2484
|
-
if (needFill)
|
|
2485
|
-
canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
|
|
2486
|
-
if (onCanvas)
|
|
2487
|
-
onCanvas(canvas);
|
|
2488
|
-
const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
|
|
2489
|
-
over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
|
|
2490
|
-
}));
|
|
2491
|
-
}
|
|
2492
|
-
else {
|
|
2493
|
-
over({ data: false });
|
|
2494
|
-
}
|
|
2495
|
-
}));
|
|
2496
|
-
}
|
|
2497
|
-
};
|
|
2498
|
-
let tasker;
|
|
2499
|
-
function addTask(task) {
|
|
2500
|
-
if (!tasker)
|
|
2501
|
-
tasker = new TaskProcessor();
|
|
2502
|
-
return new Promise((resolve) => {
|
|
2503
|
-
tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
|
|
2504
|
-
});
|
|
2505
|
-
}
|
|
2506
|
-
function checkLazy(leaf) {
|
|
2507
|
-
if (leaf.__.__needComputePaint)
|
|
2508
|
-
leaf.__.__computePaint();
|
|
2509
|
-
if (leaf.isBranch)
|
|
2510
|
-
leaf.children.forEach(child => checkLazy(child));
|
|
2511
|
-
}
|
|
2512
|
-
|
|
2513
|
-
const canvas = LeaferCanvasBase.prototype;
|
|
2514
|
-
const debug = Debug.get('@leafer-ui/export');
|
|
2515
|
-
canvas.export = function (filename, options) {
|
|
2516
|
-
const { quality, blob } = FileHelper.getExportOptions(options);
|
|
2517
|
-
if (filename.includes('.'))
|
|
2518
|
-
return this.saveAs(filename, quality);
|
|
2519
|
-
else if (blob)
|
|
2520
|
-
return this.toBlob(filename, quality);
|
|
2521
|
-
else
|
|
2522
|
-
return this.toDataURL(filename, quality);
|
|
2523
|
-
};
|
|
2524
|
-
canvas.toBlob = function (type, quality) {
|
|
2525
|
-
return new Promise((resolve) => {
|
|
2526
|
-
Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
|
|
2527
|
-
resolve(blob);
|
|
2528
|
-
}).catch((e) => {
|
|
2529
|
-
debug.error(e);
|
|
2530
|
-
resolve(null);
|
|
2531
|
-
});
|
|
2532
|
-
});
|
|
2533
|
-
};
|
|
2534
|
-
canvas.toDataURL = function (type, quality) {
|
|
2535
|
-
return Platform.origin.canvasToDataURL(this.view, type, quality);
|
|
2536
|
-
};
|
|
2537
|
-
canvas.saveAs = function (filename, quality) {
|
|
2538
|
-
return new Promise((resolve) => {
|
|
2539
|
-
Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
|
|
2540
|
-
resolve(true);
|
|
2541
|
-
}).catch((e) => {
|
|
2542
|
-
debug.error(e);
|
|
2543
|
-
resolve(false);
|
|
2544
|
-
});
|
|
2545
|
-
});
|
|
2546
|
-
};
|
|
2547
|
-
|
|
2548
2365
|
Object.assign(TextConvert, TextConvertModule);
|
|
2549
2366
|
Object.assign(ColorConvert, ColorConvertModule);
|
|
2550
2367
|
Object.assign(Paint, PaintModule);
|
|
2551
2368
|
Object.assign(PaintImage, PaintImageModule);
|
|
2552
2369
|
Object.assign(PaintGradient, PaintGradientModule);
|
|
2553
2370
|
Object.assign(Effect, EffectModule);
|
|
2554
|
-
Object.assign(Export, ExportModule);
|
|
2555
2371
|
|
|
2556
2372
|
useCanvas();
|
|
2557
2373
|
|