@vertexvis/viewer 0.24.5-canary.8 → 0.24.5

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

@@ -167,8 +167,18 @@ const RelativeAnchor = ({ id, transform, rotation, name, point, onPointerDown },
         } },
         h("slot", { name: name }, children)))));
 };
-const SvgShadow = ({ id }) => {
-  return (h("filter", { id: id },
+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 (h("filter", { id: id, filterUnits: "userSpaceOnUse", x: `${-xOffset}%`, y: `${-yOffset}%`, width: `${width}%`, height: `${height}%` },
     h("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "2" }),
     h("feOffset", { dx: "0", dy: "1", result: "offsetblur" }),
     h("feFlood", { "flood-color": "#000000", "flood-opacity": "0.25" }),
@@ -452,7 +462,7 @@ const ViewerMarkupArrow = class {
       if (isValidPointData(screenStart, screenEnd)) {
         const arrowheadStartPoints = createLineAnchorStylePoints(screenEnd, screenStart);
         const arrowheadEndPoints = createLineAnchorStylePoints(screenStart, screenEnd);
-        return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "arrow-shadow" })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#arrow-shadow)" }, this.renderLineAnchorStyle(this.startLineAnchorStyle, arrowheadStartPoints), 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' && (h("g", { transform: `translate(${offsetX} ${offsetY})` }, 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' && (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' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+        return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "arrow-shadow", scale: this.scale })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#arrow-shadow)" }, this.renderLineAnchorStyle(this.startLineAnchorStyle, arrowheadStartPoints), 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' && (h("g", { transform: `translate(${offsetX} ${offsetY})` }, 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' && (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' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
       }
       else {
         return h(Host, null);
@@ -685,7 +695,7 @@ const ViewerMarkupCircle = class {
       const center = rectangle.center(relativeBounds);
       const offsetX = ((_b = (_a = this.offset) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0) / getWindowDevicePixelRatio();
       const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / getWindowDevicePixelRatio();
-      return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "circle-shadow" })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#circle-shadow)" }, 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' && (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' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+      return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "circle-shadow", scale: this.scale })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#circle-shadow)" }, 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' && (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' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
     }
     else {
       return (h(Host, null, h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));
@@ -917,7 +927,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) / getWindowDevicePixelRatio();
       const offsetY = ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0) / getWindowDevicePixelRatio();
-      return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "freeform-markup-shadow" })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#freeform-markup-shadow)" }, 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 && (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' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
+      return (h(Host, null, h("svg", { class: "svg", onTouchStart: this.handleTouchStart }, h("defs", null, h(SvgShadow, { id: "freeform-markup-shadow", scale: this.scale })), h("g", { transform: `translate(${offsetX} ${offsetY})`, filter: "url(#freeform-markup-shadow)" }, 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 && (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' && (h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart }))));
     }
     else {
       return (h(Host, null, h("div", { class: "create-overlay", onTouchStart: this.handleTouchStart })));