@vertexvis/viewer 0.13.2-canary.7 → 0.14.0

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

@@ -0,0 +1,410 @@
+import { Component, Element, Event, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+h, Host, Method, Prop, State, Watch, } from '@stencil/core';
+import { Point } from '@vertexvis/geometry';
+import classNames from 'classnames';
+import { getMouseClientPosition } from '../../lib/dom';
+import { PinController } from '../../lib/pins/controller';
+import { isTextPin, PinModel } from '../../lib/pins/model';
+import { readDOM } from '../../lib/stencil';
+import { translatePointToRelative, translatePointToScreen, } from '../viewer-markup/utils';
+import { getComputedStyle } from './utils';
+export class VertexPinLabel {
+  constructor() {
+    this.focused = false;
+    this.textareaRows = 1;
+    this.computeContentSize = () => {
+      readDOM(() => {
+        if (this.contentEl != null) {
+          this.contentElBounds = this.contentEl.getBoundingClientRect();
+          const computedStyles = getComputedStyle(this.contentEl);
+          this.textareaRows = Math.max(1, Math.ceil((parseFloat(computedStyles.height) -
+            parseFloat(computedStyles.borderWidth) * 2) /
+            parseFloat(computedStyles.lineHeight)));
+        }
+      });
+    };
+    this.handleInputKeyDown = (event) => {
+      if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        this.submit();
+      }
+      else if (event.key === 'Enter') {
+        this.textareaRows += 1;
+      }
+    };
+    this.handlePointerDown = (event) => {
+      var _a;
+      if (!this.focused) {
+        if (this.elementBounds != null) {
+          this.relativePointerDownPosition = translatePointToRelative(getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+          this.pinPointerDownPosition = (_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.point;
+          window.addEventListener('pointermove', this.handlePointerMove);
+          window.addEventListener('pointerup', this.handlePointerUp);
+        }
+      }
+    };
+    this.handlePointerMove = (event) => {
+      var _a, _b;
+      if (this.elementBounds != null &&
+        this.relativePointerDownPosition &&
+        this.pinPointerDownPosition != null) {
+        const point = getMouseClientPosition(event, this.elementBounds);
+        const relative = translatePointToRelative(point, this.elementBounds);
+        const relativeDelta = Point.subtract(relative, this.relativePointerDownPosition);
+        const myUpdatedPin = this.pin != null
+          ? {
+            id: this.pin.id,
+            worldPosition: this.pin.worldPosition,
+            label: {
+              point: Point.add(this.pinPointerDownPosition, relativeDelta),
+              text: this.pin.label.text,
+            },
+            partId: (_a = this.pin) === null || _a === void 0 ? void 0 : _a.partId,
+          }
+          : undefined;
+        if (myUpdatedPin) {
+          (_b = this.pinController) === null || _b === void 0 ? void 0 : _b.updatePin(myUpdatedPin);
+          this.computeScreenPosition();
+        }
+      }
+    };
+    this.handlePointerUp = (event) => {
+      var _a, _b;
+      if (((_a = this.pinController) === null || _a === void 0 ? void 0 : _a.getToolMode()) === 'edit' &&
+        this.relativePointerDownPosition != null &&
+        this.elementBounds != null) {
+        const pointerDownScreen = translatePointToScreen(this.relativePointerDownPosition, this.elementBounds);
+        const distanceBetweenStartAndEndPoint = Point.distance(pointerDownScreen, getMouseClientPosition(event, this.elementBounds));
+        if (distanceBetweenStartAndEndPoint <= 2) {
+          this.focused = true;
+          this.labelFocused.emit((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+        }
+      }
+      this.relativePointerDownPosition = undefined;
+      this.pinPointerDownPosition = undefined;
+      window.removeEventListener('pointermove', this.handlePointerMove);
+      window.removeEventListener('pointerup', this.handlePointerUp);
+    };
+    this.handleTextBlur = () => {
+      this.submit();
+    };
+    this.handleTextInput = (event) => {
+      const input = event.target;
+      this.value = input.value;
+    };
+    this.value = this.getPinText();
+  }
+  /**
+   * Gives focus to the the component's internal text input.
+   */
+  async setFocus() {
+    var _a, _b, _c;
+    // HTMLInputElement.focus() doesn't exist in tests.
+    if (typeof ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
+      if (this.focused) {
+        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+      else {
+        (_c = this.inputEl) === null || _c === void 0 ? void 0 : _c.blur();
+      }
+    }
+  }
+  watchFocusChange() {
+    var _a, _b;
+    this.labelChanged.emit();
+    if (this.focused) {
+      (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setSelectedPinId((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+    }
+  }
+  watchPinChange() {
+    this.value = this.getPinText();
+    this.computeScreenPosition();
+  }
+  watchElementBoundsChange() {
+    this.computeScreenPosition();
+  }
+  componentWillLoad() {
+    this.computeScreenPosition();
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.labelChanged.emit();
+    });
+    this.contentResizeObserver = new ResizeObserver(this.computeContentSize);
+    if (this.hostEl != null) {
+      this.resizeObserver.observe(this.hostEl);
+    }
+    if (this.contentEl != null) {
+      this.contentResizeObserver.observe(this.contentEl);
+    }
+    if (this.pinController == null) {
+      this.pinController = new PinController(new PinModel());
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.contentResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  componentDidRender() {
+    if (this.focused && this.inputEl != null) {
+      this.setFocus();
+    }
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, null,
+      h("div", { id: `pin-label-${(_a = this.pin) === null || _a === void 0 ? void 0 : _a.id}`, class: classNames('pin-label-input-wrapper', {
+          focused: this.focused,
+        }), onPointerDown: this.handlePointerDown, style: {
+          top: `${((_b = this.computedScreenPosition) === null || _b === void 0 ? void 0 : _b.y.toString()) || 0}px`,
+          left: `${((_c = this.computedScreenPosition) === null || _c === void 0 ? void 0 : _c.x.toString()) || 0}px`,
+          minWidth: this.computeMinWidth(),
+          maxWidth: this.computeMaxWidth(),
+          maxHeight: this.computeMaxHeight(),
+        } },
+        h("textarea", { id: `pin-label-input-${(_d = this.pin) === null || _d === void 0 ? void 0 : _d.id}`, class: classNames('pin-label-input', 'pin-label-text', {
+            ['readonly']: !this.focused,
+          }), disabled: !this.focused, ref: (ref) => (this.inputEl = ref), value: this.value, rows: this.textareaRows, onKeyDown: this.handleInputKeyDown, onInput: this.handleTextInput, onBlur: this.handleTextBlur }),
+        !this.focused && (h("div", { class: "pin-input-drag-target", onPointerDown: this.handlePointerDown }))),
+      h("div", { ref: (el) => (this.contentEl = el), class: classNames('pin-label-text', 'pin-label-hidden'), style: {
+          maxWidth: this.computeMaxWidth(),
+          maxHeight: this.computeMaxHeight(),
+        } }, this.hiddenContent())));
+  }
+  hiddenContent() {
+    // This corrects some inconsistencies in how a newline character
+    // is represented in a div. Leveraging `<br>`s results in a more
+    // consistent representation of the newlines in a textarea.
+    return this.value.includes('\n')
+      ? this.value
+        .split('\n')
+        .reduce((res, str) => [...res, str, h("br", null)], [])
+      : [this.value];
+  }
+  computeMinWidth() {
+    if (this.contentElBounds != null) {
+      const expected = `${this.contentElBounds.width + 16}px`;
+      return `min(${expected}, ${this.computeMaxWidth()})`;
+    }
+    else {
+      return `var(--viewer-annotations-pin-label-min-width)`;
+    }
+  }
+  computeMaxWidth() {
+    const expected = `var(--viewer-annotations-pin-label-max-width)`;
+    return `min(${expected}, ${this.computeRemainingWidth()})`;
+  }
+  computeMaxHeight() {
+    const expected = `var(--viewer-annotations-pin-label-max-height)`;
+    return `min(${expected}, ${this.computeRemainingHeight()})`;
+  }
+  computeRemainingWidth() {
+    var _a, _b;
+    return `calc(${((_a = this.elementBounds) === null || _a === void 0 ? void 0 : _a.width.toString()) || 0}px - ${((_b = this.computedScreenPosition) === null || _b === void 0 ? void 0 : _b.x.toString()) || 0}px)`;
+  }
+  computeRemainingHeight() {
+    var _a, _b;
+    return `calc(${((_a = this.elementBounds) === null || _a === void 0 ? void 0 : _a.height.toString()) || 0}px - ${((_b = this.computedScreenPosition) === null || _b === void 0 ? void 0 : _b.y.toString()) || 0}px)`;
+  }
+  getPinText() {
+    var _a;
+    if (((_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.text) != null) {
+      this.value = this.pin.label.text;
+    }
+    else {
+      this.value = '';
+    }
+    return this.value;
+  }
+  computeScreenPosition() {
+    this.computedScreenPosition =
+      isTextPin(this.pin) &&
+        this.elementBounds != null &&
+        this.pin.label.point != null
+        ? translatePointToScreen(this.pin.label.point, this.elementBounds)
+        : undefined;
+  }
+  submit() {
+    var _a, _b;
+    this.focused = false;
+    this.labelBlurred.emit((_a = this.pin) === null || _a === void 0 ? void 0 : _a.id);
+    if (this.pin != null) {
+      (_b = this.pinController) === null || _b === void 0 ? void 0 : _b.updatePin(Object.assign(Object.assign({}, this.pin), { label: {
+          point: this.pin.label.point,
+          text: this.value,
+        } }));
+    }
+  }
+  static get is() { return "vertex-viewer-pin-label"; }
+  static get originalStyleUrls() { return {
+    "$": ["viewer-pin-label.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["viewer-pin-label.css"]
+  }; }
+  static get properties() { return {
+    "pin": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "TextPin",
+        "resolved": "TextPin | undefined",
+        "references": {
+          "TextPin": {
+            "location": "import",
+            "path": "../../lib/pins/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The pin to draw for the group"
+      }
+    },
+    "elementBounds": {
+      "type": "unknown",
+      "mutable": false,
+      "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"
+      }
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current text value of the component. Value is updated on user\ninteraction."
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "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"
+      }
+    }
+  }; }
+  static get states() { return {
+    "focused": {},
+    "computedScreenPosition": {},
+    "textareaRows": {},
+    "contentElBounds": {}
+  }; }
+  static get events() { return [{
+      "method": "labelChanged",
+      "name": "labelChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "labelFocused",
+      "name": "labelFocused",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted whenever the label is focused, with the ID of the\nassociated pin (or undefined if no pin is provided)."
+      },
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      }
+    }, {
+      "method": "labelBlurred",
+      "name": "labelBlurred",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted whenever the label is blurred, with the ID of the\nassociated pin (or undefined if no pin is provided)."
+      },
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string | undefined",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Gives focus to the the component's internal text input.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "hostEl"; }
+  static get watchers() { return [{
+      "propName": "focused",
+      "methodName": "watchFocusChange"
+    }, {
+      "propName": "pin",
+      "methodName": "watchPinChange"
+    }, {
+      "propName": "elementBounds",
+      "methodName": "watchElementBoundsChange"
+    }]; }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLXBpbi1sYWJlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ZpZXdlci1waW4tbGFiZWwvdmlld2VyLXBpbi1sYWJlbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxPQUFPLEVBQ1AsS0FBSztBQUVMLDZEQUE2RDtBQUM3RCxDQUFDLEVBQ0QsSUFBSSxFQUNKLE1BQU0sRUFDTixJQUFJLEVBQ0osS0FBSyxFQUNMLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDNUMsT0FBTyxVQUFVLE1BQU0sWUFBWSxDQUFDO0FBRXBDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQVcsTUFBTSxzQkFBc0IsQ0FBQztBQUNwRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDNUMsT0FBTyxFQUNMLHdCQUF3QixFQUN4QixzQkFBc0IsR0FDdkIsTUFBTSx3QkFBd0IsQ0FBQztBQUNoQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFPM0MsTUFBTSxPQUFPLGNBQWM7RUFzRXpCO0lBcEJRLFlBQU8sR0FBRyxLQUFLLENBQUM7SUFNaEIsaUJBQVksR0FBRyxDQUFDLENBQUM7SUFnTmpCLHVCQUFrQixHQUFHLEdBQVMsRUFBRTtNQUN0QyxPQUFPLENBQUMsR0FBRyxFQUFFO1FBQ1gsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksRUFBRTtVQUMxQixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMscUJBQXFCLEVBQUUsQ0FBQztVQUM5RCxNQUFNLGNB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

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

@@ -0,0 +1,36 @@
+
+:host {
+  /**
+   * @prop  --viewer-annotations-pin-label-line-color: A CSS color that
+   * specifies the color of the label line
+   */
+   --viewer-annotations-pin-label-line-color: var(--blue-600);
+
+  /**
+   * @prop --viewer-annotations-pin-label-line-width: A CSS color that
+   * specifies the width of the label line
+   */
+   --viewer-annotations-pin-label-line-width: 1
+
+  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%;
+}

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

@@ -0,0 +1,61 @@
+import { Component, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+h, Host, Prop, } from '@stencil/core';
+export class VertexPinLabelLine {
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, null,
+      h("svg", { class: "svg" },
+        h("line", { class: "label-line", 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 is() { return "vertex-viewer-pin-label-line"; }
+  static get originalStyleUrls() { return {
+    "$": ["viewer-pin-label-line.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["viewer-pin-label-line.css"]
+  }; }
+  static get properties() { return {
+    "pinPoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Point.Point | undefined",
+        "resolved": "Point | undefined",
+        "references": {
+          "Point": {
+            "location": "import",
+            "path": "@vertexvis/geometry"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "labelPoint": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Point.Point | undefined",
+        "resolved": "Point | undefined",
+        "references": {
+          "Point": {
+            "location": "import",
+            "path": "@vertexvis/geometry"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLXBpbi1sYWJlbC1saW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdmlld2VyLXBpbi1sYWJlbC1saW5lL3ZpZXdlci1waW4tbGFiZWwtbGluZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVM7QUFDVCw2REFBNkQ7QUFDN0QsQ0FBQyxFQUNELElBQUksRUFDSixJQUFJLEdBQ0wsTUFBTSxlQUFlLENBQUM7QUFRdkIsTUFBTSxPQUFPLGtCQUFrQjtFQU9uQixNQUFNOztJQUNkLE9BQU8sQ0FDTCxFQUFDLElBQUk7TUFDSCxXQUFLLEtBQUssRUFBQyxLQUFLO1FBQ2QsWUFDRSxLQUFLLEVBQUMsWUFBWSxFQUNsQixFQUFFLEVBQUUsTUFBQSxJQUFJLENBQUMsVUFBVSwwQ0FBRSxDQUFDLEVBQ3RCLEVBQUUsRUFBRSxNQUFBLElBQUksQ0FBQyxVQUFVLDBDQUFFLENBQUMsRUFDdEIsRUFBRSxFQUFFLE1BQUEsSUFBSSxDQUFDLFFBQVEsMENBQUUsQ0FBQyxFQUNwQixFQUFFLEVBQUUsTUFBQSxJQUFJLENBQUMsUUFBUSwwQ0FBRSxDQUFDLEdBQ3BCLENBQ0UsQ0FDRCxDQUNSLENBQUM7RUFDSixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQUNGIn0=

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

@@ -0,0 +1,9 @@
+:host {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  pointer-events: none;
+}