leafer-draw 1.0.6 → 1.0.8
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 +13 -32
- package/dist/web.esm.js +13 -32
- package/dist/web.js +51 -93
- package/dist/web.min.js +1 -1
- package/dist/web.module.js +51 -93
- package/dist/web.module.min.js +1 -1
- package/package.json +2 -2
package/dist/web.module.js
CHANGED
|
@@ -2958,7 +2958,6 @@ class PathCreator {
|
|
|
2958
2958
|
set path(value) { this.__path = value; }
|
|
2959
2959
|
get path() { return this.__path; }
|
|
2960
2960
|
constructor(path) {
|
|
2961
|
-
this.clearPath = this.beginPath;
|
|
2962
2961
|
this.set(path);
|
|
2963
2962
|
}
|
|
2964
2963
|
set(path) {
|
|
@@ -3040,6 +3039,9 @@ class PathCreator {
|
|
|
3040
3039
|
this.paint();
|
|
3041
3040
|
return this;
|
|
3042
3041
|
}
|
|
3042
|
+
clearPath() {
|
|
3043
|
+
return this.beginPath();
|
|
3044
|
+
}
|
|
3043
3045
|
paint() { }
|
|
3044
3046
|
}
|
|
3045
3047
|
|
|
@@ -3635,6 +3637,8 @@ const ImageManager = {
|
|
|
3635
3637
|
else {
|
|
3636
3638
|
if (url.includes('.' + format) || url.includes('.' + FileHelper.upperCaseTypeMap[format]))
|
|
3637
3639
|
return true;
|
|
3640
|
+
else if (format === 'png' && !url.includes('.'))
|
|
3641
|
+
return true;
|
|
3638
3642
|
}
|
|
3639
3643
|
return false;
|
|
3640
3644
|
},
|
|
@@ -4426,13 +4430,10 @@ class LeafLayout {
|
|
|
4426
4430
|
update() {
|
|
4427
4431
|
const { leafer } = this.leaf;
|
|
4428
4432
|
if (leafer) {
|
|
4429
|
-
if (leafer.ready)
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
}
|
|
4433
|
-
else {
|
|
4433
|
+
if (leafer.ready)
|
|
4434
|
+
leafer.watcher.changed && leafer.layouter.layout();
|
|
4435
|
+
else
|
|
4434
4436
|
leafer.start();
|
|
4435
|
-
}
|
|
4436
4437
|
}
|
|
4437
4438
|
else {
|
|
4438
4439
|
let root = this.leaf;
|
|
@@ -5641,11 +5642,10 @@ let Leaf = class Leaf {
|
|
|
5641
5642
|
}
|
|
5642
5643
|
destroy() {
|
|
5643
5644
|
if (!this.destroyed) {
|
|
5644
|
-
|
|
5645
|
-
if (parent)
|
|
5645
|
+
if (this.parent)
|
|
5646
5646
|
this.remove();
|
|
5647
5647
|
if (this.children)
|
|
5648
|
-
this.
|
|
5648
|
+
this.clear();
|
|
5649
5649
|
this.__emitLifeEvent(ChildEvent.DESTROY);
|
|
5650
5650
|
this.__.destroy();
|
|
5651
5651
|
this.__layout.destroy();
|
|
@@ -5959,7 +5959,7 @@ class LeafLevelList {
|
|
|
5959
5959
|
}
|
|
5960
5960
|
}
|
|
5961
5961
|
|
|
5962
|
-
const version = "1.0.
|
|
5962
|
+
const version = "1.0.8";
|
|
5963
5963
|
|
|
5964
5964
|
const debug$5 = Debug.get('LeaferCanvas');
|
|
5965
5965
|
class LeaferCanvas extends LeaferCanvasBase {
|
|
@@ -6860,12 +6860,8 @@ const State = {
|
|
|
6860
6860
|
};
|
|
6861
6861
|
const Transition = {
|
|
6862
6862
|
list: {},
|
|
6863
|
-
register(attrName, fn) {
|
|
6864
|
-
|
|
6865
|
-
},
|
|
6866
|
-
get(attrName) {
|
|
6867
|
-
return Transition.list[attrName];
|
|
6868
|
-
}
|
|
6863
|
+
register(attrName, fn) { Transition.list[attrName] = fn; },
|
|
6864
|
+
get(attrName) { return Transition.list[attrName]; }
|
|
6869
6865
|
};
|
|
6870
6866
|
|
|
6871
6867
|
const { parse, objectToCanvasData } = PathConvert;
|
|
@@ -7311,8 +7307,8 @@ let UI = UI_1 = class UI extends Leaf {
|
|
|
7311
7307
|
pen.set(path = []), this.__drawPathByBox(pen);
|
|
7312
7308
|
return curve ? PathConvert.toCanvasData(path, true) : path;
|
|
7313
7309
|
}
|
|
7314
|
-
getPathString(curve, pathForRender) {
|
|
7315
|
-
return PathConvert.stringify(this.getPath(curve, pathForRender));
|
|
7310
|
+
getPathString(curve, pathForRender, floatLength) {
|
|
7311
|
+
return PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
|
|
7316
7312
|
}
|
|
7317
7313
|
load() {
|
|
7318
7314
|
this.__.__computePaint();
|
|
@@ -7721,11 +7717,11 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7721
7717
|
start() {
|
|
7722
7718
|
clearTimeout(this.__startTimer);
|
|
7723
7719
|
if (!this.running && this.canvas) {
|
|
7720
|
+
this.running = true;
|
|
7724
7721
|
this.ready ? this.emitLeafer(LeaferEvent.RESTART) : this.emitLeafer(LeaferEvent.START);
|
|
7725
7722
|
this.__controllers.forEach(item => item.start());
|
|
7726
7723
|
if (!this.isApp)
|
|
7727
7724
|
this.renderer.render();
|
|
7728
|
-
this.running = true;
|
|
7729
7725
|
}
|
|
7730
7726
|
}
|
|
7731
7727
|
stop() {
|
|
@@ -7831,12 +7827,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7831
7827
|
}
|
|
7832
7828
|
__changeFill(newValue) {
|
|
7833
7829
|
this.config.fill = newValue;
|
|
7834
|
-
if (this.canvas.allowBackgroundColor)
|
|
7830
|
+
if (this.canvas.allowBackgroundColor)
|
|
7835
7831
|
this.canvas.backgroundColor = newValue;
|
|
7836
|
-
|
|
7837
|
-
else {
|
|
7832
|
+
else
|
|
7838
7833
|
this.forceRender();
|
|
7839
|
-
}
|
|
7840
7834
|
}
|
|
7841
7835
|
__onCreated() {
|
|
7842
7836
|
this.created = true;
|
|
@@ -7903,13 +7897,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7903
7897
|
if (bind)
|
|
7904
7898
|
item = item.bind(bind);
|
|
7905
7899
|
this.__viewCompletedWait.push(item);
|
|
7906
|
-
if (this.viewCompleted)
|
|
7900
|
+
if (this.viewCompleted)
|
|
7907
7901
|
this.__checkViewCompleted(false);
|
|
7908
|
-
|
|
7909
|
-
|
|
7910
|
-
if (!this.running)
|
|
7911
|
-
this.start();
|
|
7912
|
-
}
|
|
7902
|
+
else if (!this.running)
|
|
7903
|
+
this.start();
|
|
7913
7904
|
}
|
|
7914
7905
|
nextRender(item, bind, off) {
|
|
7915
7906
|
if (bind)
|
|
@@ -7923,9 +7914,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7923
7914
|
}
|
|
7924
7915
|
}
|
|
7925
7916
|
}
|
|
7926
|
-
else
|
|
7917
|
+
else
|
|
7927
7918
|
list.push(item);
|
|
7928
|
-
}
|
|
7929
7919
|
}
|
|
7930
7920
|
zoom(_zoomType, _padding, _fixedScale) {
|
|
7931
7921
|
return needPlugin('view');
|
|
@@ -7969,10 +7959,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7969
7959
|
this.stop();
|
|
7970
7960
|
this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
|
|
7971
7961
|
this.__removeListenEvents();
|
|
7972
|
-
this.__controllers.forEach(item =>
|
|
7973
|
-
if (!(this.parent && item === this.interaction))
|
|
7974
|
-
item.destroy();
|
|
7975
|
-
});
|
|
7962
|
+
this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
|
|
7976
7963
|
this.__controllers.length = 0;
|
|
7977
7964
|
if (!this.parent) {
|
|
7978
7965
|
if (this.selector)
|
|
@@ -8505,23 +8492,23 @@ let Text = class Text extends UI {
|
|
|
8505
8492
|
}
|
|
8506
8493
|
__updateTextDrawData() {
|
|
8507
8494
|
const data = this.__;
|
|
8508
|
-
data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
|
|
8509
|
-
}
|
|
8510
|
-
__updateBoxBounds() {
|
|
8511
|
-
const data = this.__;
|
|
8512
|
-
const layout = this.__layout;
|
|
8513
8495
|
const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
|
|
8514
|
-
const autoWidth = data.__autoWidth;
|
|
8515
|
-
const autoHeight = data.__autoHeight;
|
|
8516
8496
|
data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
|
|
8517
8497
|
data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
|
|
8518
8498
|
data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
|
|
8519
8499
|
data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
|
|
8520
8500
|
data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
|
|
8521
8501
|
data.__clipText = textOverflow !== 'show' && !data.__autoSize;
|
|
8502
|
+
data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
|
|
8503
|
+
}
|
|
8504
|
+
__updateBoxBounds() {
|
|
8505
|
+
const data = this.__;
|
|
8506
|
+
const layout = this.__layout;
|
|
8507
|
+
const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
|
|
8522
8508
|
this.__updateTextDrawData();
|
|
8523
8509
|
const { bounds } = data.__textDrawData;
|
|
8524
8510
|
const b = layout.boxBounds;
|
|
8511
|
+
console.log(bounds, autoWidth, autoHeight);
|
|
8525
8512
|
if (data.__lineHeight < fontSize)
|
|
8526
8513
|
spread(bounds, fontSize / 2);
|
|
8527
8514
|
if (autoWidth || autoHeight) {
|
|
@@ -8531,20 +8518,15 @@ let Text = class Text extends UI {
|
|
|
8531
8518
|
b.height = autoHeight ? bounds.height : data.height;
|
|
8532
8519
|
if (padding) {
|
|
8533
8520
|
const [top, right, bottom, left] = data.__padding;
|
|
8534
|
-
if (autoWidth)
|
|
8535
|
-
b.x -= left;
|
|
8536
|
-
|
|
8537
|
-
|
|
8538
|
-
if (autoHeight) {
|
|
8539
|
-
b.y -= top;
|
|
8540
|
-
b.height += (bottom + top);
|
|
8541
|
-
}
|
|
8521
|
+
if (autoWidth)
|
|
8522
|
+
b.x -= left, b.width += (right + left);
|
|
8523
|
+
if (autoHeight)
|
|
8524
|
+
b.y -= top, b.height += (bottom + top);
|
|
8542
8525
|
}
|
|
8543
8526
|
this.__updateNaturalSize();
|
|
8544
8527
|
}
|
|
8545
|
-
else
|
|
8528
|
+
else
|
|
8546
8529
|
super.__updateBoxBounds();
|
|
8547
|
-
}
|
|
8548
8530
|
if (italic)
|
|
8549
8531
|
b.width += fontSize * 0.16;
|
|
8550
8532
|
const contentBounds = includes(b, bounds) ? b : bounds;
|
|
@@ -8553,9 +8535,8 @@ let Text = class Text extends UI {
|
|
|
8553
8535
|
layout.renderChanged = true;
|
|
8554
8536
|
setList(data.__textBoxBounds = {}, [b, bounds]);
|
|
8555
8537
|
}
|
|
8556
|
-
else
|
|
8538
|
+
else
|
|
8557
8539
|
data.__textBoxBounds = contentBounds;
|
|
8558
|
-
}
|
|
8559
8540
|
}
|
|
8560
8541
|
__updateRenderSpread() {
|
|
8561
8542
|
let width = super.__updateRenderSpread();
|
|
@@ -8668,11 +8649,7 @@ let Pen = class Pen extends Group {
|
|
|
8668
8649
|
this.add(path);
|
|
8669
8650
|
return this;
|
|
8670
8651
|
}
|
|
8671
|
-
beginPath() {
|
|
8672
|
-
this.__path.length = 0;
|
|
8673
|
-
this.paint();
|
|
8674
|
-
return this;
|
|
8675
|
-
}
|
|
8652
|
+
beginPath() { return this; }
|
|
8676
8653
|
moveTo(_x, _y) { return this; }
|
|
8677
8654
|
lineTo(_x, _y) { return this; }
|
|
8678
8655
|
bezierCurveTo(_x1, _y1, _x2, _y2, _x, _y) { return this; }
|
|
@@ -8699,7 +8676,7 @@ __decorate([
|
|
|
8699
8676
|
penPathType()
|
|
8700
8677
|
], Pen.prototype, "path", void 0);
|
|
8701
8678
|
Pen = __decorate([
|
|
8702
|
-
useModule(PathCreator, ['set', '
|
|
8679
|
+
useModule(PathCreator, ['set', 'path', 'paint']),
|
|
8703
8680
|
registerUI()
|
|
8704
8681
|
], Pen);
|
|
8705
8682
|
function penPathType() {
|
|
@@ -8715,14 +8692,10 @@ function fillText(ui, canvas) {
|
|
|
8715
8692
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
8716
8693
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
8717
8694
|
row = rows[i];
|
|
8718
|
-
if (row.text)
|
|
8695
|
+
if (row.text)
|
|
8719
8696
|
canvas.fillText(row.text, row.x, row.y);
|
|
8720
|
-
|
|
8721
|
-
|
|
8722
|
-
row.data.forEach(charData => {
|
|
8723
|
-
canvas.fillText(charData.char, charData.x, row.y);
|
|
8724
|
-
});
|
|
8725
|
-
}
|
|
8697
|
+
else if (row.data)
|
|
8698
|
+
row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
|
|
8726
8699
|
if (decorationY)
|
|
8727
8700
|
canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
8728
8701
|
}
|
|
@@ -8788,12 +8761,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
|
|
|
8788
8761
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
8789
8762
|
fillText(ui, out);
|
|
8790
8763
|
out.blendMode = 'normal';
|
|
8791
|
-
if (ui.__worldFlipped)
|
|
8764
|
+
if (ui.__worldFlipped)
|
|
8792
8765
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
8793
|
-
|
|
8794
|
-
else {
|
|
8766
|
+
else
|
|
8795
8767
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
8796
|
-
}
|
|
8797
8768
|
out.recycle(ui.__nowWorld);
|
|
8798
8769
|
}
|
|
8799
8770
|
function drawTextStroke(ui, canvas) {
|
|
@@ -8801,14 +8772,10 @@ function drawTextStroke(ui, canvas) {
|
|
|
8801
8772
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
8802
8773
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
8803
8774
|
row = rows[i];
|
|
8804
|
-
if (row.text)
|
|
8775
|
+
if (row.text)
|
|
8805
8776
|
canvas.strokeText(row.text, row.x, row.y);
|
|
8806
|
-
|
|
8807
|
-
|
|
8808
|
-
row.data.forEach(charData => {
|
|
8809
|
-
canvas.strokeText(charData.char, charData.x, row.y);
|
|
8810
|
-
});
|
|
8811
|
-
}
|
|
8777
|
+
else if (row.data)
|
|
8778
|
+
row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
|
|
8812
8779
|
if (decorationY)
|
|
8813
8780
|
canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
8814
8781
|
}
|
|
@@ -8861,12 +8828,10 @@ function stroke(stroke, ui, canvas) {
|
|
|
8861
8828
|
out.stroke();
|
|
8862
8829
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
8863
8830
|
out.clearWorld(ui.__layout.renderBounds);
|
|
8864
|
-
if (ui.__worldFlipped)
|
|
8831
|
+
if (ui.__worldFlipped)
|
|
8865
8832
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
8866
|
-
|
|
8867
|
-
else {
|
|
8833
|
+
else
|
|
8868
8834
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
8869
|
-
}
|
|
8870
8835
|
out.recycle(ui.__nowWorld);
|
|
8871
8836
|
break;
|
|
8872
8837
|
}
|
|
@@ -8901,12 +8866,10 @@ function strokes(strokes, ui, canvas) {
|
|
|
8901
8866
|
drawStrokesStyle(strokes, false, ui, out);
|
|
8902
8867
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
8903
8868
|
out.clearWorld(renderBounds);
|
|
8904
|
-
if (ui.__worldFlipped)
|
|
8869
|
+
if (ui.__worldFlipped)
|
|
8905
8870
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
8906
|
-
|
|
8907
|
-
else {
|
|
8871
|
+
else
|
|
8908
8872
|
canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
|
|
8909
|
-
}
|
|
8910
8873
|
out.recycle(ui.__nowWorld);
|
|
8911
8874
|
break;
|
|
8912
8875
|
}
|
|
@@ -8970,12 +8933,7 @@ function compute(attrName, ui) {
|
|
|
8970
8933
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
8971
8934
|
if (leafPaints.length && leafPaints[0].image)
|
|
8972
8935
|
hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
|
|
8973
|
-
|
|
8974
|
-
data.__pixelFill = hasOpacityPixel;
|
|
8975
|
-
}
|
|
8976
|
-
else {
|
|
8977
|
-
data.__pixelStroke = hasOpacityPixel;
|
|
8978
|
-
}
|
|
8936
|
+
attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
|
|
8979
8937
|
}
|
|
8980
8938
|
function getLeafPaint(attrName, paint, ui) {
|
|
8981
8939
|
if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
|