leafer-draw 1.0.7 → 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 +47 -85
- package/dist/web.min.js +1 -1
- package/dist/web.module.js +47 -85
- 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
|
},
|
|
@@ -5638,11 +5642,10 @@ let Leaf = class Leaf {
|
|
|
5638
5642
|
}
|
|
5639
5643
|
destroy() {
|
|
5640
5644
|
if (!this.destroyed) {
|
|
5641
|
-
|
|
5642
|
-
if (parent)
|
|
5645
|
+
if (this.parent)
|
|
5643
5646
|
this.remove();
|
|
5644
5647
|
if (this.children)
|
|
5645
|
-
this.
|
|
5648
|
+
this.clear();
|
|
5646
5649
|
this.__emitLifeEvent(ChildEvent.DESTROY);
|
|
5647
5650
|
this.__.destroy();
|
|
5648
5651
|
this.__layout.destroy();
|
|
@@ -5956,7 +5959,7 @@ class LeafLevelList {
|
|
|
5956
5959
|
}
|
|
5957
5960
|
}
|
|
5958
5961
|
|
|
5959
|
-
const version = "1.0.
|
|
5962
|
+
const version = "1.0.8";
|
|
5960
5963
|
|
|
5961
5964
|
const debug$5 = Debug.get('LeaferCanvas');
|
|
5962
5965
|
class LeaferCanvas extends LeaferCanvasBase {
|
|
@@ -6857,12 +6860,8 @@ const State = {
|
|
|
6857
6860
|
};
|
|
6858
6861
|
const Transition = {
|
|
6859
6862
|
list: {},
|
|
6860
|
-
register(attrName, fn) {
|
|
6861
|
-
|
|
6862
|
-
},
|
|
6863
|
-
get(attrName) {
|
|
6864
|
-
return Transition.list[attrName];
|
|
6865
|
-
}
|
|
6863
|
+
register(attrName, fn) { Transition.list[attrName] = fn; },
|
|
6864
|
+
get(attrName) { return Transition.list[attrName]; }
|
|
6866
6865
|
};
|
|
6867
6866
|
|
|
6868
6867
|
const { parse, objectToCanvasData } = PathConvert;
|
|
@@ -7308,8 +7307,8 @@ let UI = UI_1 = class UI extends Leaf {
|
|
|
7308
7307
|
pen.set(path = []), this.__drawPathByBox(pen);
|
|
7309
7308
|
return curve ? PathConvert.toCanvasData(path, true) : path;
|
|
7310
7309
|
}
|
|
7311
|
-
getPathString(curve, pathForRender) {
|
|
7312
|
-
return PathConvert.stringify(this.getPath(curve, pathForRender));
|
|
7310
|
+
getPathString(curve, pathForRender, floatLength) {
|
|
7311
|
+
return PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
|
|
7313
7312
|
}
|
|
7314
7313
|
load() {
|
|
7315
7314
|
this.__.__computePaint();
|
|
@@ -7718,11 +7717,11 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7718
7717
|
start() {
|
|
7719
7718
|
clearTimeout(this.__startTimer);
|
|
7720
7719
|
if (!this.running && this.canvas) {
|
|
7720
|
+
this.running = true;
|
|
7721
7721
|
this.ready ? this.emitLeafer(LeaferEvent.RESTART) : this.emitLeafer(LeaferEvent.START);
|
|
7722
7722
|
this.__controllers.forEach(item => item.start());
|
|
7723
7723
|
if (!this.isApp)
|
|
7724
7724
|
this.renderer.render();
|
|
7725
|
-
this.running = true;
|
|
7726
7725
|
}
|
|
7727
7726
|
}
|
|
7728
7727
|
stop() {
|
|
@@ -7828,12 +7827,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7828
7827
|
}
|
|
7829
7828
|
__changeFill(newValue) {
|
|
7830
7829
|
this.config.fill = newValue;
|
|
7831
|
-
if (this.canvas.allowBackgroundColor)
|
|
7830
|
+
if (this.canvas.allowBackgroundColor)
|
|
7832
7831
|
this.canvas.backgroundColor = newValue;
|
|
7833
|
-
|
|
7834
|
-
else {
|
|
7832
|
+
else
|
|
7835
7833
|
this.forceRender();
|
|
7836
|
-
}
|
|
7837
7834
|
}
|
|
7838
7835
|
__onCreated() {
|
|
7839
7836
|
this.created = true;
|
|
@@ -7900,13 +7897,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7900
7897
|
if (bind)
|
|
7901
7898
|
item = item.bind(bind);
|
|
7902
7899
|
this.__viewCompletedWait.push(item);
|
|
7903
|
-
if (this.viewCompleted)
|
|
7900
|
+
if (this.viewCompleted)
|
|
7904
7901
|
this.__checkViewCompleted(false);
|
|
7905
|
-
|
|
7906
|
-
|
|
7907
|
-
if (!this.running)
|
|
7908
|
-
this.start();
|
|
7909
|
-
}
|
|
7902
|
+
else if (!this.running)
|
|
7903
|
+
this.start();
|
|
7910
7904
|
}
|
|
7911
7905
|
nextRender(item, bind, off) {
|
|
7912
7906
|
if (bind)
|
|
@@ -7920,9 +7914,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7920
7914
|
}
|
|
7921
7915
|
}
|
|
7922
7916
|
}
|
|
7923
|
-
else
|
|
7917
|
+
else
|
|
7924
7918
|
list.push(item);
|
|
7925
|
-
}
|
|
7926
7919
|
}
|
|
7927
7920
|
zoom(_zoomType, _padding, _fixedScale) {
|
|
7928
7921
|
return needPlugin('view');
|
|
@@ -7966,10 +7959,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
|
|
|
7966
7959
|
this.stop();
|
|
7967
7960
|
this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
|
|
7968
7961
|
this.__removeListenEvents();
|
|
7969
|
-
this.__controllers.forEach(item =>
|
|
7970
|
-
if (!(this.parent && item === this.interaction))
|
|
7971
|
-
item.destroy();
|
|
7972
|
-
});
|
|
7962
|
+
this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
|
|
7973
7963
|
this.__controllers.length = 0;
|
|
7974
7964
|
if (!this.parent) {
|
|
7975
7965
|
if (this.selector)
|
|
@@ -8502,23 +8492,23 @@ let Text = class Text extends UI {
|
|
|
8502
8492
|
}
|
|
8503
8493
|
__updateTextDrawData() {
|
|
8504
8494
|
const data = this.__;
|
|
8505
|
-
data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
|
|
8506
|
-
}
|
|
8507
|
-
__updateBoxBounds() {
|
|
8508
|
-
const data = this.__;
|
|
8509
|
-
const layout = this.__layout;
|
|
8510
8495
|
const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
|
|
8511
|
-
const autoWidth = data.__autoWidth;
|
|
8512
|
-
const autoHeight = data.__autoHeight;
|
|
8513
8496
|
data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
|
|
8514
8497
|
data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
|
|
8515
8498
|
data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
|
|
8516
8499
|
data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
|
|
8517
8500
|
data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
|
|
8518
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;
|
|
8519
8508
|
this.__updateTextDrawData();
|
|
8520
8509
|
const { bounds } = data.__textDrawData;
|
|
8521
8510
|
const b = layout.boxBounds;
|
|
8511
|
+
console.log(bounds, autoWidth, autoHeight);
|
|
8522
8512
|
if (data.__lineHeight < fontSize)
|
|
8523
8513
|
spread(bounds, fontSize / 2);
|
|
8524
8514
|
if (autoWidth || autoHeight) {
|
|
@@ -8528,20 +8518,15 @@ let Text = class Text extends UI {
|
|
|
8528
8518
|
b.height = autoHeight ? bounds.height : data.height;
|
|
8529
8519
|
if (padding) {
|
|
8530
8520
|
const [top, right, bottom, left] = data.__padding;
|
|
8531
|
-
if (autoWidth)
|
|
8532
|
-
b.x -= left;
|
|
8533
|
-
|
|
8534
|
-
|
|
8535
|
-
if (autoHeight) {
|
|
8536
|
-
b.y -= top;
|
|
8537
|
-
b.height += (bottom + top);
|
|
8538
|
-
}
|
|
8521
|
+
if (autoWidth)
|
|
8522
|
+
b.x -= left, b.width += (right + left);
|
|
8523
|
+
if (autoHeight)
|
|
8524
|
+
b.y -= top, b.height += (bottom + top);
|
|
8539
8525
|
}
|
|
8540
8526
|
this.__updateNaturalSize();
|
|
8541
8527
|
}
|
|
8542
|
-
else
|
|
8528
|
+
else
|
|
8543
8529
|
super.__updateBoxBounds();
|
|
8544
|
-
}
|
|
8545
8530
|
if (italic)
|
|
8546
8531
|
b.width += fontSize * 0.16;
|
|
8547
8532
|
const contentBounds = includes(b, bounds) ? b : bounds;
|
|
@@ -8664,11 +8649,7 @@ let Pen = class Pen extends Group {
|
|
|
8664
8649
|
this.add(path);
|
|
8665
8650
|
return this;
|
|
8666
8651
|
}
|
|
8667
|
-
beginPath() {
|
|
8668
|
-
this.__path.length = 0;
|
|
8669
|
-
this.paint();
|
|
8670
|
-
return this;
|
|
8671
|
-
}
|
|
8652
|
+
beginPath() { return this; }
|
|
8672
8653
|
moveTo(_x, _y) { return this; }
|
|
8673
8654
|
lineTo(_x, _y) { return this; }
|
|
8674
8655
|
bezierCurveTo(_x1, _y1, _x2, _y2, _x, _y) { return this; }
|
|
@@ -8695,7 +8676,7 @@ __decorate([
|
|
|
8695
8676
|
penPathType()
|
|
8696
8677
|
], Pen.prototype, "path", void 0);
|
|
8697
8678
|
Pen = __decorate([
|
|
8698
|
-
useModule(PathCreator, ['set', '
|
|
8679
|
+
useModule(PathCreator, ['set', 'path', 'paint']),
|
|
8699
8680
|
registerUI()
|
|
8700
8681
|
], Pen);
|
|
8701
8682
|
function penPathType() {
|
|
@@ -8711,14 +8692,10 @@ function fillText(ui, canvas) {
|
|
|
8711
8692
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
8712
8693
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
8713
8694
|
row = rows[i];
|
|
8714
|
-
if (row.text)
|
|
8695
|
+
if (row.text)
|
|
8715
8696
|
canvas.fillText(row.text, row.x, row.y);
|
|
8716
|
-
|
|
8717
|
-
|
|
8718
|
-
row.data.forEach(charData => {
|
|
8719
|
-
canvas.fillText(charData.char, charData.x, row.y);
|
|
8720
|
-
});
|
|
8721
|
-
}
|
|
8697
|
+
else if (row.data)
|
|
8698
|
+
row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
|
|
8722
8699
|
if (decorationY)
|
|
8723
8700
|
canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
8724
8701
|
}
|
|
@@ -8784,12 +8761,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
|
|
|
8784
8761
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
|
|
8785
8762
|
fillText(ui, out);
|
|
8786
8763
|
out.blendMode = 'normal';
|
|
8787
|
-
if (ui.__worldFlipped)
|
|
8764
|
+
if (ui.__worldFlipped)
|
|
8788
8765
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
8789
|
-
|
|
8790
|
-
else {
|
|
8766
|
+
else
|
|
8791
8767
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
8792
|
-
}
|
|
8793
8768
|
out.recycle(ui.__nowWorld);
|
|
8794
8769
|
}
|
|
8795
8770
|
function drawTextStroke(ui, canvas) {
|
|
@@ -8797,14 +8772,10 @@ function drawTextStroke(ui, canvas) {
|
|
|
8797
8772
|
const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
|
|
8798
8773
|
for (let i = 0, len = rows.length; i < len; i++) {
|
|
8799
8774
|
row = rows[i];
|
|
8800
|
-
if (row.text)
|
|
8775
|
+
if (row.text)
|
|
8801
8776
|
canvas.strokeText(row.text, row.x, row.y);
|
|
8802
|
-
|
|
8803
|
-
|
|
8804
|
-
row.data.forEach(charData => {
|
|
8805
|
-
canvas.strokeText(charData.char, charData.x, row.y);
|
|
8806
|
-
});
|
|
8807
|
-
}
|
|
8777
|
+
else if (row.data)
|
|
8778
|
+
row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
|
|
8808
8779
|
if (decorationY)
|
|
8809
8780
|
canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
|
|
8810
8781
|
}
|
|
@@ -8857,12 +8828,10 @@ function stroke(stroke, ui, canvas) {
|
|
|
8857
8828
|
out.stroke();
|
|
8858
8829
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
8859
8830
|
out.clearWorld(ui.__layout.renderBounds);
|
|
8860
|
-
if (ui.__worldFlipped)
|
|
8831
|
+
if (ui.__worldFlipped)
|
|
8861
8832
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
8862
|
-
|
|
8863
|
-
else {
|
|
8833
|
+
else
|
|
8864
8834
|
canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
|
|
8865
|
-
}
|
|
8866
8835
|
out.recycle(ui.__nowWorld);
|
|
8867
8836
|
break;
|
|
8868
8837
|
}
|
|
@@ -8897,12 +8866,10 @@ function strokes(strokes, ui, canvas) {
|
|
|
8897
8866
|
drawStrokesStyle(strokes, false, ui, out);
|
|
8898
8867
|
options.windingRule ? out.clip(options.windingRule) : out.clip();
|
|
8899
8868
|
out.clearWorld(renderBounds);
|
|
8900
|
-
if (ui.__worldFlipped)
|
|
8869
|
+
if (ui.__worldFlipped)
|
|
8901
8870
|
canvas.copyWorldByReset(out, ui.__nowWorld);
|
|
8902
|
-
|
|
8903
|
-
else {
|
|
8871
|
+
else
|
|
8904
8872
|
canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
|
|
8905
|
-
}
|
|
8906
8873
|
out.recycle(ui.__nowWorld);
|
|
8907
8874
|
break;
|
|
8908
8875
|
}
|
|
@@ -8966,12 +8933,7 @@ function compute(attrName, ui) {
|
|
|
8966
8933
|
data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
|
|
8967
8934
|
if (leafPaints.length && leafPaints[0].image)
|
|
8968
8935
|
hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
|
|
8969
|
-
|
|
8970
|
-
data.__pixelFill = hasOpacityPixel;
|
|
8971
|
-
}
|
|
8972
|
-
else {
|
|
8973
|
-
data.__pixelStroke = hasOpacityPixel;
|
|
8974
|
-
}
|
|
8936
|
+
attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
|
|
8975
8937
|
}
|
|
8976
8938
|
function getLeafPaint(attrName, paint, ui) {
|
|
8977
8939
|
if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
|