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