@inweb/markup 25.8.19 → 25.8.20
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/markup.js +59 -23
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +65 -15
- package/dist/markup.module.js.map +1 -1
- package/lib/markup/Konva/KonvaArrow.d.ts +2 -2
- package/lib/markup/Konva/KonvaCloud.d.ts +1 -1
- package/lib/markup/Konva/KonvaEllipse.d.ts +2 -2
- package/lib/markup/Konva/KonvaImage.d.ts +4 -2
- package/lib/markup/Konva/KonvaLine.d.ts +1 -1
- package/lib/markup/Konva/KonvaRectangle.d.ts +1 -1
- package/lib/markup/Konva/KonvaText.d.ts +2 -2
- package/package.json +3 -3
- package/src/markup/Konva/KonvaArrow.ts +5 -3
- package/src/markup/Konva/KonvaCloud.ts +3 -2
- package/src/markup/Konva/KonvaEllipse.ts +5 -3
- package/src/markup/Konva/KonvaImage.ts +26 -13
- package/src/markup/Konva/KonvaLine.ts +7 -2
- package/src/markup/Konva/KonvaRectangle.ts +3 -2
- package/src/markup/Konva/KonvaText.ts +5 -3
package/dist/markup.module.js
CHANGED
|
@@ -61,7 +61,14 @@ class KonvaLine {
|
|
|
61
61
|
this._ref = ref;
|
|
62
62
|
return;
|
|
63
63
|
}
|
|
64
|
-
if (!params
|
|
64
|
+
if (!params) params = {};
|
|
65
|
+
if (!params.points) params.points = [ {
|
|
66
|
+
x: 50,
|
|
67
|
+
y: 50
|
|
68
|
+
}, {
|
|
69
|
+
x: 100,
|
|
70
|
+
y: 100
|
|
71
|
+
} ];
|
|
65
72
|
const konvaPoints = [];
|
|
66
73
|
params.points.forEach((point => konvaPoints.push(point.x, point.y)));
|
|
67
74
|
this._ref = new Konva.Line({
|
|
@@ -163,7 +170,12 @@ class KonvaText {
|
|
|
163
170
|
this._ref = ref;
|
|
164
171
|
return;
|
|
165
172
|
}
|
|
166
|
-
if (!params
|
|
173
|
+
if (!params) params = {};
|
|
174
|
+
if (!params.position) params.position = {
|
|
175
|
+
x: 100,
|
|
176
|
+
y: 100
|
|
177
|
+
};
|
|
178
|
+
if (!params.text) params.text = "default";
|
|
167
179
|
this._ref = new Konva.Text({
|
|
168
180
|
x: params.position.x,
|
|
169
181
|
y: params.position.y,
|
|
@@ -265,7 +277,11 @@ class KonvaRectangle {
|
|
|
265
277
|
this._ref = ref;
|
|
266
278
|
return;
|
|
267
279
|
}
|
|
268
|
-
if (!params
|
|
280
|
+
if (!params) params = {};
|
|
281
|
+
if (!params.position) params.position = {
|
|
282
|
+
x: 100,
|
|
283
|
+
y: 100
|
|
284
|
+
};
|
|
269
285
|
this._ref = new Konva.Rect({
|
|
270
286
|
stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
|
|
271
287
|
strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
|
|
@@ -375,7 +391,15 @@ class KonvaEllipse {
|
|
|
375
391
|
this._ref = ref;
|
|
376
392
|
return;
|
|
377
393
|
}
|
|
378
|
-
if (!params
|
|
394
|
+
if (!params) params = {};
|
|
395
|
+
if (!params.position) params.position = {
|
|
396
|
+
x: 100,
|
|
397
|
+
y: 100
|
|
398
|
+
};
|
|
399
|
+
if (!params.radius) params.radius = {
|
|
400
|
+
x: 25,
|
|
401
|
+
y: 25
|
|
402
|
+
};
|
|
379
403
|
this._ref = new Konva.Ellipse({
|
|
380
404
|
stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
|
|
381
405
|
strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
|
|
@@ -497,7 +521,15 @@ class KonvaArrow {
|
|
|
497
521
|
this._ref = ref;
|
|
498
522
|
return;
|
|
499
523
|
}
|
|
500
|
-
if (!params
|
|
524
|
+
if (!params) params = {};
|
|
525
|
+
if (!params.start) params.start = {
|
|
526
|
+
x: 50,
|
|
527
|
+
y: 50
|
|
528
|
+
};
|
|
529
|
+
if (!params.end) params.end = {
|
|
530
|
+
x: 100,
|
|
531
|
+
y: 100
|
|
532
|
+
};
|
|
501
533
|
this._ref = new Konva.Arrow({
|
|
502
534
|
stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
|
|
503
535
|
fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
|
|
@@ -594,22 +626,24 @@ class KonvaImage {
|
|
|
594
626
|
var _a, _b;
|
|
595
627
|
this._ratio = 1;
|
|
596
628
|
this.EPSILON = 1e-5;
|
|
629
|
+
this.BASE64_NOT_FOUND = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
|
|
630
|
+
this.BASE64_HEADER_START = "data:image/";
|
|
597
631
|
if (ref) {
|
|
632
|
+
if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
|
|
633
|
+
if (ref.height() <= this.EPSILON) ref.height(32);
|
|
634
|
+
if (ref.width() <= this.EPSILON) ref.width(32);
|
|
598
635
|
this._ref = ref;
|
|
599
636
|
this._canvasImage = ref.image();
|
|
600
637
|
this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
|
|
601
638
|
return;
|
|
602
639
|
}
|
|
603
|
-
if (!params
|
|
640
|
+
if (!params) params = {};
|
|
641
|
+
if (!params.position) params.position = {
|
|
642
|
+
x: 50,
|
|
643
|
+
y: 50
|
|
644
|
+
};
|
|
645
|
+
if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
|
|
604
646
|
this._canvasImage = new Image;
|
|
605
|
-
this._ref = new Konva.Image({
|
|
606
|
-
x: params.position.x,
|
|
607
|
-
y: params.position.y,
|
|
608
|
-
image: this._canvasImage,
|
|
609
|
-
width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
|
|
610
|
-
height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
|
|
611
|
-
draggable: true
|
|
612
|
-
});
|
|
613
647
|
this._canvasImage.onload = () => {
|
|
614
648
|
this._ref.image(this._canvasImage);
|
|
615
649
|
if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
|
|
@@ -629,7 +663,19 @@ class KonvaImage {
|
|
|
629
663
|
}
|
|
630
664
|
}
|
|
631
665
|
};
|
|
666
|
+
this._canvasImage.onerror = () => {
|
|
667
|
+
this._canvasImage.onerror = function() {};
|
|
668
|
+
this._canvasImage.src = this.BASE64_NOT_FOUND;
|
|
669
|
+
};
|
|
632
670
|
this._canvasImage.src = params.src;
|
|
671
|
+
this._ref = new Konva.Image({
|
|
672
|
+
x: params.position.x,
|
|
673
|
+
y: params.position.y,
|
|
674
|
+
image: this._canvasImage,
|
|
675
|
+
width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
|
|
676
|
+
height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
|
|
677
|
+
draggable: true
|
|
678
|
+
});
|
|
633
679
|
this._ref.on("transform", (e => {
|
|
634
680
|
const attrs = e.target.attrs;
|
|
635
681
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
@@ -728,7 +774,11 @@ class KonvaCloud {
|
|
|
728
774
|
this._ref = ref;
|
|
729
775
|
return;
|
|
730
776
|
}
|
|
731
|
-
if (!params
|
|
777
|
+
if (!params) params = {};
|
|
778
|
+
if (!params.position) params.position = {
|
|
779
|
+
x: 100,
|
|
780
|
+
y: 100
|
|
781
|
+
};
|
|
732
782
|
const arcRadius = 16;
|
|
733
783
|
this._ref = new Konva.Shape({
|
|
734
784
|
x: params.position.x,
|