@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

package/dist/components/interactions.js

@@ -0,0 +1,236 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { p as point, j as matrix, c as angle, e as rectangle, d as dimensions } from './bundle.esm.js';
+import { h } from '@stencil/core/internal/client';
+
+function createArrowheadPoints(start, end, arrowAngle = 60) {
+  const distance = point.distance(start, end);
+  const angle$1 = angle.normalize(angle.toDegrees(angle.fromPoints(start, end)) - 270);
+  // Adjust the arrow height in relation to the distance between the to and from
+  // points. Uses a min and max size so the arrow doesn't become cartoonish.
+  const height = Math.max(4, Math.min(16, distance * 0.25));
+  const sideLength = height / Math.cos(angle.toRadians(90 - arrowAngle));
+  const rotation = matrix.rotation(angle$1);
+  const arrowLeft = point.polar(sideLength, angle.toRadians(arrowAngle * 2));
+  const arrowRight = point.polar(sideLength, angle.toRadians(arrowAngle));
+  const arrowBase = point.polar(height, angle.toRadians(90));
+  return {
+    tip: end,
+    left: point.add(end, matrix.transformPoint(rotation, arrowLeft)),
+    right: point.add(end, matrix.transformPoint(rotation, arrowRight)),
+    base: point.add(end, matrix.transformPoint(rotation, arrowBase)),
+  };
+}
+function arrowheadPointsToPolygonPoints(points) {
+  return [points.tip, points.right, points.base, points.left]
+    .map((pt) => `${pt.x},${pt.y}`)
+    .join(' ');
+}
+function isVertexViewerArrowMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-ARROW');
+}
+function parsePoint(value) {
+  return typeof value === 'string' ? point.fromJson(value) : value;
+}
+
+function isVertexViewerCircleMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-CIRCLE');
+}
+function parseBounds(value) {
+  return typeof value === 'string' ? rectangle.fromJson(value) : value;
+}
+
+function parsePoints(value) {
+  return typeof value === 'string'
+    ? JSON.parse(value).map((values) => point.fromJson(JSON.stringify(values)))
+    : value;
+}
+function isVertexViewerFreeformMarkup(el) {
+  return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-FREEFORM');
+}
+
+function getBoundingBox2dAnchorPosition(rect, position) {
+  switch (position) {
+    case 'top-left':
+      return point.create(rect.x, rect.y);
+    case 'top':
+      return point.create(rect.x + rect.width / 2, rect.y);
+    case 'top-right':
+      return point.create(rect.x + rect.width, rect.y);
+    case 'right':
+      return point.create(rect.x + rect.width, rect.y + rect.height / 2);
+    case 'bottom-right':
+      return point.create(rect.x + rect.width, rect.y + rect.height);
+    case 'bottom':
+      return point.create(rect.x + rect.width / 2, rect.y + rect.height);
+    case 'bottom-left':
+      return point.create(rect.x, rect.y + rect.height);
+    case 'left':
+      return point.create(rect.x, rect.y + rect.height / 2);
+    case 'center':
+      return rectangle.center(rect);
+  }
+}
+function translatePointToScreen(pt, canvasDimensions) {
+  const scaleFactor = canvasDimensions.height;
+  return point.add(point.scale(pt, scaleFactor, scaleFactor), dimensions.center(canvasDimensions));
+}
+function translateDimensionsToScreen(dimensions$1, canvasDimensions) {
+  const scaleFactor = canvasDimensions.height;
+  return dimensions.scale(scaleFactor, scaleFactor, dimensions$1);
+}
+/**
+ * Translates a rectangle in relative units, to a rectangle in screen units.
+ *
+ * Shape coordinates are persisted in relative units, so they can be presented
+ * at any size.
+ */
+function translateRectToScreen(rect, canvasDimensions) {
+  const position = translatePointToScreen(rect, canvasDimensions);
+  const dimensions = translateDimensionsToScreen(rect, canvasDimensions);
+  return rectangle.fromPointAndDimensions(position, dimensions);
+}
+/**
+ * Translates a point in screen units, to a point in relative units.
+ */
+function translatePointToRelative(pt, canvasDimensions) {
+  const scaleFactor = 1 / canvasDimensions.height;
+  const point$1 = point.scale(point.subtract(pt, dimensions.center(canvasDimensions)), scaleFactor, scaleFactor);
+  return point$1;
+}
+/**
+ * Translates a set of points in relative `original` units to
+ * points in relative `bounds` units.
+ */
+function translatePointsToBounds(points, original, bounds) {
+  return points.map((pt) => point.add(point.scale(point.subtract(pt, original), bounds.width / (original.width || 1), bounds.height / (original.height || 1)), bounds));
+}
+function createRectangle(initialPoint, currentPoint, maintainAspectRatio) {
+  const bounds = rectangle.fromPoints(initialPoint, currentPoint);
+  if (maintainAspectRatio) {
+    const fitBoundsSize = Math.max(bounds.width, bounds.height);
+    const isPortrait = bounds.height > bounds.width;
+    const currentIsLeftOfInitial = currentPoint.x <= initialPoint.x;
+    const currentIsAboveInitial = currentPoint.y <= initialPoint.y;
+    const fitBoundsX = currentIsLeftOfInitial
+      ? isPortrait
+        ? initialPoint.x - fitBoundsSize
+        : currentPoint.x
+      : initialPoint.x;
+    const fitBoundsY = currentIsAboveInitial
+      ? isPortrait
+        ? currentPoint.y
+        : initialPoint.y - fitBoundsSize
+      : initialPoint.y;
+    return rectangle.create(fitBoundsX, fitBoundsY, fitBoundsSize, fitBoundsSize);
+  }
+  else {
+    return bounds;
+  }
+}
+function transformRectangle(bounds, start, current, anchor, maintainAspectRatio) {
+  const delta = point.subtract(current, start);
+  const { x: left, y: top, width: w, height: h } = bounds;
+  const right = left + w;
+  const bottom = top + h;
+  const topLeft = point.create(left, top);
+  const bottomLeft = point.create(left, bottom);
+  const topRight = point.create(right, top);
+  const bottomRight = point.create(right, bottom);
+  switch (anchor) {
+    case 'top-left':
+      return createRectangle(bottomRight, current, !!maintainAspectRatio);
+    case 'top':
+      return createRectangle(bottomRight, point.create(left, current.y), !!maintainAspectRatio);
+    case 'top-right':
+      return createRectangle(bottomLeft, current, !!maintainAspectRatio);
+    case 'right':
+      return createRectangle(bottomLeft, point.create(current.x, top), !!maintainAspectRatio);
+    case 'bottom-right':
+      return createRectangle(topLeft, current, !!maintainAspectRatio);
+    case 'bottom':
+      return createRectangle(topLeft, point.create(right, current.y), !!maintainAspectRatio);
+    case 'bottom-left':
+      return createRectangle(topRight, current, !!maintainAspectRatio);
+    case 'left':
+      return createRectangle(bottomRight, point.create(current.x, top), !!maintainAspectRatio);
+    case 'center':
+      return rectangle.create(bounds.x + delta.x, bounds.y + delta.y, bounds.width, bounds.height);
+  }
+}
+function isVertexViewerMarkupElement(el) {
+  return (isVertexViewerArrowMarkup(el) ||
+    isVertexViewerCircleMarkup(el) ||
+    isVertexViewerFreeformMarkup(el));
+}
+function isValidPointData(...points) {
+  return points.every((pt) => !isNaN(pt.x) && !isNaN(pt.y));
+}
+function isValidStartEvent(event) {
+  const el = event.target;
+  return isVertexViewerMarkupElement(el) && el.mode !== 'edit';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const RelativeAnchor = ({ id, rotation, name, point, onPointerDown }, children) => {
+  return (h("div", { id: id, class: "bounds-anchor-position", style: {
+      top: `${point.y}px`,
+      left: `${point.x}px`,
+    }, onTouchStart: (event) => event.preventDefault(), onPointerDown: onPointerDown },
+    h("div", { class: "bounds-anchor", style: {
+        transform: `rotateZ(${rotation !== null && rotation !== void 0 ? rotation : 0}deg)`,
+      } },
+      h("slot", { name: name }, children))));
+};
+const SvgShadow = ({ id }) => {
+  return (h("filter", { id: id, filterUnits: "userSpaceOnUse" },
+    h("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "2" }),
+    h("feOffset", { dx: "0", dy: "1", result: "offsetblur" }),
+    h("feFlood", { "flood-color": "#000000", "flood-opacity": "0.25" }),
+    h("feComposite", { in2: "offsetblur", operator: "in" }),
+    h("feMerge", null,
+      h("feMergeNode", null),
+      h("feMergeNode", { in: "SourceGraphic" }))));
+};
+
+class MarkupInteractionHandler {
+  constructor() {
+    this.handlePointerDown = (event) => {
+      this.handleInteractionAttempt(event);
+    };
+    this.handlePointerMove = (event) => {
+      this.handleInteractionMove(event);
+    };
+    this.handlePointerUp = (event) => {
+      window.removeEventListener('pointermove', this.handlePointerMove);
+      window.removeEventListener('pointerup', this.handlePointerUp);
+      this.handleInteractionEnd(event);
+    };
+    this.resizeObserver = new ResizeObserver(([entry]) => {
+      this.elementBounds = this.computeBoundingRect();
+    });
+  }
+  initialize(element, api) {
+    this.element = element;
+    this.api = api;
+    this.elementBounds = this.computeBoundingRect();
+    this.resizeObserver.observe(this.element);
+    this.element.addEventListener('pointerdown', this.handlePointerDown);
+  }
+  dispose() {
+    var _a;
+    this.resizeObserver.disconnect();
+    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.handlePointerDown);
+    this.element = undefined;
+    this.api = undefined;
+  }
+  acceptInteraction() {
+    window.addEventListener('pointermove', this.handlePointerMove);
+    window.addEventListener('pointerup', this.handlePointerUp);
+  }
+}
+
+export { MarkupInteractionHandler as M, RelativeAnchor as R, SvgShadow as S, isVertexViewerCircleMarkup as a, isVertexViewerFreeformMarkup as b, translatePointToScreen as c, isValidStartEvent as d, createArrowheadPoints as e, isValidPointData as f, arrowheadPointsToPolygonPoints as g, transformRectangle as h, isVertexViewerArrowMarkup as i, parseBounds as j, translateRectToScreen as k, translatePointsToBounds as l, parsePoints as m, getBoundingBox2dAnchorPosition as n, parsePoint as p, translatePointToRelative as t };
+
+//# sourceMappingURL=interactions.js.map

package/dist/components/interactions.js.map

@@ -0,0 +1 @@
+{"file":"interactions.js","mappings":"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","names":["Point","angle","Angle","Matrix","Rectangle","Dimensions","dimensions","point"],"sources":["./src/components/viewer-markup-arrow/utils.ts","./src/components/viewer-markup-circle/utils.ts","./src/components/viewer-markup-freeform/utils.ts","./src/components/viewer-markup/markup-utils.ts","./src/components/viewer-markup/viewer-markup-components.tsx","./src/lib/markup/interactions.ts"],"sourcesContent":["import { Angle, Matrix, Point } from '@vertexvis/geometry';\n\nexport interface ArrowheadPoints {\n  tip: Point.Point;\n  left: Point.Point;\n  right: Point.Point;\n  base: Point.Point;\n}\n\nexport function createArrowheadPoints(\n  start: Point.Point,\n  end: Point.Point,\n  arrowAngle = 60\n): ArrowheadPoints {\n  const distance = Point.distance(start, end);\n  const angle = Angle.normalize(\n    Angle.toDegrees(Angle.fromPoints(start, end)) - 270\n  );\n\n  // Adjust the arrow height in relation to the distance between the to and from\n  // points. Uses a min and max size so the arrow doesn't become cartoonish.\n  const height = Math.max(4, Math.min(16, distance * 0.25));\n  const sideLength = height / Math.cos(Angle.toRadians(90 - arrowAngle));\n\n  const rotation = Matrix.rotation(angle);\n  const arrowLeft = Point.polar(sideLength, Angle.toRadians(arrowAngle * 2));\n  const arrowRight = Point.polar(sideLength, Angle.toRadians(arrowAngle));\n  const arrowBase = Point.polar(height, Angle.toRadians(90));\n\n  return {\n    tip: end,\n    left: Point.add(end, Matrix.transformPoint(rotation, arrowLeft)),\n    right: Point.add(end, Matrix.transformPoint(rotation, arrowRight)),\n    base: Point.add(end, Matrix.transformPoint(rotation, arrowBase)),\n  };\n}\n\nexport function arrowheadPointsToPolygonPoints(\n  points: ArrowheadPoints\n): string {\n  return [points.tip, points.right, points.base, points.left]\n    .map((pt) => `${pt.x},${pt.y}`)\n    .join(' ');\n}\n\nexport function isVertexViewerArrowMarkup(\n  el: unknown\n): el is HTMLVertexViewerMarkupArrowElement {\n  return (\n    el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-ARROW'\n  );\n}\n\nexport function parsePoint(\n  value: string | Point.Point | undefined\n): Point.Point | undefined {\n  return typeof value === 'string' ? Point.fromJson(value) : value;\n}\n","import { Rectangle } from '@vertexvis/geometry';\n\nexport function isVertexViewerCircleMarkup(\n  el: unknown\n): el is HTMLVertexViewerMarkupCircleElement {\n  return (\n    el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-CIRCLE'\n  );\n}\n\nexport function parseBounds(\n  value: string | Rectangle.Rectangle | undefined\n): Rectangle.Rectangle | undefined {\n  return typeof value === 'string' ? Rectangle.fromJson(value) : value;\n}\n","import { Point } from '@vertexvis/geometry';\n\nexport function parsePoints(\n  value: string | Point.Point[] | undefined\n): Point.Point[] | undefined {\n  return typeof value === 'string'\n    ? JSON.parse(value).map((values: number[]) =>\n        Point.fromJson(JSON.stringify(values))\n      )\n    : value;\n}\n\nexport function isVertexViewerFreeformMarkup(\n  el: unknown\n): el is HTMLVertexViewerMarkupFreeformElement {\n  return (\n    el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-MARKUP-FREEFORM'\n  );\n}\n","import { Dimensions, Point, Rectangle } from '@vertexvis/geometry';\n\nimport { isVertexViewerArrowMarkup } from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\n\nexport type BoundingBox2dAnchorPosition =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'center';\n\nexport function getBoundingBox2dAnchorPosition(\n  rect: Rectangle.Rectangle,\n  position: BoundingBox2dAnchorPosition\n): Point.Point {\n  switch (position) {\n    case 'top-left':\n      return Point.create(rect.x, rect.y);\n    case 'top':\n      return Point.create(rect.x + rect.width / 2, rect.y);\n    case 'top-right':\n      return Point.create(rect.x + rect.width, rect.y);\n    case 'right':\n      return Point.create(rect.x + rect.width, rect.y + rect.height / 2);\n    case 'bottom-right':\n      return Point.create(rect.x + rect.width, rect.y + rect.height);\n    case 'bottom':\n      return Point.create(rect.x + rect.width / 2, rect.y + rect.height);\n    case 'bottom-left':\n      return Point.create(rect.x, rect.y + rect.height);\n    case 'left':\n      return Point.create(rect.x, rect.y + rect.height / 2);\n    case 'center':\n      return Rectangle.center(rect);\n  }\n}\n\nexport function translatePointToScreen(\n  pt: Point.Point,\n  canvasDimensions: Dimensions.Dimensions\n): Point.Point {\n  const scaleFactor = canvasDimensions.height;\n  return Point.add(\n    Point.scale(pt, scaleFactor, scaleFactor),\n    Dimensions.center(canvasDimensions)\n  );\n}\n\nexport function translatePointToBounds(\n  pt: Point.Point,\n  rect: Rectangle.Rectangle,\n  canvasDimensions: Dimensions.Dimensions\n): Point.Point {\n  const rectToScreen = translateRectToScreen(rect, canvasDimensions);\n  return Point.add(pt, rectToScreen);\n}\n\nexport function translateDimensionsToScreen(\n  dimensions: Dimensions.Dimensions,\n  canvasDimensions: Dimensions.Dimensions\n): Dimensions.Dimensions {\n  const scaleFactor = canvasDimensions.height;\n  return Dimensions.scale(scaleFactor, scaleFactor, dimensions);\n}\n\n/**\n * Translates a rectangle in relative units, to a rectangle in screen units.\n *\n * Shape coordinates are persisted in relative units, so they can be presented\n * at any size.\n */\nexport function translateRectToScreen(\n  rect: Rectangle.Rectangle,\n  canvasDimensions: Dimensions.Dimensions\n): Rectangle.Rectangle {\n  const position = translatePointToScreen(rect, canvasDimensions);\n  const dimensions = translateDimensionsToScreen(rect, canvasDimensions);\n  return Rectangle.fromPointAndDimensions(position, dimensions);\n}\n\n/**\n * Translates a point in screen units, to a point in relative units.\n */\nexport function translatePointToRelative(\n  pt: Point.Point,\n  canvasDimensions: Dimensions.Dimensions\n): Point.Point {\n  const scaleFactor = 1 / canvasDimensions.height;\n  const point = Point.scale(\n    Point.subtract(pt, Dimensions.center(canvasDimensions)),\n    scaleFactor,\n    scaleFactor\n  );\n\n  return point;\n}\n\n/**\n * Translates a set of points in relative `original` units to\n * points in relative `bounds` units.\n */\nexport function translatePointsToBounds(\n  points: Point.Point[],\n  original: Rectangle.Rectangle,\n  bounds: Rectangle.Rectangle\n): Point.Point[] {\n  return points.map((pt) =>\n    Point.add(\n      Point.scale(\n        Point.subtract(pt, original),\n        bounds.width / (original.width || 1),\n        bounds.height / (original.height || 1)\n      ),\n      bounds\n    )\n  );\n}\n\nexport function createRectangle(\n  initialPoint: Point.Point,\n  currentPoint: Point.Point,\n  maintainAspectRatio: boolean\n): Rectangle.Rectangle {\n  const bounds = Rectangle.fromPoints(initialPoint, currentPoint);\n  if (maintainAspectRatio) {\n    const fitBoundsSize = Math.max(bounds.width, bounds.height);\n    const isPortrait = bounds.height > bounds.width;\n    const currentIsLeftOfInitial = currentPoint.x <= initialPoint.x;\n    const currentIsAboveInitial = currentPoint.y <= initialPoint.y;\n    const fitBoundsX = currentIsLeftOfInitial\n      ? isPortrait\n        ? initialPoint.x - fitBoundsSize\n        : currentPoint.x\n      : initialPoint.x;\n    const fitBoundsY = currentIsAboveInitial\n      ? isPortrait\n        ? currentPoint.y\n        : initialPoint.y - fitBoundsSize\n      : initialPoint.y;\n    return Rectangle.create(\n      fitBoundsX,\n      fitBoundsY,\n      fitBoundsSize,\n      fitBoundsSize\n    );\n  } else {\n    return bounds;\n  }\n}\n\nexport function transformRectangle(\n  bounds: Rectangle.Rectangle,\n  start: Point.Point,\n  current: Point.Point,\n  anchor: BoundingBox2dAnchorPosition,\n  maintainAspectRatio?: boolean\n): Rectangle.Rectangle {\n  const delta = Point.subtract(current, start);\n  const { x: left, y: top, width: w, height: h } = bounds;\n  const right = left + w;\n  const bottom = top + h;\n  const topLeft = Point.create(left, top);\n  const bottomLeft = Point.create(left, bottom);\n  const topRight = Point.create(right, top);\n  const bottomRight = Point.create(right, bottom);\n  switch (anchor) {\n    case 'top-left':\n      return createRectangle(bottomRight, current, !!maintainAspectRatio);\n    case 'top':\n      return createRectangle(\n        bottomRight,\n        Point.create(left, current.y),\n        !!maintainAspectRatio\n      );\n    case 'top-right':\n      return createRectangle(bottomLeft, current, !!maintainAspectRatio);\n    case 'right':\n      return createRectangle(\n        bottomLeft,\n        Point.create(current.x, top),\n        !!maintainAspectRatio\n      );\n    case 'bottom-right':\n      return createRectangle(topLeft, current, !!maintainAspectRatio);\n    case 'bottom':\n      return createRectangle(\n        topLeft,\n        Point.create(right, current.y),\n        !!maintainAspectRatio\n      );\n    case 'bottom-left':\n      return createRectangle(topRight, current, !!maintainAspectRatio);\n    case 'left':\n      return createRectangle(\n        bottomRight,\n        Point.create(current.x, top),\n        !!maintainAspectRatio\n      );\n    case 'center':\n      return Rectangle.create(\n        bounds.x + delta.x,\n        bounds.y + delta.y,\n        bounds.width,\n        bounds.height\n      );\n  }\n}\n\nexport function isVertexViewerMarkupElement(\n  el: HTMLElement\n): el is\n  | HTMLVertexViewerMarkupArrowElement\n  | HTMLVertexViewerMarkupCircleElement\n  | HTMLVertexViewerMarkupFreeformElement {\n  return (\n    isVertexViewerArrowMarkup(el) ||\n    isVertexViewerCircleMarkup(el) ||\n    isVertexViewerFreeformMarkup(el)\n  );\n}\n\nexport function isValidPointData(...points: Point.Point[]): boolean {\n  return points.every((pt) => !isNaN(pt.x) && !isNaN(pt.y));\n}\n\nexport function isValidStartEvent(event: PointerEvent): boolean {\n  const el = event.target as HTMLElement;\n\n  return isVertexViewerMarkupElement(el) && el.mode !== 'edit';\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nexport interface RelativeAnchorProps {\n  id?: string;\n  rotation?: number;\n  name: string;\n  point: Point.Point;\n  onPointerDown?: (event: PointerEvent) => void;\n}\n\nexport const RelativeAnchor: FunctionalComponent<RelativeAnchorProps> = (\n  { id, rotation, name, point, onPointerDown },\n  children\n) => {\n  return (\n    <div\n      id={id}\n      class=\"bounds-anchor-position\"\n      style={{\n        top: `${point.y}px`,\n        left: `${point.x}px`,\n      }}\n      onTouchStart={(event) => event.preventDefault()}\n      onPointerDown={onPointerDown}\n    >\n      <div\n        class=\"bounds-anchor\"\n        style={{\n          transform: `rotateZ(${rotation ?? 0}deg)`,\n        }}\n      >\n        <slot name={name}>{children}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport interface SvgShadowProps {\n  id: string;\n}\n\nexport const SvgShadow: FunctionalComponent<SvgShadowProps> = ({ id }) => {\n  return (\n    <filter id={id} filterUnits=\"userSpaceOnUse\">\n      <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n      <feOffset dx=\"0\" dy=\"1\" result=\"offsetblur\" />\n      <feFlood flood-color=\"#000000\" flood-opacity=\"0.25\" />\n      <feComposite in2=\"offsetblur\" operator=\"in\" />\n      <feMerge>\n        <feMergeNode />\n        <feMergeNode in=\"SourceGraphic\" />\n      </feMerge>\n    </filter>\n  );\n};\n","import type { InteractionApi, InteractionHandler } from '../interactions';\n\nexport abstract class MarkupInteractionHandler implements InteractionHandler {\n  protected element?: HTMLElement;\n  protected elementBounds?: DOMRect;\n  protected api?: InteractionApi;\n\n  private resizeObserver: ResizeObserver;\n\n  public constructor() {\n    this.resizeObserver = new ResizeObserver(([entry]) => {\n      this.elementBounds = this.computeBoundingRect();\n    });\n  }\n\n  public initialize(element: HTMLElement, api: InteractionApi): void {\n    this.element = element;\n    this.api = api;\n\n    this.elementBounds = this.computeBoundingRect();\n    this.resizeObserver.observe(this.element);\n\n    this.element.addEventListener('pointerdown', this.handlePointerDown);\n  }\n\n  public dispose(): void {\n    this.resizeObserver.disconnect();\n    this.element?.removeEventListener('pointerdown', this.handlePointerDown);\n\n    this.element = undefined;\n    this.api = undefined;\n  }\n\n  protected acceptInteraction(): void {\n    window.addEventListener('pointermove', this.handlePointerMove);\n    window.addEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private handlePointerDown = (event: PointerEvent): void => {\n    this.handleInteractionAttempt(event);\n  };\n\n  private handlePointerMove = (event: PointerEvent): void => {\n    this.handleInteractionMove(event);\n  };\n\n  private handlePointerUp = (event: PointerEvent): void => {\n    window.removeEventListener('pointermove', this.handlePointerMove);\n    window.removeEventListener('pointerup', this.handlePointerUp);\n\n    this.handleInteractionEnd(event);\n  };\n\n  protected abstract computeBoundingRect(): DOMRect;\n\n  protected abstract handleInteractionAttempt(event: PointerEvent): void;\n\n  protected abstract handleInteractionMove(event: PointerEvent): void;\n\n  protected abstract handleInteractionEnd(event: PointerEvent): void;\n}\n"],"version":3}