@vertexvis/viewer 1.0.0-testing.6 → 1.0.0-testing.8

package/dist/cjs/vertex-viewer-markup-arrow_3.cjs.entry.js

@@ -166,8 +166,18 @@ const RelativeAnchor = ({ id, transform, rotation, name, point, onPointerDown },
             transform: `rotateZ(${rotation !== null && rotation !== void 0 ? rotation : 0}deg)`,
         } }, index.h("slot", { name: name }, children)))));
 };
-const SvgShadow = ({ id }) => {
-    return (index.h("filter", { id: id }, index.h("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "2" }), index.h("feOffset", { dx: "0", dy: "1", result: "offsetblur" }), index.h("feFlood", { "flood-color": "#000000", "flood-opacity": "0.25" }), index.h("feComposite", { in2: "offsetblur", operator: "in" }), index.h("feMerge", null, index.h("feMergeNode", null), index.h("feMergeNode", { in: "SourceGraphic" }))));
+const SvgShadow = ({ id, scale, }) => {
+    // Scale default values for a `<filter>` element by the provided scale.
+    // This prevents the filter area from being too small when scale is greater than 1,
+    // and uses the default values for a scale less than 1 to prevent the same issue.
+    // See https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter
+    // for more details on the default values used here.
+    const effectiveScale = scale !== null && scale !== void 0 ? scale : 1;
+    const xOffset = Math.max(10, 10 * effectiveScale);
+    const yOffset = Math.max(10, 10 * effectiveScale);
+    const width = Math.max(120, 110 * effectiveScale + xOffset);
+    const height = Math.max(120, 110 * effectiveScale + yOffset);
+    return (index.h("filter", { id: id, filterUnits: "userSpaceOnUse", x: `${-xOffset}%`, y: `${-yOffset}%`, width: `${width}%`, height: `${height}%` }, index.h("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "2" }), index.h("feOffset", { dx: "0", dy: "1", result: "offsetblur" }), index.h("feFlood", { "flood-color": "#000000", "flood-opacity": "0.25" }), index.h("feComposite", { in2: "offsetblur", operator: "in" }), index.h("feMerge", null, index.h("feMergeNode", null), index.h("feMergeNode", { in: "SourceGraphic" }))));
 };
 
 class MarkupInteractionHandler {
@@ -438,7 +448,7 @@ const ViewerMarkupArrow = class {
             if (isValidPointData(screenStart, screenEnd)) {
                 const arrowheadStartPoints = utils.createLineAnchorStylePoints(screenEnd, screenStart);
                 const arrowheadEndPoints = utils.createLineAnchorStylePoints(screenStart, screenEnd);
-                return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "arrow-shadow" })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#arrow-shadow)" }, this.renderLineAnchorStyle(this.startLineAnchorStyle, arrowheadStartPoints), index.h("line", { id: "arrow-line", class: "line", x1: arrowheadEndPoints.tip.x, y1: arrowheadEndPoints.tip.y, x2: arrowheadStartPoints.tip.x, y2: arrowheadStartPoints.tip.y }), this.renderLineAnchorStyle(this.endLineAnchorStyle, arrowheadEndPoints)), this.mode === 'edit' && (index.h("g", { transform: `translate(${offsetX} ${offsetY})` }, index.h("line", { id: "bounding-box-1d-line", class: "bounds-line", x1: screenStart.x, y1: screenStart.y, x2: screenEnd.x, y2: screenEnd.y })))), this.mode === 'edit' && (index.h(BoundingBox1d, { start: screenStart, end: screenEnd, offset: { x: offsetX, y: offsetY }, onStartAnchorPointerDown: (event) => this.interactionHandler.editAnchor('start', event), onCenterAnchorPointerDown: (event) => this.interactionHandler.editAnchor('center', event), onEndAnchorPointerDown: (event) => this.interactionHandler.editAnchor('end', event) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+                return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "arrow-shadow", scale: this.scale })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#arrow-shadow)" }, this.renderLineAnchorStyle(this.startLineAnchorStyle, arrowheadStartPoints), index.h("line", { id: "arrow-line", class: "line", x1: arrowheadEndPoints.tip.x, y1: arrowheadEndPoints.tip.y, x2: arrowheadStartPoints.tip.x, y2: arrowheadStartPoints.tip.y }), this.renderLineAnchorStyle(this.endLineAnchorStyle, arrowheadEndPoints)), this.mode === 'edit' && (index.h("g", { transform: `translate(${offsetX} ${offsetY})` }, index.h("line", { id: "bounding-box-1d-line", class: "bounds-line", x1: screenStart.x, y1: screenStart.y, x2: screenEnd.x, y2: screenEnd.y })))), this.mode === 'edit' && (index.h(BoundingBox1d, { start: screenStart, end: screenEnd, offset: { x: offsetX, y: offsetY }, onStartAnchorPointerDown: (event) => this.interactionHandler.editAnchor('start', event), onCenterAnchorPointerDown: (event) => this.interactionHandler.editAnchor('center', event), onEndAnchorPointerDown: (event) => this.interactionHandler.editAnchor('end', event) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
             }
             else {
                 return index.h(index.Host, null);
@@ -662,7 +672,7 @@ const ViewerMarkupCircle = class {
             const center = bundle.rectangle.center(relativeBounds);
             const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / dom$1.getWindowDevicePixelRatio();
             const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / dom$1.getWindowDevicePixelRatio();
-            return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "circle-shadow" })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#circle-shadow)" }, index.h("ellipse", { class: "ellipse", cx: center.x, cy: center.y, rx: relativeBounds.width / 2, ry: relativeBounds.height / 2, stroke: '#000ff0', "stroke-width": 4, fill: 'none' }))), this.mode === 'edit' && (index.h(BoundingBox2d, { bounds: relativeBounds, offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+            return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "circle-shadow", scale: this.scale })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#circle-shadow)" }, index.h("ellipse", { class: "ellipse", cx: center.x, cy: center.y, rx: relativeBounds.width / 2, ry: relativeBounds.height / 2, stroke: '#000ff0', "stroke-width": 4, fill: 'none' }))), this.mode === 'edit' && (index.h(BoundingBox2d, { bounds: relativeBounds, offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
         }
         else {
             return (index.h(index.Host, null, index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));
@@ -902,7 +912,7 @@ const ViewerMarkupFreeform = class {
         if (this.screenPoints.length > 0 && this.elementBounds != null) {
             const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / dom$1.getWindowDevicePixelRatio();
             const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / dom$1.getWindowDevicePixelRatio();
-            return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "freeform-markup-shadow" })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#freeform-markup-shadow)" }, index.h("path", { class: "path", d: this.screenPoints.reduce((d, pt) => `${d}L${pt.x},${pt.y}`, `M${this.screenPoints[0].x},${this.screenPoints[0].y}`), fill: "none" }))), this.mode === 'edit' && this.bounds != null && (index.h(BoundingBox2d, { bounds: translateRectToScreen(this.bounds, this.elementBounds, this.originatingViewport, this.centeringBehavior, this.scale), offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+            return (index.h(index.Host, null, index.h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, index.h("defs", null, index.h(SvgShadow, { id: "freeform-markup-shadow", scale: this.scale })), index.h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#freeform-markup-shadow)" }, index.h("path", { class: "path", d: this.screenPoints.reduce((d, pt) => `${d}L${pt.x},${pt.y}`, `M${this.screenPoints[0].x},${this.screenPoints[0].y}`), fill: "none" }))), this.mode === 'edit' && this.bounds != null && (index.h(BoundingBox2d, { bounds: translateRectToScreen(this.bounds, this.elementBounds, this.originatingViewport, this.centeringBehavior, this.scale), offset: { x: offsetX, y: offsetY }, onTopLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-left', e), onTopRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top-right', e), onTopAnchorPointerDown: (e) => this.interactionHandler.editAnchor('top', e), onBottomLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-left', e), onBottomRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom-right', e), onBottomAnchorPointerDown: (e) => this.interactionHandler.editAnchor('bottom', e), onLeftAnchorPointerDown: (e) => this.interactionHandler.editAnchor('left', e), onRightAnchorPointerDown: (e) => this.interactionHandler.editAnchor('right', e), onCenterAnchorPointerDown: (e) => this.interactionHandler.editAnchor('center', e) })), this.mode === 'create' && (index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
         }
         else {
             return (index.h(index.Host, null, index.h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));