@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

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

@@ -0,0 +1,276 @@
+import { Component, Fragment, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+h, Prop, State, } from '@stencil/core';
+import { Matrix4, Vector3 } from '@vertexvis/geometry';
+import { Viewport } from '../..';
+import { PinController } from '../../lib/pins/controller';
+import { isTextPin } from '../../lib/pins/model';
+import { PinModel } from '../../lib/pins/model';
+import { translatePointToScreen } from '../viewer-markup/utils';
+import { PinRenderer } from './pin-renderer';
+import { getClosestCenterToPoint } from './utils';
+export class ViewerPinGroup {
+  constructor() {
+    /**
+     * 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.leafNodesRendered = false;
+    this.handleAnchorPointerDown = (event) => {
+      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,
+        });
+      }
+    };
+  }
+  componentDidLoad() {
+    this.setLabelObserver();
+    if (this.pinController == null) {
+      this.pinController = new PinController(this.pinModel);
+    }
+    this.leafNodesRendered = true;
+  }
+  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 computed = this.computePinPoints(this.pin);
+    const { pinPoint, labelPoint } = computed;
+    return (h(Fragment, null,
+      h("vertex-viewer-dom-element", { "data-testid": `drawn-pin-${this.pin.id}`, position: this.pin.worldPosition, onPointerDown: (e) => {
+          var _a, _b;
+          if (e.buttons !== 2) {
+            e.stopPropagation();
+          }
+          (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setSelectedPinId((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+          this.handleAnchorPointerDown(e);
+        } }, this.leafNodesRendered && (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, labelPoint: labelPoint }),
+        h("vertex-viewer-pin-label", { pin: this.pin, ref: (el) => {
+            this.labelEl = el;
+          }, elementBounds: this.elementBounds, pinController: this.pinController })))));
+  }
+  invalidateState() {
+    this.invalidateStateCounter = this.invalidateStateCounter + 1;
+  }
+  setLabelObserver() {
+    var _a;
+    const label = (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.addEventListener('labelChanged', this.invalidateState);
+    if (label != null) {
+      this.resizeObserver = new ResizeObserver(() => this.invalidateState());
+      this.resizeObserver.observe(label);
+    }
+  }
+  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;
+    const { pinPoint } = this.computeDefaultPinPoints(pin, elementBounds);
+    const screenPosition = translatePointToScreen(pin.label.point, elementBounds);
+    const label = (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.querySelector(`#pin-label-${(_b = this.pin) === null || _b === void 0 ? void 0 : _b.id}`);
+    const labelWidth = (label === null || label === void 0 ? void 0 : label.clientWidth) || 0;
+    const labelHeight = (label === null || label === void 0 ? void 0 : label.clientHeight) || 0;
+    return {
+      pinPoint,
+      labelPoint: getClosestCenterToPoint(screenPosition, pinPoint, {
+        width: labelWidth,
+        height: labelHeight,
+      }),
+    };
+  }
+  getFromWorldPosition(pt, projectionViewMatrix, dimensions) {
+    const ndcPt = Vector3.transformMatrix(pt, projectionViewMatrix);
+    return Viewport.fromDimensions(dimensions).transformVectorToViewport(ndcPt);
+  }
+  static get is() { return "vertex-viewer-pin-group"; }
+  static get originalStyleUrls() { return {
+    "$": ["viewer-pin-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["viewer-pin-group.css"]
+  }; }
+  static get properties() { return {
+    "pin": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Pin",
+        "resolved": "SimplePin | TextPin | undefined",
+        "references": {
+          "Pin": {
+            "location": "import",
+            "path": "../../lib/pins/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The pin to draw for the group"
+      }
+    },
+    "matrix": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Matrix4.Matrix4",
+        "resolved": "[number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number]",
+        "references": {
+          "Matrix4": {
+            "location": "import",
+            "path": "@vertexvis/geometry"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The local matrix of this element."
+      },
+      "defaultValue": "Matrix4.makeIdentity()"
+    },
+    "projectionViewMatrix": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Matrix4.Matrix4",
+        "resolved": "[number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number]",
+        "references": {
+          "Matrix4": {
+            "location": "import",
+            "path": "@vertexvis/geometry"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Projection view matrix used for computing the position of the pin line"
+      },
+      "defaultValue": "Matrix4.makeIdentity()"
+    },
+    "elementBounds": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DOMRect",
+        "resolved": "DOMRect | undefined",
+        "references": {
+          "DOMRect": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The dimensions of the canvas for the pins"
+      }
+    },
+    "pinModel": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "PinModel",
+        "resolved": "PinModel",
+        "references": {
+          "PinModel": {
+            "location": "import",
+            "path": "../../lib/pins/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The model that contains the entities and outcomes from performing pin operations"
+      },
+      "defaultValue": "new PinModel()"
+    },
+    "pinController": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "PinController",
+        "resolved": "PinController | undefined",
+        "references": {
+          "PinController": {
+            "location": "import",
+            "path": "../../lib/pins/controller"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The controller that drives behavior for pin operations"
+      }
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether or not the pin is \"selected\""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "invalidateStateCounter": {},
+    "leafNodesRendered": {}
+  }; }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLXBpbi1ncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ZpZXdlci1waW4tZ3JvdXAvdmlld2VyLXBpbi1ncm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxRQUFRO0FBQ1IsNkRBQTZEO0FBQzdELENBQUMsRUFDRCxJQUFJLEVBQ0osS0FBSyxHQUNOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBYyxPQUFPLEVBQVMsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFMUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNqQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsTUFBTSxzQkFBc0IsQ0FBQztBQUMvRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDaEQsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQVlsRCxNQUFNLE9BQU8sY0FBYztFQUwzQjtJQVlFOztPQUVHO0lBRUksV0FBTSxHQUFvQixPQUFPLENBQUMsWUFBWSxFQUFFLENBQUM7SUFFeEQ7O09BRUc7SUFFSSx5QkFBb0IsR0FBb0IsT0FBTyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBUXRFOztPQUVHO0lBRUksYUFBUSxHQUFhLElBQUksUUFBUSxFQUFFLENBQUM7SUFRM0M7O09BRUc7SUFFSSxhQUFRLEdBQUcsS0FBSyxDQUFDO0lBR2hCLDJCQUFzQixHQUFHLENBQUMsQ0FBQztJQUczQixzQkFBaUIsR0FBRyxLQUFLLENBQUM7SUF1STFCLDRCQUF1QixHQUFHLENB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

package/dist/collection/components/viewer-pin-label/utils.js

@@ -0,0 +1,4 @@
+export function getComputedStyle(el) {
+  return window.getComputedStyle(el);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy92aWV3ZXItcGluLWxhYmVsL3V0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxFQUFlO0VBQzlDLE9BQU8sTUFBTSxDQUFDLGdCQUFnQixDQUFDLEVBQUUsQ0FBQyxDQUFDO0FBQ3JDLENBQUMifQ==

package/dist/collection/components/viewer-pin-label/viewer-pin-label.css

@@ -0,0 +1,154 @@
+:host {
+  /**
+   * @prop --viewer-annotations-pin-label-background-color: A CSS color that
+   * specifies the color of the label background
+   */
+  --viewer-annotations-pin-label-background-color: var(--blue-200);
+
+  /**
+   * @prop --viewer-annotations-pin-label-border-color: A CSS color that
+   * specifies the color of the label's border
+   */
+  --viewer-annotations-pin-label-border-color: var(--blue-600);
+
+  /**
+   * @prop --viewer-annotations-pin-label-focused-border-color: A CSS color that
+   * specifies the color of the label's border when focused. 
+   */
+   --viewer-annotations-pin-label-focused-border-color: var(--blue-700);
+
+  /**
+   * @prop --viewer-annotations-pin-label-color: A CSS color that
+   * specifies the color of the label 
+   */
+  --viewer-annotations-pin-label-color: var(--white);
+
+  /**
+   * @prop --viewer-annotations-pin-label-padding-y: A var that
+   * specifies the vertical padding of the label
+   */
+  --viewer-annotations-pin-label-padding-y: 0.375em;
+
+  /**
+   * @prop --viewer-annotations-pin-label-padding-x: A var that
+   * specifies the horizontal padding of the label
+   */
+  --viewer-annotations-pin-label-padding-x:  0.5em;
+
+  /**
+   * @prop --viewer-annotations-pin-label-border-width: A CSS length that
+   * specifies the width of the border on this label. Defaults to `2px`.
+   */
+  --viewer-annotations-pin-label-border-width: 2px;
+
+  /**
+   * @prop --viewer-annotations-pin-label-border-style: A CSS variable that
+   * specifies the style of border on this label. Defaults to `solid`.
+   */
+  --viewer-annotations-pin-label-border-style: solid;
+
+  /**
+   * @prop --viewer-annotations-pin-label-border-radius: A var that
+   * specifies the border radius of the label
+   */
+  --viewer-annotations-pin-label-border-radius: 0.25em;
+
+  /**
+   * @prop --viewer-annotations-pin-label-min-width: A CSS length that
+   * specifies the minimum width of the label. Defaults to `1rem`.
+   */
+  --viewer-annotations-pin-label-min-width: 2rem;
+
+  /**
+   * @prop --viewer-annotations-pin-label-max-width: A CSS length that
+   * specifies the maximum width of the label. Defaults to `25rem`.
+   */
+  --viewer-annotations-pin-label-max-width: 25rem;
+
+  /**
+   * @prop --viewer-annotations-pin-label-max-height: A CSS length that
+   * specifies the maximum height of the label. Defaults to `50rem`.
+   */
+   --viewer-annotations-pin-label-max-height: 50rem;
+
+  overflow: hidden;
+  pointer-events: none;
+}
+
+:host([mode='']) .pin-label {
+  color: var(--viewer-annotations-pin-label-color);
+  background: var(--viewer-annotations-pin-label-background-color);
+}
+
+.pin-label-text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.pin-label-input-wrapper {
+  display: flex;
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  min-width: var(--viewer-annotations-pin-label-min-width);
+  max-width: var(--viewer-annotations-pin-label-max-width);
+  max-height: var(--viewer-annotations-pin-label-max-height);
+  background: var(--viewer-annotations-pin-label-background-color);
+  border-width: var(--viewer-annotations-pin-label-border-width);
+  border-style: var(--viewer-annotations-pin-label-border-style);
+  border-color: var(--viewer-annotations-pin-label-border-color);
+  border-radius: var(--viewer-annotations-pin-label-border-radius);
+}
+
+.pin-label-input-wrapper.focused {
+  min-width: var(--viewer-annotations-pin-label-max-width);
+  border-color: var(--viewer-annotations-pin-label-focused-border-color);
+}
+
+.pin-input-drag-target {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.pin-label-input {
+  resize: none;
+  position: relative;
+  outline: none;
+  border: none;
+  word-break: break-word;
+  padding: 0 0 0 0;
+  background-color: transparent;
+  margin: var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);
+  width: var(--viewer-annotations-pin-label-min-width);
+  flex-grow: 1;
+  overflow: hidden;
+  max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));
+}
+
+.pin-label-input.readonly {
+  pointer-events: auto;
+  color: black;
+  cursor: pointer;
+}
+
+.pin-label-hidden {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  border-width: var(--viewer-annotations-pin-label-border-width);
+  border-style: var(--viewer-annotations-pin-label-border-style);
+  border-color: var(--viewer-annotations-pin-label-border-color);
+  margin: var(--viewer-annotations-pin-label-padding-y) 0;
+  padding: 0 var(--viewer-annotations-pin-label-padding-x);
+  max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));
+}