@inweb/viewer-visualize 27.1.4 → 27.1.6

package/dist/viewer-visualize.js

@@ -3442,22 +3442,7 @@
         }
     }
 
-    class RenderLoopComponent {
-        constructor(viewer) {
-            this.animate = (time) => {
-                this.requestId = requestAnimationFrame(this.animate);
-                this.viewer.render(time);
-                this.viewer.emitEvent({ type: "animate", time });
-            };
-            this.viewer = viewer;
-            this.requestId = requestAnimationFrame(this.animate);
-        }
-        dispose() {
-            cancelAnimationFrame(this.requestId);
-        }
-    }
-
-    class ResizeCanvasComponent {
+    class CanvasResizeComponent {
         constructor(viewer) {
             this.resizeViewer = (entries) => {
                 const { width, height } = entries[0].contentRect;
@@ -3474,6 +3459,46 @@
         }
     }
 
+    class CanvasRemoveComponent {
+        constructor(viewer) {
+            this.cleanupViewer = (mutations) => {
+                for (const mutation of mutations) {
+                    if (mutation.type === "childList" && mutation.removedNodes.length > 0) {
+                        for (const node of mutation.removedNodes) {
+                            if (node === this.viewer.canvas || node.contains(this.viewer.canvas)) {
+                                this.viewer.emitEvent({ type: "canvasremoved" });
+                                this.viewer.dispose();
+                                return;
+                            }
+                        }
+                    }
+                }
+            };
+            this.viewer = viewer;
+            this.mutationObserver = new MutationObserver(this.cleanupViewer);
+            this.mutationObserver.observe(document, { childList: true, subtree: true });
+        }
+        dispose() {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
+        }
+    }
+
+    class RenderLoopComponent {
+        constructor(viewer) {
+            this.animate = (time) => {
+                this.requestId = requestAnimationFrame(this.animate);
+                this.viewer.render(time);
+                this.viewer.emitEvent({ type: "animate", time });
+            };
+            this.viewer = viewer;
+            this.requestId = requestAnimationFrame(this.animate);
+        }
+        dispose() {
+            cancelAnimationFrame(this.requestId);
+        }
+    }
+
     class ZoomWheelComponent {
         constructor(viewer) {
             this.viewer = viewer;
@@ -3728,7 +3753,8 @@
     const components = componentsRegistry("visualizejs");
     components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
     components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
-    components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
+    components.registerComponent("CanvasResizeComponent", (viewer) => new CanvasResizeComponent(viewer));
+    components.registerComponent("CanvasRemoveComponent", (viewer) => new CanvasRemoveComponent(viewer));
     components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
     components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComponent(viewer));
     components.registerComponent("GestureManagerComponent", (viewer) => new GestureManagerComponent(viewer));
@@ -4325,7 +4351,7 @@
                 : {};
     const Konva$2 = {
         _global: glob,
-        version: '10.0.12',
+        version: '10.2.0',
         isBrowser: detectBrowser(),
         isUnminified: /param/.test(function (param) { }.toString()),
         dblClickWindow: 400,
@@ -4697,7 +4723,7 @@ js: import "konva/skia-backend";
     let _isCanvasFarblingActive = null;
     const req = (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) ||
         function (f) {
-            setTimeout(f, 60);
+            setTimeout(f, 16);
         };
     const Util = {
         _isElement(obj) {
@@ -6494,8 +6520,8 @@ js: import "konva/skia-backend";
         }
         clearCache() {
             if (this._cache.has(CANVAS)) {
-                const { scene, filter, hit, buffer } = this._cache.get(CANVAS);
-                Util.releaseCanvas(scene, filter, hit, buffer);
+                const { scene, filter, hit } = this._cache.get(CANVAS);
+                Util.releaseCanvas(scene._canvas, filter._canvas, hit._canvas);
                 this._cache.delete(CANVAS);
             }
             this._clearSelfAndDescendantCache();
@@ -6578,11 +6604,11 @@ js: import "konva/skia-backend";
                 sceneContext.stroke();
                 sceneContext.restore();
             }
+            Util.releaseCanvas(bufferCanvas._canvas);
             this._cache.set(CANVAS, {
                 scene: cachedSceneCanvas,
                 filter: cachedFilterCanvas,
                 hit: cachedHitCanvas,
-                buffer: bufferCanvas,
                 x: x,
                 y: y,
             });
@@ -7607,19 +7633,20 @@ js: import "konva/skia-backend";
             }
         }
         _getProtoListeners(eventType) {
-            var _a, _b, _c;
-            const allListeners = (_a = this._cache.get(ALL_LISTENERS)) !== null && _a !== void 0 ? _a : {};
+            var _a, _b;
+            const { nodeType } = this;
+            const allListeners = Node.protoListenerMap.get(nodeType) || {};
             let events = allListeners === null || allListeners === void 0 ? void 0 : allListeners[eventType];
             if (events === undefined) {
                 events = [];
                 let obj = Object.getPrototypeOf(this);
                 while (obj) {
-                    const hierarchyEvents = (_c = (_b = obj.eventListeners) === null || _b === void 0 ? void 0 : _b[eventType]) !== null && _c !== void 0 ? _c : [];
+                    const hierarchyEvents = (_b = (_a = obj.eventListeners) === null || _a === void 0 ? void 0 : _a[eventType]) !== null && _b !== void 0 ? _b : [];
                     events.push(...hierarchyEvents);
                     obj = Object.getPrototypeOf(obj);
                 }
                 allListeners[eventType] = events;
-                this._cache.set(ALL_LISTENERS, allListeners);
+                Node.protoListenerMap.set(nodeType, allListeners);
             }
             return events;
         }
@@ -7809,6 +7836,7 @@ js: import "konva/skia-backend";
             return no;
         }
     }
+    Node.protoListenerMap = new Map();
     Node.prototype.nodeType = 'Node';
     Node.prototype._attrsAffectingSize = [];
     Node.prototype.eventListeners = {};
@@ -9266,7 +9294,15 @@ js: import "konva/skia-backend";
                 stage = this.getStage();
                 const bc = bufferCanvas || stage.bufferCanvas;
                 const bufferContext = bc.getContext();
-                bufferContext.clear();
+                if (bufferCanvas) {
+                    bufferContext.save();
+                    bufferContext.setTransform(1, 0, 0, 1, 0, 0);
+                    bufferContext.clearRect(0, 0, bc.width, bc.height);
+                    bufferContext.restore();
+                }
+                else {
+                    bufferContext.clear();
+                }
                 bufferContext.save();
                 bufferContext._applyLineJoin(this);
                 bufferContext._applyMiterLimit(this);
@@ -10559,6 +10595,35 @@ js: import "konva/skia-backend";
         }
         return allPoints;
     }
