@vertexvis/viewer 0.24.4-canary.8 → 0.24.4

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

@@ -61,7 +61,7 @@ function getClosestCenterToPoint(boxPoint, pointToMeasure, dimensions) {
   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;transition:opacity 0.3s ease-in}.pin-selected{stroke-width:1;stroke:var(--viewer-annotations-pin-selected-stroke)}.pin-occluded{opacity:.3;transition:opacity 0.3s ease-in}.pin-detached{visibility:hidden}";
+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;transition:opacity 0.3s ease-in;transform:translate(0px, -12px)}.pin-selected{stroke-width:1;stroke:var(--viewer-annotations-pin-selected-stroke)}.pin-occluded{opacity:.3;transition:opacity 0.3s ease-in}.pin-detached{visibility:hidden}";
 
 const ViewerPinGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"viewer-pin-group.js","mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAaO,MAAM,WAAW,GAA0C,CAAC,EACjE,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT;EACC,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;EAE3C,QACE,EAAC,QAAQ;IACN,SAAS,CAAC,GAAG,CAAC,KACb,WACE,EAAE,EAAC,YAAY,EACf,KAAK,EAAEA,UAAU,CAAC,YAAY,EAAE;QAC9B,QAAQ,EAAE,QAAQ;QAClB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB,CAAC,EACF,KAAK,EAAE;QACL,UAAU,EAAE,YAAY;OACzB,GACI,CACR;IAEA,SAAS,CAAC,GAAG,CAAC,KACb,0BACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAEA,UAAU,CAAC,KAAK,EAAE;QACvB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB,CAAC,EACF,KAAK,EAAE;QACL,KAAK,EAAE,YAAY;OACpB,GACD,CACH,CACQ,EACX;AACJ,CAAC;;SCnDe,uBAAuB,CACrC,QAAqB,EACrB,cAA2B,EAC3B,UAAiC;EAEjC,MAAM,QAAQ,GAAG;IACf,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC;IACpC,CAAC,EAAE,QAAQ,CAAC,CAAC;GACd,CAAC;EAEF,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC;IACpC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM;GAClC,CAAC;EAEF,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK;IAChC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC;GACtC,CAAC;EAEF,MAAM,SAAS,GAAG;IAChB,CAAC,EAAE,QAAQ,CAAC,CAAC;IACb,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC;GACtC,CAAC;EAEF,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;EAElE,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,KACzCC,KAAK,CAAC,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,CAC1C,CAAC;EAEF,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;EACjE,OAAO,UAAU,CAAC,cAAc,CAAC,CAAC;AACpC;;ACnCA,MAAM,iBAAiB,GAAG,yxCAAyxC;;MC6BtyC,cAAc;EAL3B;;;;;;IAgBS,WAAM,GAAoBC,OAAO,CAAC,YAAY,EAAE,CAAC;;;;IAMjD,yBAAoB,GAAoBA,OAAO,CAAC,YAAY,EAAE,CAAC;;;;IAY/D,aAAQ,GAAa,IAAI,QAAQ,EAAE,CAAC;;;;IAYpC,aAAQ,GAAG,KAAK,CAAC;;;;;IAOjB,aAAQ,GAAG,KAAK,CAAC;;;;;IAOjB,aAAQ,GAAG,KAAK,CAAC;IAGhB,2BAAsB,GAAG,CAAC,CAAC;IA6F3B,oBAAe,GAAG;MACxB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC;KAC/D,CAAC;GA+EH;EAxKW,gBAAgB;;IACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAExB,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,EAAE;MAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,CAAC;KAC1B;GACF;;;;EAMS,MAAM,2BAA2B,CACzC,KAA2B;IAE3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;GAC9B;;;;EAMS,MAAM,0BAA0B,CACxC,KAA2B;IAE3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;GAC9B;EAES,oBAAoB;;IAC5B,MAAA,IAAI,CAAC,OAAO,0CAAE,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACxE,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;GACnC;EAES,MAAM;;IACd,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE;MACpB,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;KACvC;IAED,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjE,QACE,EAAC,QAAQ,QACP,gDACe,aAAa,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAChC,aAAa,EAAE;;QACb,OAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,CAAC;QAC7B,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;OAChC,EACD,WAAW,EAAE,KAAK,IAElB,EAAC,WAAW,IACV,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACwB,EAE3B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KACtD,EAAC,QAAQ,QACP,oCACE,EAAE,EAAE,kBAAkB,MAAA,IAAI,CAAC,GAAG,0CAAE,EAAE,EAAE,EACpC,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,GACP,EAEhC,+BACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,GACZ,CAClB,CACZ,CACQ,EACX;GACH;EAMO,gBAAgB;IACtB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE;MACxB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAEpE,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;MACvE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC3C;GACF;EAEO,gBAAgB,CAAC,GAAQ;IAC/B,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE;MAClD,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI;UACtD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC;UACvD,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAChE;IAED,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC;GACxC;EAEO,uBAAuB,CAC7B,GAAQ,EACR,aAAsB;IAEtB,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,oBAAoB,CACjC,GAAG,CAAC,aAAa,EACjB,IAAI,CAAC,oBAAoB,EACzB,aAAa,CACd;KACF,CAAC;GACH;EAEO,oBAAoB,CAC1B,GAAY,EACZ,aAAsB;;IAEtB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;IAEtE,MAAM,cAAc,GAAG,sBAAsB,CAC3C,GAAG,CAAC,KAAK,CAAC,KAAK,EACf,aAAa,CACd,CAAC;IAEF,MAAM,UAAU,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,0CAAE,WAAW,KAAI,CAAC,CAAC;IACrE,MAAM,WAAW,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,0CAAE,YAAY,KAAI,CAAC,CAAC;IAEvE,OAAO;MACL,QAAQ;MACR,UAAU,EAAE,uBAAuB,CAAC,cAAc,EAAE,QAAQ,EAAE;QAC5D,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,WAAW;OACpB,CAAC;KACH,CAAC;GACH;EAEO,uBAAuB;;IAC7B,IACE,IAAI,CAAC,aAAa,IAAI,IAAI;MAC1B,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,WAAW,EAAE,MAAK,MAAM;MAC5C,IAAI,CAAC,GAAG,IAAI,IAAI,EAChB;MACA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;KACvD;GACF;EAEO,SAAS;;IACf,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,MAAA,IAAI,CAAC,GAAG,0CAAE,EAAE,CAAC,CAAC;GACpD;EAEO,oBAAoB,CAC1B,EAAmB,EACnB,oBAAqC,EACrC,UAAiC;IAEjC,MAAM,KAAK,GAAGC,OAAO,CAAC,eAAe,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC;IAChE,OAAO,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;GAC7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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  occluded: boolean;\n  detached: boolean;\n}\n\nexport const PinRenderer: FunctionalComponent<PinRendererProps> = ({\n  pin,\n  selected,\n  occluded,\n  detached,\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', {\n            selected: selected,\n            'pin-occluded': occluded,\n            'pin-detached': detached,\n          })}\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', {\n            'pin-selected': selected,\n            'pin-occluded': occluded,\n            'pin-detached': detached,\n          })}\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  transition: opacity 0.3s ease-in;\n}\n\n.pin-selected {\n  stroke-width: 1;\n  stroke: var(--viewer-annotations-pin-selected-stroke);\n}\n\n.pin-occluded {\n  opacity: .3;\n  transition: opacity 0.3s ease-in;\n}\n\n.pin-detached {\n  visibility: hidden;\n}","import {\n  Component,\n  Fragment,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Listen,\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 the pin is \"selected\"\n   */\n  @Prop()\n  public selected = false;\n\n  /**\n   * @internal\n   * Whether the pin is occluded\n   */\n  @Prop({ mutable: true, reflect: true })\n  public occluded = false;\n\n  /**\n   * @internal\n   * Whether the pin is detached\n   */\n  @Prop({ mutable: true, reflect: true })\n  public detached = 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  /**\n   * @ignore\n   */\n  @Listen('occlusionStateChanged')\n  protected async handleOcclusionStateChanged(\n    event: CustomEvent<boolean>\n  ): Promise<void> {\n    this.occluded = event.detail;\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('detachedStateChanged')\n  protected async handleDetachedStateChanged(\n    event: CustomEvent<boolean>\n  ): Promise<void> {\n    this.detached = event.detail;\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={async () => {\n            await this.labelEl?.submit();\n            this.selectPin();\n            this.handleAnchorPointerDown();\n          }}\n          detachedOff={false}\n        >\n          <PinRenderer\n            pin={this.pin}\n            selected={this.selected}\n            occluded={this.occluded}\n            detached={this.detached}\n          />\n        </vertex-viewer-dom-element>\n\n        {isTextPin(this.pin) && !this.occluded && !this.detached && (\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}
