@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

package/dist/esm/vertex-viewer-pin-group.entry.js

@@ -0,0 +1,163 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+import { h, F as Fragment, r as registerInstance } from './index-a9fb8318.js';
+import { p as point, m as matrix4, v as vector3 } from './bundle.esm-ce2c7ad3.js';
+import './cursors-98b7d89d.js';
+import './mapper-bde6c607.js';
+import './grpc-web-client.umd-5409853c.js';
+import './streamAttributes-72a92676.js';
+import './entities-ce81dd7f.js';
+import { V as Viewport } from './viewport-e39e2eba.js';
+import { i as isDefaultPin, b as isTextPin, P as PinModel, a as PinController } from './model-f679c493.js';
+import { a as translatePointToScreen } from './utils-c714e2f7.js';
+import { c as classnames } from './index-e841d91b.js';
+import './browser.esm-1ddb69c9.js';
+import './_commonjsHelpers-11ca3be1.js';
+import './utils-f11bd6f7.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const PinRenderer = ({ pin, selected, }) => {
+  return (h(Fragment, null,
+    isTextPin(pin) && (h("div", { id: "pin-anchor", class: classnames('pin-anchor', { selected: selected }) })),
+    isDefaultPin(pin) && (h("vertex-viewer-icon", { name: "pin-fill", size: "lg", class: classnames('pin', {
+        'pin-selected': selected,
+      }) }))));
+};
+
+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-dot-color:var(--blue-600);--viewer-annotations-pin-color:var(--blue-700);--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)}";
+
+let ViewerPinGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * 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);
+  }
+};
+ViewerPinGroup.style = viewerPinGroupCss;
+
+export { ViewerPinGroup as vertex_viewer_pin_group };

package/dist/esm/vertex-viewer-pin-label_2.entry.js

@@ -0,0 +1,271 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a9fb8318.js';
+import { p as point } from './bundle.esm-ce2c7ad3.js';
+import { c as classnames } from './index-e841d91b.js';
+import { g as getMouseClientPosition } from './dom-5b164305.js';
+import { a as PinController, P as PinModel, b as isTextPin } from './model-f679c493.js';
+import { r as readDOM } from './stencil-8b20e5a8.js';
+import { t as translatePointToRelative, a as translatePointToScreen } from './utils-c714e2f7.js';
+import './_commonjsHelpers-11ca3be1.js';
+import './browser.esm-1ddb69c9.js';
+import './utils-f11bd6f7.js';
+
+function getComputedStyle(el) {
+  return window.getComputedStyle(el);
+}
+
+const viewerPinLabelCss = ":host{--viewer-annotations-pin-label-background-color:var(--blue-200);--viewer-annotations-pin-label-border-color:var(--blue-600);--viewer-annotations-pin-label-focused-border-color:var(--blue-700);--viewer-annotations-pin-label-color:var(--white);--viewer-annotations-pin-label-padding-y:0.375em;--viewer-annotations-pin-label-padding-x:0.5em;--viewer-annotations-pin-label-border-width:2px;--viewer-annotations-pin-label-border-style:solid;--viewer-annotations-pin-label-border-radius:0.25em;--viewer-annotations-pin-label-min-width:2rem;--viewer-annotations-pin-label-max-width:25rem;--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)))}";
+
+let VertexPinLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.labelChanged = createEvent(this, "labelChanged", 7);
+    this.labelFocused = createEvent(this, "labelFocused", 7);
+    this.labelBlurred = createEvent(this, "labelBlurred", 7);
+    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$1 = getMouseClientPosition(event, this.elementBounds);
+        const relative = translatePointToRelative(point$1, 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,
+        } }));
+    }
+  }
+  get hostEl() { return getElement(this); }
+  static get watchers() { return {
+    "focused": ["watchFocusChange"],
+    "pin": ["watchPinChange"],
+    "elementBounds": ["watchElementBoundsChange"]
+  }; }
+};
+VertexPinLabel.style = viewerPinLabelCss;
+
+const viewerPinLabelLineCss = ":host{--viewer-annotations-pin-label-line-color:var(--blue-600);--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%}";
+
+let VertexPinLabelLine = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 }))));
+  }
+};
+VertexPinLabelLine.style = viewerPinLabelLineCss;
+
+export { VertexPinLabel as vertex_viewer_pin_label, VertexPinLabelLine as vertex_viewer_pin_label_line };