@inweb/markup 26.12.0 → 26.12.3

package/dist/markup.js

@@ -42,7 +42,7 @@
                 : {};
     const Konva$2 = {
         _global: glob,
-        version: '10.0.2',
+        version: '10.0.12',
         isBrowser: detectBrowser(),
         isUnminified: /param/.test(function (param) { }.toString()),
         dblClickWindow: 400,
@@ -84,7 +84,7 @@
         document: glob.document,
         _injectGlobal(Konva) {
             if (typeof glob.Konva !== 'undefined') {
-                console.error('Severa Konva instances detected. It is not recommended to use multiple Konva instances in the same environment.');
+                console.error('Several Konva instances detected. It is not recommended to use multiple Konva instances in the same environment.');
             }
             glob.Konva = Konva;
         },
@@ -259,7 +259,7 @@ js: import "konva/skia-backend";
             return result;
         }
     }
-    const OBJECT_ARRAY = '[object Array]', OBJECT_NUMBER = '[object Number]', OBJECT_STRING = '[object String]', OBJECT_BOOLEAN = '[object Boolean]', PI_OVER_DEG180 = Math.PI / 180, DEG180_OVER_PI = 180 / Math.PI, HASH$1 = '#', EMPTY_STRING$1 = '', ZERO = '0', KONVA_WARNING = 'Konva warning: ', KONVA_ERROR = 'Konva error: ', RGB_PAREN = 'rgb(', COLORS = {
+    const OBJECT_ARRAY = '[object Array]', OBJECT_NUMBER = '[object Number]', OBJECT_STRING = '[object String]', OBJECT_BOOLEAN = '[object Boolean]', PI_OVER_DEG180 = Math.PI / 180, DEG180_OVER_PI = 180 / Math.PI, HASH = '#', EMPTY_STRING$1 = '', ZERO = '0', KONVA_WARNING = 'Konva warning: ', KONVA_ERROR = 'Konva error: ', RGB_PAREN = 'rgb(', COLORS = {
         aliceblue: [240, 248, 255],
         antiquewhite: [250, 235, 215],
         aqua: [0, 255, 255],
@@ -411,6 +411,7 @@ js: import "konva/skia-backend";
         yellowgreen: [154, 205, 5],
     }, RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
     let animQueue = [];
+    let _isCanvasFarblingActive = null;
     const req = (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) ||
         function (f) {
             setTimeout(f, 60);
@@ -506,7 +507,7 @@ js: import "konva/skia-backend";
             return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
         },
         _hexToRgb(hex) {
-            hex = hex.replace(HASH$1, EMPTY_STRING$1);
+            hex = hex.replace(HASH, EMPTY_STRING$1);
             const bigint = parseInt(hex, 16);
             return {
                 r: (bigint >> 16) & 255,
@@ -519,7 +520,58 @@ js: import "konva/skia-backend";
             while (randColor.length < 6) {
                 randColor = ZERO + randColor;
             }
-            return HASH$1 + randColor;
+            return HASH + randColor;
+        },
+        isCanvasFarblingActive() {
+            if (_isCanvasFarblingActive !== null) {
+                return _isCanvasFarblingActive;
+            }
+            if (typeof document === 'undefined') {
+                _isCanvasFarblingActive = false;
+                return false;
+            }
+            const c = this.createCanvasElement();
+            c.width = 10;
+            c.height = 10;
+            const ctx = c.getContext('2d', {
+                willReadFrequently: true,
+            });
+            ctx.clearRect(0, 0, 10, 10);
+            ctx.fillStyle = '#282828';
+            ctx.fillRect(0, 0, 10, 10);
+            const d = ctx.getImageData(0, 0, 10, 10).data;
+            let isFarbling = false;
+            for (let i = 0; i < 100; i++) {
+                if (d[i * 4] !== 40 ||
+                    d[i * 4 + 1] !== 40 ||
+                    d[i * 4 + 2] !== 40 ||
+                    d[i * 4 + 3] !== 255) {
+                    isFarbling = true;
+                    break;
+                }
+            }
+            _isCanvasFarblingActive = isFarbling;
+            this.releaseCanvas(c);
+            return _isCanvasFarblingActive;
+        },
+        getHitColor() {
+            const color = this.getRandomColor();
+            return this.isCanvasFarblingActive()
+                ? this.getSnappedHexColor(color)
+                : color;
+        },
+        getHitColorKey(r, g, b) {
+            if (this.isCanvasFarblingActive()) {
+                r = Math.round(r / 5) * 5;
+                g = Math.round(g / 5) * 5;
+                b = Math.round(b / 5) * 5;
+            }
+            return HASH + this._rgbToHex(r, g, b);
+        },
+        getSnappedHexColor(hex) {
+            const rgb = this._hexToRgb(hex);
+            return (HASH +
+                this._rgbToHex(Math.round(rgb.r / 5) * 5, Math.round(rgb.g / 5) * 5, Math.round(rgb.b / 5) * 5));
         },
         getRGB(color) {
             let rgb;
@@ -531,7 +583,7 @@ js: import "konva/skia-backend";
                     b: rgb[2],
                 };
             }
-            else if (color[0] === HASH$1) {
+            else if (color[0] === HASH) {
                 return this._hexToRgb(color.substring(1));
             }
             else if (color.substr(0, 4) === RGB_PAREN) {
@@ -1615,42 +1667,12 @@ js: import "konva/skia-backend";
             this.setSize(config.width, config.height);
         }
     }
-    function isCanvasFarblingActive() {
-        const c = Util.createCanvasElement();
-        c.width = 1;
-        c.height = 1;
-        const ctx = c.getContext('2d', {
-            willReadFrequently: true,
-        });
-        ctx.clearRect(0, 0, 1, 1);
-        ctx.fillStyle = 'rgba(255,0,255,1)';
-        ctx.fillRect(0, 0, 1, 1);
-        const d = ctx.getImageData(0, 0, 1, 1).data;
-        const exact = d[0] === 255 && d[1] === 0 && d[2] === 255 && d[3] === 255;
-        return !exact;
-    }
-    function isBraveBrowser() {
-        var _a, _b;
-        if (typeof navigator === 'undefined') {
-            return false;
-        }
-        return (_b = (_a = navigator.brave) === null || _a === void 0 ? void 0 : _a.isBrave()) !== null && _b !== void 0 ? _b : false;
-    }
-    let warned = false;
-    function checkHitCanvasSupport() {
-        if (isBraveBrowser() && isCanvasFarblingActive() && !warned) {
-            warned = true;
-            Util.error('Looks like you have "Brave shield" enabled in your browser. It breaks KonvaJS internals. Please disable it. You may need to ask your users to do the same.');
-        }
-        return isBraveBrowser() && isCanvasFarblingActive();
-    }
     class HitCanvas extends Canvas {
         constructor(config = { width: 0, height: 0 }) {
             super(config);
             this.hitCanvas = true;
             this.context = new HitContext(this);
             this.setSize(config.width, config.height);
-            checkHitCanvasSupport();
         }
     }
 
@@ -2506,7 +2528,7 @@ js: import "konva/skia-backend";
             return ancestors;
         }
         getAttrs() {
-            return (this.attrs || {});
+            return this.attrs || {};
         }
         setAttrs(config) {
             this._batchTransformChanges(() => {
@@ -4679,11 +4701,18 @@ js: import "konva/skia-backend";
         constructor(config) {
             super(config);
             let key;
+            let attempts = 0;
             while (true) {
-                key = Util.getRandomColor();
+                key = Util.getHitColor();
                 if (key && !(key in shapes)) {
                     break;
                 }
+                attempts++;
+                if (attempts >= 10000) {
+                    Util.warn('Failed to find a unique color key for a shape. Konva may work incorrectly. Most likely your browser is using canvas farbling. Consider disabling it.');
+                    key = Util.getRandomColor();
+                    break;
+                }
             }
             this.colorKey = key;
             shapes[key] = this;
@@ -4966,8 +4995,10 @@ js: import "konva/skia-backend";
                 if (hasShadow) {
                     context._applyShadow(this);
                 }
-                context._applyOpacity(this);
-                context._applyGlobalCompositeOperation(this);
+                if (!cachingSelf) {
+                    context._applyOpacity(this);
+                    context._applyGlobalCompositeOperation(this);
+                }
                 context.drawImage(bc._canvas, bc.x || 0, bc.y || 0, bc.width / ratio, bc.height / ratio);
             }
             else {
@@ -5161,7 +5192,7 @@ js: import "konva/skia-backend";
         setDrawHitFunc: 'setHitFunc',
     });
 
-    const HASH = '#', BEFORE_DRAW = 'beforeDraw', DRAW = 'draw', INTERSECTION_OFFSETS = [
+    const BEFORE_DRAW = 'beforeDraw', DRAW = 'draw', INTERSECTION_OFFSETS = [
         { x: 0, y: 0 },
         { x: -1, y: -1 },
         { x: 1, y: -1 },
@@ -5379,8 +5410,8 @@ js: import "konva/skia-backend";
             const p = this.hitCanvas.context.getImageData(Math.round(pos.x * ratio), Math.round(pos.y * ratio), 1, 1).data;
             const p3 = p[3];
             if (p3 === 255) {
-                const colorKey = Util._rgbToHex(p[0], p[1], p[2]);
-                const shape = shapes[HASH + colorKey];
+                const colorKey = Util.getHitColorKey(p[0], p[1], p[2]);
+                const shape = shapes[colorKey];
                 if (shape) {
                     return {
                         shape: shape,
@@ -8085,12 +8116,12 @@ js: import "konva/skia-backend";
             context.fillStrokeShape(this);
         }
         getWidth() {
-            var _a, _b;
-            return (_a = this.attrs.width) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.width;
+            var _a, _b, _c;
+            return (_c = (_a = this.attrs.width) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
         }
         getHeight() {
-            var _a, _b;
-            return (_a = this.attrs.height) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.height;
+            var _a, _b, _c;
+            return (_c = (_a = this.attrs.height) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 0;
         }
         static fromURL(url, callback, onError = null) {
             const img = Util.createImageElement();
@@ -8106,6 +8137,7 @@ js: import "konva/skia-backend";
         }
     };
     Image$1.prototype.className = 'Image';
+    Image$1.prototype._attrsAffectingSize = ['image'];
     _registerNode(Image$1);
     Factory.addGetterSetter(Image$1, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));
     Factory.addGetterSetter(Image$1, 'image');
@@ -8333,8 +8365,8 @@ js: import "konva/skia-backend";
         getSelfRect() {
             const points = this._getPoints();
             let minX = points[0].x;
-            let maxX = points[0].y;
-            let minY = points[0].x;
+            let maxX = points[0].x;
+            let minY = points[0].y;
             let maxY = points[0].y;
             points.forEach((point) => {
                 minX = Math.min(minX, point.x);
@@ -8686,6 +8718,7 @@ js: import "konva/skia-backend";
                     context.stroke();
                     context.restore();
                 }
+                const lineThroughStartX = lineTranslateX;
                 if (direction !== RTL &&
                     (letterSpacing !== 0 || align === JUSTIFY || charRenderFunc)) {
                     const spacesNumber = text.split(' ').length - 1;
@@ -8737,7 +8770,7 @@ js: import "konva/skia-backend";
                     const yOffset = !Konva$2.legacyTextRendering
                         ? -Math.round(fontSize / 4)
                         : 0;
-                    const x = align === JUSTIFY ? 0 : lineTranslateX;
+                    const x = lineThroughStartX;
                     context.moveTo(x, translateY + lineTranslateY + yOffset);
                     const lineWidth = align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
                     context.lineTo(x + Math.round(lineWidth), translateY + lineTranslateY + yOffset);
@@ -9040,7 +9073,9 @@ js: import "konva/skia-backend";
             const fill = this.fill();
             const fontSize = this.fontSize();
             const glyphInfo = this.glyphInfo;
-            if (textDecoration === 'underline') {
+            const hasUnderline = textDecoration.indexOf('underline') !== -1;
+            const hasLineThrough = textDecoration.indexOf('line-through') !== -1;
+            if (hasUnderline) {
                 context.beginPath();
             }
             for (let i = 0; i < glyphInfo.length; i++) {
@@ -9050,15 +9085,32 @@ js: import "konva/skia-backend";
                 context.rotate(glyphInfo[i].rotation);
                 this.partialText = glyphInfo[i].text;
                 context.fillStrokeShape(this);
-                if (textDecoration === 'underline') {
+                if (hasUnderline) {
                     if (i === 0) {
                         context.moveTo(0, fontSize / 2 + 1);
                     }
-                    context.lineTo(fontSize, fontSize / 2 + 1);
+                    context.lineTo(glyphInfo[i].width, fontSize / 2 + 1);
                 }
                 context.restore();
             }
-            if (textDecoration === 'underline') {
+            if (hasUnderline) {
+                context.strokeStyle = fill;
+                context.lineWidth = fontSize / 20;
+                context.stroke();
+            }
+            if (hasLineThrough) {
+                context.beginPath();
+                for (let i = 0; i < glyphInfo.length; i++) {
+                    context.save();
+                    const p0 = glyphInfo[i].p0;
+                    context.translate(p0.x, p0.y);
+                    context.rotate(glyphInfo[i].rotation);
+                    if (i === 0) {
+                        context.moveTo(0, 0);
+                    }
+                    context.lineTo(glyphInfo[i].width, 0);
+                    context.restore();
+                }
                 context.strokeStyle = fill;
                 context.lineWidth = fontSize / 20;
                 context.stroke();
@@ -9171,6 +9223,7 @@ js: import "konva/skia-backend";
                     rotation: rotation,
                     p0: charStartPoint,
                     p1: charEndPoint,
+                    width: width,
                 });
                 offsetToGlyph += glyphWidth;
             }
@@ -12667,14 +12720,13 @@ js: import "konva/skia-backend";
                 });
             };
             this.pan = () => {
-                this.getObjects().forEach((markupObject) => {
-                    markupObject.updateScreenCoordinates();
-                });
+                this.updateScreenCoordinatesForAll();
             };
             this.zoomAt = () => {
-                this.getObjects().forEach((markupObject) => {
-                    markupObject.updateScreenCoordinates();
-                });
+                this.updateScreenCoordinatesForAll();
+            };
+            this.changeCameraMode = () => {
+                this.clearOverlay();
             };
             this.redirectToViewer = (event) => {
                 if (this._viewer)
@@ -12708,11 +12760,13 @@ js: import "konva/skia-backend";
                 this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
                 this._viewer.addEventListener("pan", this.pan);
                 this._viewer.addEventListener("zoomat", this.zoomAt);
+                this._viewer.addEventListener("changecameramode", this.changeCameraMode);
             }
         }
         dispose() {
             var _a, _b;
             if (this._viewer) {
+                this._viewer.removeEventListener("changecameramode", this.changeCameraMode);
                 this._viewer.removeEventListener("zoomat", this.zoomAt);
                 this._viewer.removeEventListener("pan", this.pan);
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
@@ -12887,6 +12941,11 @@ js: import "konva/skia-backend";
                 ref.parent === this._groupGeometry ||
                 ref.parent === this._groupTexts);
         }
+        updateScreenCoordinatesForAll() {
+            this.getObjects().forEach((markupObject) => {
+                markupObject.updateScreenCoordinates();
+            });
+        }
         initializeKonva() {
             const stage = new Konva.Stage({
                 container: this._markupContainer,