+    function getBezierExtremaPoints(points) {
+        const axisPoints = [
+            [points[0], points[2], points[4], points[6]],
+            [points[1], points[3], points[5], points[7]],
+        ];
+        const extremaTs = [];
+        for (const axis of axisPoints) {
+            const a = -3 * axis[0] + 9 * axis[1] - 9 * axis[2] + 3 * axis[3];
+            if (a !== 0) {
+                const b = 6 * axis[0] - 12 * axis[1] + 6 * axis[2];
+                const c = -3 * axis[0] + 3 * axis[1];
+                const discriminant = b * b - 4 * a * c;
+                if (discriminant >= 0) {
+                    const d = Math.sqrt(discriminant);
+                    extremaTs.push((-b + d) / (2 * a));
+                    extremaTs.push((-b - d) / (2 * a));
+                }
+            }
+        }
+        return extremaTs
+            .filter((t) => t > 0 && t < 1)
+            .flatMap((t) => axisPoints.map((axis) => {
+            const mt = 1 - t;
+            return (mt * mt * mt * axis[0] +
+                3 * mt * mt * t * axis[1] +
+                3 * mt * t * t * axis[2] +
+                t * t * t * axis[3]);
+        }));
+    }
     class Line extends Shape {
         constructor(config) {
             super(config);
@@ -10660,6 +10725,15 @@ js: import "konva/skia-backend";
                     points[points.length - 1],
                 ];
             }
