@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

package/dist/components/viewer-pin-group.js

@@ -0,0 +1,207 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { h, Fragment, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { p as point, m as matrix4, v as vector3 } from './bundle.esm.js';
+import './controller.js';
+import './cursors.js';
+import './mapper.js';
+import './wrappers_pb.js';
+import './streamAttributes.js';
+import { V as Viewport } from './viewport.js';
+import { P as PinController, t as translatePointToScreen, d as defineCustomElement$2 } from './viewer-pin-label.js';
+import { g as getPinColors, i as isTextPin, a as isIconPin, P as PinModel } from './model2.js';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './viewer-dom-element.js';
+import { d as defineCustomElement$3 } from './viewer-icon.js';
+import { d as defineCustomElement$1 } from './viewer-pin-label-line.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const PinRenderer = ({ pin, selected, }) => {
+  const { primaryColor } = getPinColors(pin);
+  return (h(Fragment, null,
+    isTextPin(pin) && (h("div", { id: "pin-anchor", class: classnames('pin-anchor', { selected: selected }), style: {
+        background: primaryColor,
+      } })),
+    isIconPin(pin) && (h("vertex-viewer-icon", { name: "pin-fill", size: "lg", class: classnames('pin', { 'pin-selected': selected }), style: {
+        color: primaryColor,
+      } }))));
+};
+
+function getClosestCenterToPoint(boxPoint, pointToMeasure, dimensions) {
+  const topPoint = {
+    x: boxPoint.x + dimensions.width / 2,
+    y: boxPoint.y,
+  };
+  const bottomPoint = {
+    x: boxPoint.x + dimensions.width / 2,
+    y: boxPoint.y + dimensions.height,
+  };
+  const rightPoint = {
+    x: boxPoint.x + dimensions.width,
+    y: boxPoint.y + dimensions.height / 2,
+  };
+  const leftPoint = {
+    x: boxPoint.x,
+    y: boxPoint.y + dimensions.height / 2,
+  };
+  const candidates = [topPoint, bottomPoint, leftPoint, rightPoint];
+  const distances = candidates.map((candidate) => point.distance(candidate, pointToMeasure));
+  const candidateIndex = distances.indexOf(Math.min(...distances));
+  return candidates[candidateIndex];
+}
+
+const viewerPinGroupCss = ":host{--viewer-annotations-pin-primary-color:var(--blue-700);--viewer-annotations-pin-accent-color:var(--blue-200);--viewer-annotations-pin-dot-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-font-size:0.75rem;--viewer-annotations-pin-selected-stroke:var(--white);--viewer-annotations-pin-selected-border:2px solid var(--white);--viewer-annotations-pin-label-border:2px solid var(--black);--viewer-annotations-pin-selected-stroke:var(--white);font-size:var(--viewer-annotations-pin-font-size);position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}.pin-anchor{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;width:9px;height:9px;box-sizing:border-box;border:var(--viewer-annotations-pin-label-border);background:var(--viewer-annotations-pin-dot-color);pointer-events:auto;cursor:pointer}.selected{width:13px;height:13px;border:var(--viewer-annotations-pin-selected-border)}.pin{color:var(--viewer-annotations-pin-color);cursor:pointer}.pin-selected{stroke-width:1;stroke:var(--viewer-annotations-pin-selected-stroke)}";
+
+const ViewerPinGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * The local matrix of this element.
+     */
+    this.matrix = matrix4.makeIdentity();
+    /**
+     * Projection view matrix used for computing the position of the pin line
+     */
+    this.projectionViewMatrix = matrix4.makeIdentity();
+    /**
+     * The model that contains the entities and outcomes from performing pin operations
+     */
+    this.pinModel = new PinModel();
+    /**
+     * Whether or not the pin is "selected"
+     */
+    this.selected = false;
+    this.invalidateStateCounter = 0;
+    this.invalidateState = () => {
+      this.invalidateStateCounter = this.invalidateStateCounter + 1;
+    };
+  }
+  componentDidLoad() {
+    var _a;
+    this.setLabelObserver();
+    if (this.pinController == null) {
+      this.pinController = new PinController(this.pinModel);
+    }
+    if (this.selected) {
+      (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('labelChanged', this.invalidateState);
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  render() {
+    var _a;
+    if (this.pin == null) {
+      throw new Error('Unable to draw pin');
+    }
+    const { pinPoint, labelPoint } = this.computePinPoints(this.pin);
+    return (h(Fragment, null, h("vertex-viewer-dom-element", { "data-testid": `drawn-pin-${this.pin.id}`, position: this.pin.worldPosition, onPointerDown: (e) => {
+        if (e.buttons !== 2) {
+          e.stopPropagation();
+        }
+        this.selectPin();
+        this.handleAnchorPointerDown();
+      } }, h(PinRenderer, { pin: this.pin, selected: this.selected })), isTextPin(this.pin) && (h(Fragment, null, h("vertex-viewer-pin-label-line", { id: `pin-label-line-${(_a = this.pin) === null || _a === void 0 ? void 0 : _a.id}`, pinPoint: pinPoint, pin: this.pin, labelPoint: labelPoint, onPointerDown: () => this.selectPin() }), h("vertex-viewer-pin-label", { pin: this.pin, ref: (el) => (this.labelEl = el), elementBounds: this.elementBounds, pinController: this.pinController, onPointerDown: () => this.selectPin() })))));
+  }
+  setLabelObserver() {
+    if (this.labelEl != null) {
+      this.labelEl.addEventListener('labelChanged', this.invalidateState);
+      this.resizeObserver = new ResizeObserver(() => this.invalidateState());
+      this.resizeObserver.observe(this.labelEl);
+    }
+  }
+  computePinPoints(pin) {
+    if (this.elementBounds != null && this.pin != null) {
+      return isTextPin(this.pin) && this.pin.label.point != null
+        ? this.computeTextPinPoints(this.pin, this.elementBounds)
+        : this.computeDefaultPinPoints(this.pin, this.elementBounds);
+    }
+    return { pinPoint: pin.worldPosition };
+  }
+  computeDefaultPinPoints(pin, elementBounds) {
+    return {
+      pinPoint: this.getFromWorldPosition(pin.worldPosition, this.projectionViewMatrix, elementBounds),
+    };
+  }
+  computeTextPinPoints(pin, elementBounds) {
+    var _a, _b, _c, _d;
+    const { pinPoint } = this.computeDefaultPinPoints(pin, elementBounds);
+    const screenPosition = translatePointToScreen(pin.label.point, elementBounds);
+    const labelWidth = ((_b = (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+    const labelHeight = ((_d = (_c = this.labelEl) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.clientHeight) || 0;
+    return {
+      pinPoint,
+      labelPoint: getClosestCenterToPoint(screenPosition, pinPoint, {
+        width: labelWidth,
+        height: labelHeight,
+      }),
+    };
+  }
+  handleAnchorPointerDown() {
+    var _a, _b;
+    if (this.elementBounds != null &&
+      ((_a = this.pinController) === null || _a === void 0 ? void 0 : _a.getToolMode()) === 'edit' &&
+      this.pin != null) {
+      (_b = this.pinController) === null || _b === void 0 ? void 0 : _b.setDraggable({ id: this.pin.id });
+    }
+  }
+  selectPin() {
+    var _a, _b;
+    (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setSelectedPinId((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+  }
+  getFromWorldPosition(pt, projectionViewMatrix, dimensions) {
+    const ndcPt = vector3.transformMatrix(pt, projectionViewMatrix);
+    return Viewport.fromDimensions(dimensions).transformVectorToViewport(ndcPt);
+  }
+  static get style() { return viewerPinGroupCss; }
+}, [0, "vertex-viewer-pin-group", {
+    "pin": [16],
+    "matrix": [1040],
+    "projectionViewMatrix": [16],
+    "elementBounds": [1040],
+    "pinModel": [16],
+    "pinController": [16],
+    "selected": [4],
+    "invalidateStateCounter": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-pin-group", "vertex-viewer-dom-element", "vertex-viewer-icon", "vertex-viewer-pin-label", "vertex-viewer-pin-label-line"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-pin-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerPinGroup);
+      }
+      break;
+    case "vertex-viewer-dom-element":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vertex-viewer-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-viewer-pin-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "vertex-viewer-pin-label-line":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ViewerPinGroup as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-pin-group.js.map

package/dist/components/viewer-pin-group.js.map

@@ -0,0 +1 @@
+{"file":"viewer-pin-group.js","mappings":"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","names":["classNames","Point","Matrix4","Vector3"],"sources":["./src/components/viewer-pin-group/pin-renderer.tsx","./src/components/viewer-pin-group/utils.ts","./src/components/viewer-pin-group/viewer-pin-group.css?tag=vertex-viewer-pin-group","./src/components/viewer-pin-group/viewer-pin-group.tsx"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { getPinColors, isIconPin, isTextPin, Pin } from '../../lib/pins/model';\n\ninterface PinRendererProps {\n  pin?: Pin;\n  selected: boolean;\n}\n\nexport const PinRenderer: FunctionalComponent<PinRendererProps> = ({\n  pin,\n  selected,\n}) => {\n  const { primaryColor } = getPinColors(pin);\n\n  return (\n    <Fragment>\n      {isTextPin(pin) && (\n        <div\n          id=\"pin-anchor\"\n          class={classNames('pin-anchor', { selected: selected })}\n          style={{\n            background: primaryColor,\n          }}\n        ></div>\n      )}\n\n      {isIconPin(pin) && (\n        <vertex-viewer-icon\n          name=\"pin-fill\"\n          size=\"lg\"\n          class={classNames('pin', { 'pin-selected': selected })}\n          style={{\n            color: primaryColor,\n          }}\n        />\n      )}\n    </Fragment>\n  );\n};\n","import { Dimensions, Point } from '@vertexvis/geometry';\n\nexport function getClosestCenterToPoint(\n  boxPoint: Point.Point,\n  pointToMeasure: Point.Point,\n  dimensions: Dimensions.Dimensions\n): Point.Point {\n  const topPoint = {\n    x: boxPoint.x + dimensions.width / 2,\n    y: boxPoint.y,\n  };\n\n  const bottomPoint = {\n    x: boxPoint.x + dimensions.width / 2,\n    y: boxPoint.y + dimensions.height,\n  };\n\n  const rightPoint = {\n    x: boxPoint.x + dimensions.width,\n    y: boxPoint.y + dimensions.height / 2,\n  };\n\n  const leftPoint = {\n    x: boxPoint.x,\n    y: boxPoint.y + dimensions.height / 2,\n  };\n\n  const candidates = [topPoint, bottomPoint, leftPoint, rightPoint];\n\n  const distances = candidates.map((candidate) =>\n    Point.distance(candidate, pointToMeasure)\n  );\n\n  const candidateIndex = distances.indexOf(Math.min(...distances));\n  return candidates[candidateIndex];\n}\n",":host {\n\n  /**\n   * @prop  --viewer-annotations-pin-primary-color: A CSS color that\n   * specifies the primary color for the pins. This value gets used for the dot color \n   * and borders\n   */\n  --viewer-annotations-pin-primary-color: var(--blue-700);\n\n  /**\n   * @prop  --viewer-annotations-pin-accent-color: A CSS color that\n   * specifies the accent color for the pins. This value gets used for background colors\n   * \n   */\n\n  --viewer-annotations-pin-accent-color: var(--blue-200);\n  /**\n   * @prop  viewer-annotations-pin-dot-color: A CSS color that\n   * specifies the color of the anchor dot\n   */\n   --viewer-annotations-pin-dot-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop  --viewer-annotations-pin-color: A CSS color that\n   * specifies the color of the pin\n   */\n   --viewer-annotations-pin-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop  --viewer-annotations-pin-font-size: A CSS property to specify\n   the font size of the pin\n   */\n   --viewer-annotations-pin-font-size: 0.75rem;\n\n  /**\n   * @prop  --viewer-annotations-pin-selected-stroke: A CSS color that\n   * specifies the stroke color of a selected pin\n   */\n   --viewer-annotations-pin-selected-stroke: var(--white);\n\n  /**\n   * @prop   --viewer-annotations-pin-selected-border: A CSS color that\n   * specifies the border of a selected pin\n   */\n   --viewer-annotations-pin-selected-border:  2px solid var(--white);\n\n  /**\n   * @prop --viewer-annotations-pin-label-border: A CSS color that\n   * specifies the border of a text pin anchor\n   */\n   --viewer-annotations-pin-label-border:  2px solid var(--black);\n\n  /**\n   * @prop   --viewer-annotations-pin-selected-border: A CSS color that\n   * specifies the stroke of a selected default pin\n   */\n   --viewer-annotations-pin-selected-stroke: var(--white);\n\n  font-size: var(--viewer-annotations-pin-font-size);\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.pin-anchor {\n  position: absolute;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  display: block;\n  width: 9px;\n  height: 9px;\n  box-sizing: border-box;\n  border: var(--viewer-annotations-pin-label-border);\n  background: var(--viewer-annotations-pin-dot-color);\n  pointer-events: auto;\n  cursor: pointer;\n}\n\n.selected {\n  width: 13px;\n  height: 13px;\n  border: var(--viewer-annotations-pin-selected-border)\n}\n\n.pin {\n  color: var(--viewer-annotations-pin-color);\n  cursor: pointer;\n}\n\n.pin-selected {\n  stroke-width: 1;\n  stroke: var(--viewer-annotations-pin-selected-stroke);\n}","import {\n  Component,\n  Fragment,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { Dimensions, Matrix4, Point, Vector3 } from '@vertexvis/geometry';\n\nimport { Viewport } from '../..';\nimport { PinController } from '../../lib/pins/controller';\nimport { isTextPin, Pin, TextPin } from '../../lib/pins/model';\nimport { PinModel } from '../../lib/pins/model';\nimport { translatePointToScreen } from '../viewer-pin-tool/utils';\nimport { PinRenderer } from './pin-renderer';\nimport { getClosestCenterToPoint } from './utils';\n\ninterface ComputedPoints {\n  pinPoint: Point.Point;\n  labelPoint?: Point.Point;\n}\n\n@Component({\n  tag: 'vertex-viewer-pin-group',\n  styleUrl: 'viewer-pin-group.css',\n  shadow: false,\n})\nexport class ViewerPinGroup {\n  /**\n   * The pin to draw for the group\n   */\n  @Prop()\n  public pin?: Pin;\n\n  /**\n   * The local matrix of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public matrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n  /**\n   * Projection view matrix used for computing the position of the pin line\n   */\n  @Prop()\n  public projectionViewMatrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n  /**\n   * The dimensions of the canvas for the pins\n   */\n  @Prop({ mutable: true })\n  public elementBounds?: DOMRect;\n\n  /**\n   * The model that contains the entities and outcomes from performing pin operations\n   */\n  @Prop()\n  public pinModel: PinModel = new PinModel();\n\n  /**\n   * The controller that drives behavior for pin operations\n   */\n  @Prop()\n  public pinController?: PinController;\n\n  /**\n   * Whether or not the pin is \"selected\"\n   */\n  @Prop()\n  public selected = false;\n\n  @State()\n  private invalidateStateCounter = 0;\n\n  private labelEl: HTMLVertexViewerPinLabelElement | undefined;\n\n  private resizeObserver?: ResizeObserver;\n\n  protected componentDidLoad(): void {\n    this.setLabelObserver();\n\n    if (this.pinController == null) {\n      this.pinController = new PinController(this.pinModel);\n    }\n\n    if (this.selected) {\n      this.labelEl?.setFocus();\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    this.labelEl?.removeEventListener('labelChanged', this.invalidateState);\n    this.resizeObserver?.disconnect();\n  }\n\n  protected render(): JSX.Element {\n    if (this.pin == null) {\n      throw new Error('Unable to draw pin');\n    }\n\n    const { pinPoint, labelPoint } = this.computePinPoints(this.pin);\n\n    return (\n      <Fragment>\n        <vertex-viewer-dom-element\n          data-testid={`drawn-pin-${this.pin.id}`}\n          position={this.pin.worldPosition}\n          onPointerDown={(e) => {\n            if (e.buttons !== 2) {\n              e.stopPropagation();\n            }\n\n            this.selectPin();\n            this.handleAnchorPointerDown();\n          }}\n        >\n          <PinRenderer pin={this.pin} selected={this.selected} />\n        </vertex-viewer-dom-element>\n\n        {isTextPin(this.pin) && (\n          <Fragment>\n            <vertex-viewer-pin-label-line\n              id={`pin-label-line-${this.pin?.id}`}\n              pinPoint={pinPoint}\n              pin={this.pin}\n              labelPoint={labelPoint}\n              onPointerDown={() => this.selectPin()}\n            ></vertex-viewer-pin-label-line>\n\n            <vertex-viewer-pin-label\n              pin={this.pin}\n              ref={(el) => (this.labelEl = el)}\n              elementBounds={this.elementBounds}\n              pinController={this.pinController}\n              onPointerDown={() => this.selectPin()}\n            ></vertex-viewer-pin-label>\n          </Fragment>\n        )}\n      </Fragment>\n    );\n  }\n\n  private invalidateState = (): void => {\n    this.invalidateStateCounter = this.invalidateStateCounter + 1;\n  };\n\n  private setLabelObserver(): void {\n    if (this.labelEl != null) {\n      this.labelEl.addEventListener('labelChanged', this.invalidateState);\n\n      this.resizeObserver = new ResizeObserver(() => this.invalidateState());\n      this.resizeObserver.observe(this.labelEl);\n    }\n  }\n\n  private computePinPoints(pin: Pin): ComputedPoints {\n    if (this.elementBounds != null && this.pin != null) {\n      return isTextPin(this.pin) && this.pin.label.point != null\n        ? this.computeTextPinPoints(this.pin, this.elementBounds)\n        : this.computeDefaultPinPoints(this.pin, this.elementBounds);\n    }\n\n    return { pinPoint: pin.worldPosition };\n  }\n\n  private computeDefaultPinPoints(\n    pin: Pin,\n    elementBounds: DOMRect\n  ): ComputedPoints {\n    return {\n      pinPoint: this.getFromWorldPosition(\n        pin.worldPosition,\n        this.projectionViewMatrix,\n        elementBounds\n      ),\n    };\n  }\n\n  private computeTextPinPoints(\n    pin: TextPin,\n    elementBounds: DOMRect\n  ): ComputedPoints {\n    const { pinPoint } = this.computeDefaultPinPoints(pin, elementBounds);\n\n    const screenPosition = translatePointToScreen(\n      pin.label.point,\n      elementBounds\n    );\n\n    const labelWidth = this.labelEl?.firstElementChild?.clientWidth || 0;\n    const labelHeight = this.labelEl?.firstElementChild?.clientHeight || 0;\n\n    return {\n      pinPoint,\n      labelPoint: getClosestCenterToPoint(screenPosition, pinPoint, {\n        width: labelWidth,\n        height: labelHeight,\n      }),\n    };\n  }\n\n  private handleAnchorPointerDown(): void {\n    if (\n      this.elementBounds != null &&\n      this.pinController?.getToolMode() === 'edit' &&\n      this.pin != null\n    ) {\n      this.pinController?.setDraggable({ id: this.pin.id });\n    }\n  }\n\n  private selectPin(): void {\n    this.pinController?.setSelectedPinId(this.pin?.id);\n  }\n\n  private getFromWorldPosition(\n    pt: Vector3.Vector3,\n    projectionViewMatrix: Matrix4.Matrix4,\n    dimensions: Dimensions.Dimensions\n  ): Point.Point {\n    const ndcPt = Vector3.transformMatrix(pt, projectionViewMatrix);\n    return Viewport.fromDimensions(dimensions).transformVectorToViewport(ndcPt);\n  }\n}\n"],"version":3}

package/dist/components/viewer-pin-label-line.js

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getPinColors } from './model2.js';
+
+const viewerPinLabelLineCss = ":host{--viewer-annotations-pin-label-line-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-label-line-width:1\n\n  overflow: hidden;pointer-events:none}.label-line{pointer-events:auto;stroke:var(--viewer-annotations-pin-label-line-color);stroke-width:var( --viewer-annotations-pin-label-line-width);cursor:default}.svg{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none;height:100%;width:100%}";
+
+const VertexPinLabelLine = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const { primaryColor } = getPinColors(this.pin);
+    return (h(Host, null, h("svg", { class: "svg" }, h("line", { class: "label-line", style: {
+        stroke: primaryColor,
+      }, x1: (_a = this.labelPoint) === null || _a === void 0 ? void 0 : _a.x, y1: (_b = this.labelPoint) === null || _b === void 0 ? void 0 : _b.y, x2: (_c = this.pinPoint) === null || _c === void 0 ? void 0 : _c.x, y2: (_d = this.pinPoint) === null || _d === void 0 ? void 0 : _d.y }))));
+  }
+  static get style() { return viewerPinLabelLineCss; }
+}, [0, "vertex-viewer-pin-label-line", {
+    "pinPoint": [16],
+    "labelPoint": [16],
+    "pin": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-pin-label-line"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-pin-label-line":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VertexPinLabelLine);
+      }
+      break;
+  } });
+}
+
+export { VertexPinLabelLine as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-pin-label-line.js.map

package/dist/components/viewer-pin-label-line.js.map

@@ -0,0 +1 @@
+{"file":"viewer-pin-label-line.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,scAAsc;;MCgBvd,kBAAkB;;;;;EAUnB,MAAM;;IACd,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,KAAK,IACd,YACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE;QACL,MAAM,EAAE,YAAY;OACrB,EACD,EAAE,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,CAAC,EACtB,EAAE,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,CAAC,EACtB,EAAE,EAAE,MAAA,IAAI,CAAC,QAAQ,0CAAE,CAAC,EACpB,EAAE,EAAE,MAAA,IAAI,CAAC,QAAQ,0CAAE,CAAC,GACpB,CACE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/viewer-pin-label-line/viewer-pin-label-line.css?tag=vertex-viewer-pin-label-line","./src/components/viewer-pin-label-line/viewer-pin-label-line.tsx"],"sourcesContent":["\n:host {\n  /**\n   * @prop  --viewer-annotations-pin-label-line-color: A CSS color that\n   * specifies the color of the label line\n   */\n   --viewer-annotations-pin-label-line-color: var(--viewer-annotations-pin-primary-color);\n\n  /**\n   * @prop --viewer-annotations-pin-label-line-width: A CSS color that\n   * specifies the width of the label line\n   */\n   --viewer-annotations-pin-label-line-width: 1\n\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.label-line {\n  pointer-events: auto;\n  stroke: var(--viewer-annotations-pin-label-line-color);\n  stroke-width: var( --viewer-annotations-pin-label-line-width);\n  cursor: default;\n}\n\n.svg {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  pointer-events: none;\n  height: 100%;\n  width: 100%;\n}\n","import {\n  Component,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getPinColors, Pin } from '../../lib/pins/model';\n\n@Component({\n  tag: 'vertex-viewer-pin-label-line',\n  styleUrl: 'viewer-pin-label-line.css',\n  shadow: false,\n})\nexport class VertexPinLabelLine {\n  @Prop()\n  public pinPoint: Point.Point | undefined;\n\n  @Prop()\n  public labelPoint: Point.Point | undefined;\n\n  @Prop()\n  public pin: Pin | undefined;\n\n  protected render(): JSX.Element {\n    const { primaryColor } = getPinColors(this.pin);\n    return (\n      <Host>\n        <svg class=\"svg\">\n          <line\n            class=\"label-line\"\n            style={{\n              stroke: primaryColor,\n            }}\n            x1={this.labelPoint?.x}\n            y1={this.labelPoint?.y}\n            x2={this.pinPoint?.x}\n            y2={this.pinPoint?.y}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}