+{"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  occluded: boolean;\n  detached: boolean;\n}\n\nexport const PinRenderer: FunctionalComponent<PinRendererProps> = ({\n  pin,\n  selected,\n  occluded,\n  detached,\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', {\n            selected: selected,\n            'pin-occluded': occluded,\n            'pin-detached': detached,\n          })}\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', {\n            'pin-selected': selected,\n            'pin-occluded': occluded,\n            'pin-detached': detached,\n          })}\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  transition: opacity 0.3s ease-in;\n\n  /**\n   * Place bottom point of the pin at the location instead of the middle of the pin\n   */\n  transform: translate(0px, -12px);\n}\n\n.pin-selected {\n  stroke-width: 1;\n  stroke: var(--viewer-annotations-pin-selected-stroke);\n}\n\n.pin-occluded {\n  opacity: .3;\n  transition: opacity 0.3s ease-in;\n}\n\n.pin-detached {\n  visibility: hidden;\n}","import {\n  Component,\n  Fragment,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  h,\n  Listen,\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 the pin is \"selected\"\n   */\n  @Prop()\n  public selected = false;\n\n  /**\n   * @internal\n   * Whether the pin is occluded\n   */\n  @Prop({ mutable: true, reflect: true })\n  public occluded = false;\n\n  /**\n   * @internal\n   * Whether the pin is detached\n   */\n  @Prop({ mutable: true, reflect: true })\n  public detached = 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  /**\n   * @ignore\n   */\n  @Listen('occlusionStateChanged')\n  protected async handleOcclusionStateChanged(\n    event: CustomEvent<boolean>\n  ): Promise<void> {\n    this.occluded = event.detail;\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('detachedStateChanged')\n  protected async handleDetachedStateChanged(\n    event: CustomEvent<boolean>\n  ): Promise<void> {\n    this.detached = event.detail;\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={async () => {\n            await this.labelEl?.submit();\n            this.selectPin();\n            this.handleAnchorPointerDown();\n          }}\n          detachedOff={false}\n        >\n          <PinRenderer\n            pin={this.pin}\n            selected={this.selected}\n            occluded={this.occluded}\n            detached={this.detached}\n          />\n        </vertex-viewer-dom-element>\n\n        {isTextPin(this.pin) && !this.occluded && !this.detached && (\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/esm/{controller-00b61632.js → controller-8cfb590e.js}

@@ -2,7 +2,7 @@
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
 import { g as googleProtobuf, w as wrappers_pb, a as grpcWebClient_umd } from './wrappers_pb-6dce518c.js';
-import { u as uuid_pb, p as paging_pb, C as CustomError } from './errors-0cbe2f60.js';
+import { u as uuid_pb, p as paging_pb, C as CustomError } from './errors-3fccf79a.js';
 import { c as createCommonjsModule } from './_commonjsHelpers-43fe435c.js';
 import { E as EventDispatcher } from './browser.esm-340e5d9b.js';
 import { i as isLoadedRow, f as fromNodeProto } from './row-e51da519.js';
@@ -6871,4 +6871,4 @@ SceneTreeController.MAX_SUBSCRIPTION_RETRY_COUNT = 2;
 
 export { SceneTreeController as S, SceneTreeAPIClient_1 as a, SceneTreeErrorDetails as b, SceneTreeErrorCode as c, webSocketSubscriptionTransportFactory as w };
 
-//# sourceMappingURL=controller-00b61632.js.map
+//# sourceMappingURL=controller-8cfb590e.js.map