+            else if (this.bezier()) {
+                points = [
+                    points[0],
+                    points[1],
+                    ...getBezierExtremaPoints(this.points()),
+                    points[points.length - 2],
+                    points[points.length - 1],
+                ];
+            }
             else {
                 points = this.points();
             }
@@ -12949,7 +13023,7 @@ js: import "konva/skia-backend";
             if (!this.text()) {
                 return;
             }
-            let padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), direction = this.direction(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), charRenderFunc = this.charRenderFunc(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
+            let padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), direction = this.direction(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), charRenderFunc = this.charRenderFunc(), fill = this.fill(), textDecoration = this.textDecoration(), underlineOffset = this.underlineOffset(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
             direction = direction === INHERIT ? context.direction : direction;
             let translateY = lineHeightPx / 2;
             let baseline = MIDDLE;
@@ -12987,9 +13061,9 @@ js: import "konva/skia-backend";
                 if (shouldUnderline) {
                     context.save();
                     context.beginPath();
-                    const yOffset = !Konva$2.legacyTextRendering
+                    const yOffset = underlineOffset !== null && underlineOffset !== void 0 ? underlineOffset : (!Konva$2.legacyTextRendering
                         ? Math.round(fontSize / 4)
-                        : Math.round(fontSize / 2);
+                        : Math.round(fontSize / 2));
                     const x = lineTranslateX;
                     const y = translateY + lineTranslateY + yOffset;
                     context.moveTo(x, y);
@@ -13308,6 +13382,7 @@ js: import "konva/skia-backend";
     Factory.addGetterSetter(Text, 'letterSpacing', 0, getNumberValidator());
     Factory.addGetterSetter(Text, 'text', '', getStringValidator());
     Factory.addGetterSetter(Text, 'textDecoration', '');
+    Factory.addGetterSetter(Text, 'underlineOffset', undefined, getNumberValidator());
     Factory.addGetterSetter(Text, 'charRenderFunc', undefined);
 
     const EMPTY_STRING = '', NORMAL = 'normal';
@@ -13576,6 +13651,7 @@ js: import "konva/skia-backend";
     const ATTR_CHANGE_LIST = [
         'resizeEnabledChange',
         'rotateAnchorOffsetChange',
+        'rotateAnchorAngleChange',
         'rotateEnabledChange',
         'enabledAnchorsChange',
         'anchorSizeChange',
@@ -13973,11 +14049,38 @@ js: import "konva/skia-backend";
                 sceneFunc(ctx, shape) {
                     const tr = shape.getParent();
                     const padding = tr.padding();
+                    const width = shape.width();
+                    const height = shape.height();
                     ctx.beginPath();
-                    ctx.rect(-padding, -padding, shape.width() + padding * 2, shape.height() + padding * 2);
-                    ctx.moveTo(shape.width() / 2, -padding);
+                    ctx.rect(-padding, -padding, width + padding * 2, height + padding * 2);
                     if (tr.rotateEnabled() && tr.rotateLineVisible()) {
-                        ctx.lineTo(shape.width() / 2, -tr.rotateAnchorOffset() * Util._sign(shape.height()) - padding);
+                        const rotateAnchorAngle = tr.rotateAnchorAngle();
+                        const rotateAnchorOffset = tr.rotateAnchorOffset();
+                        const rad = Util.degToRad(rotateAnchorAngle);
+                        const dirX = Math.sin(rad);
+                        const dirY = -Math.cos(rad);
+                        const cx = width / 2;
+                        const cy = height / 2;
+                        let t = Infinity;
+                        if (dirY < 0) {
+                            t = Math.min(t, -cy / dirY);
+                        }
+                        else if (dirY > 0) {
+                            t = Math.min(t, (height - cy) / dirY);
+                        }
+                        if (dirX < 0) {
+                            t = Math.min(t, -cx / dirX);
+                        }
+                        else if (dirX > 0) {
+                            t = Math.min(t, (width - cx) / dirX);
+                        }
+                        const edgeX = cx + dirX * t;
+                        const edgeY = cy + dirY * t;
+                        const sign = Util._sign(height);
+                        const endX = edgeX + dirX * rotateAnchorOffset * sign;
+                        const endY = edgeY + dirY * rotateAnchorOffset * sign;
+                        ctx.moveTo(edgeX, edgeY);
+                        ctx.lineTo(endX, endY);
                     }
                     ctx.fillStrokeShape(shape);
                 },
@@ -14059,7 +14162,8 @@ js: import "konva/skia-backend";
                 const attrs = this._getNodeRect();
                 x = anchorNode.x() - attrs.width / 2;
                 y = -anchorNode.y() + attrs.height / 2;
-                let delta = Math.atan2(-y, x) + Math.PI / 2;
+                const rotateAnchorAngleRad = Konva$2.getAngle(this.rotateAnchorAngle());
+                let delta = Math.atan2(-y, x) + Math.PI / 2 - rotateAnchorAngleRad;
                 if (attrs.height < 0) {
                     delta -= Math.PI;
                 }
@@ -14454,9 +14558,32 @@ js: import "konva/skia-backend";
                 offsetY: anchorSize / 2 - padding,
                 visible: resizeEnabled && enabledAnchors.indexOf('bottom-right') >= 0,
             });
+            const rotateAnchorAngle = this.rotateAnchorAngle();
+            const rotateAnchorOffset = this.rotateAnchorOffset();
+            const rad = Util.degToRad(rotateAnchorAngle);
+            const dirX = Math.sin(rad);
+            const dirY = -Math.cos(rad);
+            const cx = width / 2;
+            const cy = height / 2;
+            let t = Infinity;
+            if (dirY < 0) {
+                t = Math.min(t, -cy / dirY);
+            }
+            else if (dirY > 0) {
+                t = Math.min(t, (height - cy) / dirY);
+            }
+            if (dirX < 0) {
+                t = Math.min(t, -cx / dirX);
+            }
+            else if (dirX > 0) {
+                t = Math.min(t, (width - cx) / dirX);
+            }
+            const edgeX = cx + dirX * t;
+            const edgeY = cy + dirY * t;
+            const sign = Util._sign(height);
             this._batchChangeChild('.rotater', {
-                x: width / 2,
-                y: -this.rotateAnchorOffset() * Util._sign(height) - padding,
+                x: edgeX + dirX * rotateAnchorOffset * sign,
+                y: edgeY + dirY * rotateAnchorOffset * sign - padding * dirY,
                 visible: this.rotateEnabled(),
             });
             this._batchChangeChild('.back', {
@@ -14544,6 +14671,7 @@ js: import "konva/skia-backend";
     Factory.addGetterSetter(Transformer, 'rotateLineVisible', true);
     Factory.addGetterSetter(Transformer, 'rotationSnaps', []);
     Factory.addGetterSetter(Transformer, 'rotateAnchorOffset', 50, getNumberValidator());
+    Factory.addGetterSetter(Transformer, 'rotateAnchorAngle', 0, getNumberValidator());
     Factory.addGetterSetter(Transformer, 'rotateAnchorCursor', 'crosshair');
     Factory.addGetterSetter(Transformer, 'rotationSnapTolerance', 5, getNumberValidator());
     Factory.addGetterSetter(Transformer, 'borderEnabled', true);