npm - @vertexvis/viewer - Versions diffs - 1.0.0-canary.12 → 1.0.0-canary.13 - Mend

@vertexvis/viewer 1.0.0-canary.12 → 1.0.0-canary.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/cjs/vertex-viewer-pin-label_2.cjs.entry.js CHANGED Viewed

@@ -24,6 +24,11 @@ const VertexPinLabel = class {
         this.labelChanged = index.createEvent(this, "labelChanged");
         this.labelFocused = index.createEvent(this, "labelFocused");
         this.labelBlurred = index.createEvent(this, "labelBlurred");
+        /**
+         * The current text value of the component. Value is updated on user
+         * interaction.
+         */
+        this.value = '';
         this.focused = false;
         this.textareaRows = 1;
         this.computeContentSize = () => {
@@ -114,7 +119,6 @@ const VertexPinLabel = class {
             const input = event.target;
             this.value = input.value;
         };
-        this.value = this.getPinText();
     }
     /**
      * Gives focus to the component's internal text input.
@@ -154,13 +158,16 @@ const VertexPinLabel = class {
         }
     }
     watchPinChange() {
-        this.value = this.getPinText();
+        var _a, _b;
+        this.value = (_b = (_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.text) !== null && _b !== void 0 ? _b : '';
         this.computeScreenPosition();
     }
     watchElementBoundsChange() {
         this.computeScreenPosition();
     }
     componentWillLoad() {
+        var _a, _b;
+        this.value = (_b = (_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.text) !== null && _b !== void 0 ? _b : '';
         this.computeScreenPosition();
     }
     componentDidLoad() {
@@ -191,7 +198,7 @@ const VertexPinLabel = class {
     render() {
         var _a, _b, _c;
         const { primaryColor, accentColor } = model.getPinColors(this.pin);
-        return (index.h(index.Host, { key: '8d669c1fd5682762a6c4535e3deab3ac5bd6eba6' }, index.h("div", { key: '94a3e0a516efe046798c5cd9e6c95c041ec869cd', class: index$1.classname('pin-label-input-wrapper', {
+        return (index.h(index.Host, { key: 'a02e4135406398f7e49331ac65ec121c216c75c1' }, index.h("div", { key: '14373fe8ac2fff6988c38d8c73fdd484c0fd8079', class: index$1.classname('pin-label-input-wrapper', {
                 focused: this.focused,
             }), onPointerDown: this.handlePointerDown, style: {
                 top: `${((_a = this.computedScreenPosition) === null || _a === void 0 ? void 0 : _a.y.toString()) || 0}px`,
@@ -201,9 +208,9 @@ const VertexPinLabel = class {
                 maxHeight: this.computeMaxHeight(),
                 borderColor: primaryColor,
                 background: accentColor,
-            } }, index.h("textarea", { key: 'af7e54ab8af5e48687a8b2a297b56d1ce17e5218', id: `pin-label-input-${(_c = this.pin) === null || _c === void 0 ? void 0 : _c.id}`, class: index$1.classname('pin-label-input', 'pin-label-text', {
+            } }, index.h("textarea", { key: '10f15845d35c653f4d84c9d39694977e79ec329a', id: `pin-label-input-${(_c = this.pin) === null || _c === void 0 ? void 0 : _c.id}`, class: index$1.classname('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 && (index.h("div", { key: '55597d1f05cdaf94694adbec9e7081956bee4f96', class: "pin-input-drag-target", onPointerDown: this.handlePointerDown }))), index.h("div", { key: '15e97bf8320baf7ab5c5b589fd11090d5f9d4a8d', ref: (el) => (this.contentEl = el), class: index$1.classname('pin-label-text', 'pin-label-hidden'), style: {
+            }), 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 && (index.h("div", { key: 'a82f6c8553da740e3ab8c9c4f0b92cd1c3647ec6', class: "pin-input-drag-target", onPointerDown: this.handlePointerDown }))), index.h("div", { key: '197aae8a4bcb977305f662b61308310eacb0b780', ref: (el) => (this.contentEl = el), class: index$1.classname('pin-label-text', 'pin-label-hidden'), style: {
                 maxWidth: this.computeMaxWidth(),
                 maxHeight: this.computeMaxHeight(),
             } }, this.hiddenContent())));
@@ -243,16 +250,6 @@ const VertexPinLabel = class {
         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 =
             model.isTextPin(this.pin) &&

package/dist/cjs/vertex-viewer-pin-label_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"vertex-viewer-pin-label_2.cjs.entry.js","mappings":"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","names":["readDOM","translatePointToRelative","getMouseClientPosition","Point","translatePointToScreen","PinController","PinModel","getPinColors","h","Host","classNames","isTextPin"],"sources":["src/components/viewer-pin-label/utils.ts","src/components/viewer-pin-label/viewer-pin-label.css?tag=vertex-viewer-pin-label","src/components/viewer-pin-label/viewer-pin-label.tsx","src/components/viewer-pin-label-line/viewer-pin-label-line.css?tag=vertex-viewer-pin-label-line","src/components/viewer-pin-label-line/viewer-pin-label-line.tsx"],"sourcesContent":["export function getComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n return window.getComputedStyle(el);\n}\n",":host {\n /*\n @prop --viewer-annotations-pin-label-background-color: A CSS color that\n * specifies the color of the label background\n /\n --viewer-annotations-pin-label-background-color: var(--viewer-annotations-pin-accent-color);\n\n /\n @prop --viewer-annotations-pin-label-border-color: A CSS color that\n * specifies the color of the label's border\n /\n --viewer-annotations-pin-label-border-color: var(--viewer-annotations-pin-primary-color);\n\n /\n @prop --viewer-annotations-pin-label-focused-border-color: A CSS color that\n * specifies the color of the label's border when focused. \n /\n --viewer-annotations-pin-label-focused-border-color: var(--viewer-annotations-pin-primary-color);\n\n /\n @prop --viewer-annotations-pin-label-color: A CSS color that\n * specifies the color of the label \n /\n --viewer-annotations-pin-label-color: var(--white);\n\n /\n @prop --viewer-annotations-pin-label-padding-y: A var that\n * specifies the vertical padding of the label\n /\n --viewer-annotations-pin-label-padding-y: 0.375em;\n\n /\n @prop --viewer-annotations-pin-label-padding-x: A var that\n * specifies the horizontal padding of the label\n /\n --viewer-annotations-pin-label-padding-x: 0.5em;\n\n /\n @prop --viewer-annotations-pin-label-border-width: A CSS length that\n * specifies the width of the border on this label. Defaults to `2px`.\n /\n --viewer-annotations-pin-label-border-width: 2px;\n\n /\n @prop --viewer-annotations-pin-label-border-style: A CSS variable that\n * specifies the style of border on this label. Defaults to `solid`.\n /\n --viewer-annotations-pin-label-border-style: solid;\n\n /\n @prop --viewer-annotations-pin-label-border-radius: A var that\n * specifies the border radius of the label\n /\n --viewer-annotations-pin-label-border-radius: 0.25em;\n\n /\n @prop --viewer-annotations-pin-label-min-width: A CSS length that\n * specifies the minimum width of the label. Defaults to `2rem`.\n /\n --viewer-annotations-pin-label-min-width: 2rem;\n\n /\n @prop --viewer-annotations-pin-label-max-width: A CSS length that\n * specifies the maximum width of the label. Defaults to `25rem`.\n /\n --viewer-annotations-pin-label-max-width: 25rem;\n\n /\n @prop --viewer-annotations-pin-label-max-height: A CSS length that\n * specifies the maximum height of the label. Defaults to `50rem`.\n /\n --viewer-annotations-pin-label-max-height: 50rem;\n\n overflow: hidden;\n pointer-events: none;\n}\n\n:host([mode='']) .pin-label {\n color: var(--viewer-annotations-pin-label-color);\n background: var(--viewer-annotations-pin-label-background-color);\n}\n\n.pin-label-text {\n font-family: Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n line-height: 1rem;\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.pin-label-input-wrapper {\n display: flex;\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n min-width: var(--viewer-annotations-pin-label-min-width);\n max-width: var(--viewer-annotations-pin-label-max-width);\n max-height: var(--viewer-annotations-pin-label-max-height);\n background: var(--viewer-annotations-pin-label-background-color);\n border-width: var(--viewer-annotations-pin-label-border-width);\n border-style: var(--viewer-annotations-pin-label-border-style);\n border-color: var(--viewer-annotations-pin-label-border-color);\n border-radius: var(--viewer-annotations-pin-label-border-radius);\n}\n\n.pin-label-input-wrapper.focused {\n min-width: var(--viewer-annotations-pin-label-max-width);\n border-color: var(--viewer-annotations-pin-label-focused-border-color);\n}\n\n.pin-input-drag-target {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n\n.pin-label-input {\n resize: none;\n position: relative;\n outline: none;\n border: none;\n word-break: break-word;\n padding: 0 0 0 0;\n background-color: transparent;\n margin: var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);\n width: var(--viewer-annotations-pin-label-min-width);\n flex-grow: 1;\n overflow: hidden;\n max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 var(--viewer-annotations-pin-label-padding-x)));\n}\n\n.pin-label-input.readonly {\n pointer-events: auto;\n color: black;\n cursor: pointer;\n}\n\n.pin-label-hidden {\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n width: auto;\n height: auto;\n box-sizing: border-box;\n border-width: var(--viewer-annotations-pin-label-border-width);\n border-style: var(--viewer-annotations-pin-label-border-style);\n border-color: var(--viewer-annotations-pin-label-border-color);\n margin: var(--viewer-annotations-pin-label-padding-y) 0;\n padding: 0 var(--viewer-annotations-pin-label-padding-x);\n max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n getPinColors,\n isTextPin,\n PinModel,\n TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n tag: 'vertex-viewer-pin-label',\n styleUrl: 'viewer-pin-label.css',\n shadow: false,\n})\nexport class VertexPinLabel {\n /*\n The pin to draw for the group\n /\n @Prop()\n public pin?: TextPin;\n\n /\n The dimensions of the canvas for the pins\n /\n @Prop()\n public elementBounds?: DOMRect;\n\n /\n The current text value of the component. Value is updated on user\n * interaction.\n /\n @Prop({ mutable: true })\n public value: string;\n\n /\n The controller that drives behavior for pin operations\n /\n @Prop()\n public pinController?: PinController;\n\n /\n @internal\n /\n @Event({ bubbles: true })\n public labelChanged!: EventEmitter<void>;\n\n /\n Emitted whenever the label is focused, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelFocused!: EventEmitter<string \| undefined>;\n\n /\n Emitted whenever the label is blurred, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelBlurred!: EventEmitter<string \| undefined>;\n\n @Element()\n private hostEl!: HTMLElement;\n\n @State()\n private focused = false;\n\n @State()\n private computedScreenPosition?: Point.Point;\n\n @State()\n private textareaRows = 1;\n\n @State()\n private contentElBounds?: DOMRect;\n\n private relativePointerDownPosition?: Point.Point;\n private pinPointerDownPosition?: Point.Point;\n\n private inputEl?: HTMLTextAreaElement;\n private contentEl?: HTMLDivElement;\n\n private resizeObserver?: ResizeObserver;\n private contentResizeObserver?: ResizeObserver;\n\n public constructor() {\n this.value = this.getPinText();\n }\n\n /\n Gives focus to the component's internal text input.\n /\n @Method()\n public async setFocus(): Promise<void> {\n // HTMLInputElement.focus() doesn't exist in tests.\n if (typeof this.inputEl?.focus === 'function') {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n this.inputEl?.focus();\n }\n }\n\n /\n @internal\n * submits the current text, unfocuses the input and emits the blur event to consumers\n /\n @Method()\n public async submit(): Promise<void> {\n this.focused = false;\n this.labelBlurred.emit(this.pin?.id);\n if (this.pin != null) {\n this.pinController?.updatePin({\n ...this.pin,\n label: {\n point: this.pin.label.point,\n text: this.value,\n },\n });\n }\n }\n\n @Watch('focused')\n protected watchFocusChange(): void {\n this.labelChanged.emit();\n\n if (this.focused) {\n this.pinController?.setSelectedPinId(this.pin?.id);\n }\n }\n\n @Watch('pin')\n protected watchPinChange(): void {\n this.value = this.getPinText();\n this.computeScreenPosition();\n }\n\n @Watch('elementBounds')\n protected watchElementBoundsChange(): void {\n this.computeScreenPosition();\n }\n\n protected componentWillLoad(): void {\n this.computeScreenPosition();\n }\n\n protected componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n this.labelChanged.emit();\n });\n\n this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n if (this.hostEl != null) {\n this.resizeObserver.observe(this.hostEl);\n }\n\n if (this.contentEl != null) {\n this.contentResizeObserver.observe(this.contentEl);\n }\n\n if (this.pinController == null) {\n this.pinController = new PinController(new PinModel());\n }\n }\n\n protected disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.contentResizeObserver?.disconnect();\n }\n\n protected componentDidRender(): void {\n if (this.focused && this.inputEl != null) {\n this.setFocus();\n }\n }\n\n protected render(): JSX.Element {\n const { primaryColor, accentColor } = getPinColors(this.pin);\n return (\n <Host>\n <div\n class={classNames('pin-label-input-wrapper', {\n focused: this.focused,\n })}\n onPointerDown={this.handlePointerDown}\n style={{\n top: `${this.computedScreenPosition?.y.toString() \|\| 0}px`,\n left: `${this.computedScreenPosition?.x.toString() \|\| 0}px`,\n minWidth: this.computeMinWidth(),\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n borderColor: primaryColor,\n background: accentColor,\n }}\n >\n <textarea\n id={`pin-label-input-${this.pin?.id}`}\n class={classNames('pin-label-input', 'pin-label-text', {\n ['readonly']: !this.focused,\n })}\n disabled={!this.focused}\n ref={(ref) => (this.inputEl = ref)}\n value={this.value}\n rows={this.textareaRows}\n onKeyDown={this.handleInputKeyDown}\n onInput={this.handleTextInput}\n onBlur={this.handleTextBlur}\n />\n {/ This corrects for a behavior in Firefox where setting the `disabled` attribute to true /}\n {/ prevents any events from propagating. /}\n {!this.focused && (\n <div\n class=\"pin-input-drag-target\"\n onPointerDown={this.handlePointerDown}\n />\n )}\n </div>\n <div\n ref={(el) => (this.contentEl = el)}\n class={classNames('pin-label-text', 'pin-label-hidden')}\n style={{\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n }}\n >\n {this.hiddenContent()}\n </div>\n </Host>\n );\n }\n\n private hiddenContent(): Array<string \| HTMLBRElement> {\n // This corrects some inconsistencies in how a newline character\n // is represented in a div. Leveraging `<br>`s results in a more\n // consistent representation of the newlines in a textarea.\n return this.value.includes('\\n')\n ? this.value\n .split('\\n')\n .reduce(\n (res, str) => [...res, str, <br />],\n [] as Array<string \| HTMLBRElement>\n )\n : [this.value];\n }\n\n private computeMinWidth(): string {\n if (this.contentElBounds != null) {\n const expected = `${this.contentElBounds.width + 8}px`;\n\n return `min(${expected}, ${this.computeMaxWidth()})`;\n } else {\n return `var(--viewer-annotations-pin-label-min-width)`;\n }\n }\n\n private computeMaxWidth(): string {\n const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n return `min(${expected}, ${this.computeRemainingWidth()})`;\n }\n\n private computeMaxHeight(): string {\n const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n return `min(${expected}, ${this.computeRemainingHeight()})`;\n }\n\n private computeRemainingWidth(): string {\n return `calc(${this.elementBounds?.width.toString() \|\| 0}px - ${\n this.computedScreenPosition?.x.toString() \|\| 0\n }px)`;\n }\n\n private computeRemainingHeight(): string {\n return `calc(${this.elementBounds?.height.toString() \|\| 0}px - ${\n this.computedScreenPosition?.y.toString() \|\| 0\n }px)`;\n }\n\n private getPinText(): string {\n if (this.pin?.label.text != null) {\n this.value = this.pin.label.text;\n } else {\n this.value = '';\n }\n\n return this.value;\n }\n\n private computeScreenPosition(): void {\n this.computedScreenPosition =\n isTextPin(this.pin) &&\n this.elementBounds != null &&\n this.pin.label.point != null\n ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n : undefined;\n }\n\n private computeContentSize = (): void => {\n readDOM(() => {\n if (this.contentEl != null) {\n this.contentElBounds = this.contentEl.getBoundingClientRect();\n const computedStyles = getComputedStyle(this.contentEl);\n this.textareaRows = Math.max(\n 1,\n Math.ceil(\n (parseFloat(computedStyles.getPropertyValue('height')) -\n parseFloat(computedStyles.getPropertyValue('borderWidth')) 2) /\n parseFloat(computedStyles.getPropertyValue('lineHeight'))\n )\n );\n }\n });\n };\n\n private handleInputKeyDown = (event: KeyboardEvent): void => {\n event.stopPropagation();\n if (\n event.key === 'Enter' &&\n (event.ctrlKey \|\| event.metaKey \|\| event.shiftKey)\n ) {\n this.textareaRows += 1;\n this.value += '\\n';\n } else if (event.key === 'Enter') {\n event.preventDefault();\n this.submit();\n }\n };\n\n private handlePointerDown = (event: PointerEvent): void => {\n if (!this.focused) {\n if (this.elementBounds != null) {\n if (event.buttons !== 2) {\n event.preventDefault();\n event.stopPropagation();\n }\n this.relativePointerDownPosition = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds\n );\n this.pinPointerDownPosition = this.pin?.label.point;\n\n window.addEventListener('pointermove', this.handlePointerMove);\n window.addEventListener('pointerup', this.handlePointerUp);\n }\n }\n };\n\n private handlePointerMove = (event: PointerEvent): void => {\n if (\n this.elementBounds != null &&\n this.relativePointerDownPosition &&\n this.pinPointerDownPosition != null\n ) {\n // Prevent selection of any text while interacting with the label\n event.preventDefault();\n event.stopPropagation();\n\n const point = getMouseClientPosition(event, this.elementBounds);\n const relative = translatePointToRelative(point, this.elementBounds);\n\n const relativeDelta = Point.subtract(\n relative,\n this.relativePointerDownPosition\n );\n\n const myUpdatedPin =\n this.pin != null\n ? {\n ...this.pin,\n label: {\n ...this.pin.label,\n point: Point.add(this.pinPointerDownPosition, relativeDelta),\n },\n }\n : undefined;\n\n if (myUpdatedPin) {\n this.pinController?.updatePin(myUpdatedPin);\n this.computeScreenPosition();\n }\n }\n };\n\n private handlePointerUp = (event: PointerEvent): void => {\n if (\n this.pinController?.getToolMode() === 'edit' &&\n this.relativePointerDownPosition != null &&\n this.elementBounds != null\n ) {\n const pointerDownScreen = translatePointToScreen(\n this.relativePointerDownPosition,\n this.elementBounds\n );\n const distanceBetweenStartAndEndPoint = Point.distance(\n pointerDownScreen,\n getMouseClientPosition(event, this.elementBounds)\n );\n\n if (distanceBetweenStartAndEndPoint <= 2) {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n }\n }\n\n this.relativePointerDownPosition = undefined;\n this.pinPointerDownPosition = undefined;\n\n window.removeEventListener('pointermove', this.handlePointerMove);\n window.removeEventListener('pointerup', this.handlePointerUp);\n };\n\n private handleTextBlur = (): void => {\n this.submit();\n };\n\n private handleTextInput = (event: Event): void => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n };\n}\n","\n:host {\n /*\n @prop --viewer-annotations-pin-label-line-color: A CSS color that\n * specifies the color of the label line\n /\n --viewer-annotations-pin-label-line-color: var(--viewer-annotations-pin-primary-color);\n\n /\n @prop --viewer-annotations-pin-label-line-width: A CSS color that\n * specifies the width of the label line\n */\n --viewer-annotations-pin-label-line-width: 1;\n\n overflow: hidden;\n pointer-events: none;\n}\n\n.label-line {\n pointer-events: auto;\n stroke: var(--viewer-annotations-pin-label-line-color);\n stroke-width: var( --viewer-annotations-pin-label-line-width);\n cursor: default;\n}\n\n.svg {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: hidden;\n pointer-events: none;\n height: 100%;\n width: 100%;\n}\n","import {\n Component,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Prop,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getPinColors, Pin } from '../../lib/pins/model';\n\n@Component({\n tag: 'vertex-viewer-pin-label-line',\n styleUrl: 'viewer-pin-label-line.css',\n shadow: false,\n})\nexport class VertexPinLabelLine {\n @Prop()\n public pinPoint: Point.Point \| undefined;\n\n @Prop()\n public labelPoint: Point.Point \| undefined;\n\n @Prop()\n public pin: Pin \| undefined;\n\n protected render(): JSX.Element {\n const { primaryColor } = getPinColors(this.pin);\n return (\n <Host>\n <svg class=\"svg\">\n <line\n class=\"label-line\"\n style={{\n stroke: primaryColor,\n }}\n x1={this.labelPoint?.x}\n y1={this.labelPoint?.y}\n x2={this.pinPoint?.x}\n y2={this.pinPoint?.y}\n />\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"vertex-viewer-pin-label_2.cjs.entry.js","mappings":"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","names":["readDOM","translatePointToRelative","getMouseClientPosition","Point","translatePointToScreen","PinController","PinModel","getPinColors","h","Host","classNames","isTextPin"],"sources":["src/components/viewer-pin-label/utils.ts","src/components/viewer-pin-label/viewer-pin-label.css?tag=vertex-viewer-pin-label","src/components/viewer-pin-label/viewer-pin-label.tsx","src/components/viewer-pin-label-line/viewer-pin-label-line.css?tag=vertex-viewer-pin-label-line","src/components/viewer-pin-label-line/viewer-pin-label-line.tsx"],"sourcesContent":["export function getComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n return window.getComputedStyle(el);\n}\n",":host {\n /*\n @prop --viewer-annotations-pin-label-background-color: A CSS color that\n * specifies the color of the label background\n /\n --viewer-annotations-pin-label-background-color: var(--viewer-annotations-pin-accent-color);\n\n /\n @prop --viewer-annotations-pin-label-border-color: A CSS color that\n * specifies the color of the label's border\n /\n --viewer-annotations-pin-label-border-color: var(--viewer-annotations-pin-primary-color);\n\n /\n @prop --viewer-annotations-pin-label-focused-border-color: A CSS color that\n * specifies the color of the label's border when focused. \n /\n --viewer-annotations-pin-label-focused-border-color: var(--viewer-annotations-pin-primary-color);\n\n /\n @prop --viewer-annotations-pin-label-color: A CSS color that\n * specifies the color of the label \n /\n --viewer-annotations-pin-label-color: var(--white);\n\n /\n @prop --viewer-annotations-pin-label-padding-y: A var that\n * specifies the vertical padding of the label\n /\n --viewer-annotations-pin-label-padding-y: 0.375em;\n\n /\n @prop --viewer-annotations-pin-label-padding-x: A var that\n * specifies the horizontal padding of the label\n /\n --viewer-annotations-pin-label-padding-x: 0.5em;\n\n /\n @prop --viewer-annotations-pin-label-border-width: A CSS length that\n * specifies the width of the border on this label. Defaults to `2px`.\n /\n --viewer-annotations-pin-label-border-width: 2px;\n\n /\n @prop --viewer-annotations-pin-label-border-style: A CSS variable that\n * specifies the style of border on this label. Defaults to `solid`.\n /\n --viewer-annotations-pin-label-border-style: solid;\n\n /\n @prop --viewer-annotations-pin-label-border-radius: A var that\n * specifies the border radius of the label\n /\n --viewer-annotations-pin-label-border-radius: 0.25em;\n\n /\n @prop --viewer-annotations-pin-label-min-width: A CSS length that\n * specifies the minimum width of the label. Defaults to `2rem`.\n /\n --viewer-annotations-pin-label-min-width: 2rem;\n\n /\n @prop --viewer-annotations-pin-label-max-width: A CSS length that\n * specifies the maximum width of the label. Defaults to `25rem`.\n /\n --viewer-annotations-pin-label-max-width: 25rem;\n\n /\n @prop --viewer-annotations-pin-label-max-height: A CSS length that\n * specifies the maximum height of the label. Defaults to `50rem`.\n /\n --viewer-annotations-pin-label-max-height: 50rem;\n\n overflow: hidden;\n pointer-events: none;\n}\n\n:host([mode='']) .pin-label {\n color: var(--viewer-annotations-pin-label-color);\n background: var(--viewer-annotations-pin-label-background-color);\n}\n\n.pin-label-text {\n font-family: Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n line-height: 1rem;\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.pin-label-input-wrapper {\n display: flex;\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n min-width: var(--viewer-annotations-pin-label-min-width);\n max-width: var(--viewer-annotations-pin-label-max-width);\n max-height: var(--viewer-annotations-pin-label-max-height);\n background: var(--viewer-annotations-pin-label-background-color);\n border-width: var(--viewer-annotations-pin-label-border-width);\n border-style: var(--viewer-annotations-pin-label-border-style);\n border-color: var(--viewer-annotations-pin-label-border-color);\n border-radius: var(--viewer-annotations-pin-label-border-radius);\n}\n\n.pin-label-input-wrapper.focused {\n min-width: var(--viewer-annotations-pin-label-max-width);\n border-color: var(--viewer-annotations-pin-label-focused-border-color);\n}\n\n.pin-input-drag-target {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n\n.pin-label-input {\n resize: none;\n position: relative;\n outline: none;\n border: none;\n word-break: break-word;\n padding: 0 0 0 0;\n background-color: transparent;\n margin: var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);\n width: var(--viewer-annotations-pin-label-min-width);\n flex-grow: 1;\n overflow: hidden;\n max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 var(--viewer-annotations-pin-label-padding-x)));\n}\n\n.pin-label-input.readonly {\n pointer-events: auto;\n color: black;\n cursor: pointer;\n}\n\n.pin-label-hidden {\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n width: auto;\n height: auto;\n box-sizing: border-box;\n border-width: var(--viewer-annotations-pin-label-border-width);\n border-style: var(--viewer-annotations-pin-label-border-style);\n border-color: var(--viewer-annotations-pin-label-border-color);\n margin: var(--viewer-annotations-pin-label-padding-y) 0;\n padding: 0 var(--viewer-annotations-pin-label-padding-x);\n max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n getPinColors,\n isTextPin,\n PinModel,\n TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n tag: 'vertex-viewer-pin-label',\n styleUrl: 'viewer-pin-label.css',\n shadow: false,\n})\nexport class VertexPinLabel {\n /*\n The pin to draw for the group\n /\n @Prop()\n public pin?: TextPin;\n\n /\n The dimensions of the canvas for the pins\n /\n @Prop()\n public elementBounds?: DOMRect;\n\n /\n The current text value of the component. Value is updated on user\n * interaction.\n /\n @Prop({ mutable: true })\n public value = '';\n\n /\n The controller that drives behavior for pin operations\n /\n @Prop()\n public pinController?: PinController;\n\n /\n @internal\n /\n @Event({ bubbles: true })\n public labelChanged!: EventEmitter<void>;\n\n /\n Emitted whenever the label is focused, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelFocused!: EventEmitter<string \| undefined>;\n\n /\n Emitted whenever the label is blurred, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelBlurred!: EventEmitter<string \| undefined>;\n\n @Element()\n private hostEl!: HTMLElement;\n\n @State()\n private focused = false;\n\n @State()\n private computedScreenPosition?: Point.Point;\n\n @State()\n private textareaRows = 1;\n\n @State()\n private contentElBounds?: DOMRect;\n\n private relativePointerDownPosition?: Point.Point;\n private pinPointerDownPosition?: Point.Point;\n\n private inputEl?: HTMLTextAreaElement;\n private contentEl?: HTMLDivElement;\n\n private resizeObserver?: ResizeObserver;\n private contentResizeObserver?: ResizeObserver;\n\n /\n Gives focus to the component's internal text input.\n /\n @Method()\n public async setFocus(): Promise<void> {\n // HTMLInputElement.focus() doesn't exist in tests.\n if (typeof this.inputEl?.focus === 'function') {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n this.inputEl?.focus();\n }\n }\n\n /\n @internal\n * submits the current text, unfocuses the input and emits the blur event to consumers\n /\n @Method()\n public async submit(): Promise<void> {\n this.focused = false;\n this.labelBlurred.emit(this.pin?.id);\n if (this.pin != null) {\n this.pinController?.updatePin({\n ...this.pin,\n label: {\n point: this.pin.label.point,\n text: this.value,\n },\n });\n }\n }\n\n @Watch('focused')\n protected watchFocusChange(): void {\n this.labelChanged.emit();\n\n if (this.focused) {\n this.pinController?.setSelectedPinId(this.pin?.id);\n }\n }\n\n @Watch('pin')\n protected watchPinChange(): void {\n this.value = this.pin?.label.text ?? '';\n this.computeScreenPosition();\n }\n\n @Watch('elementBounds')\n protected watchElementBoundsChange(): void {\n this.computeScreenPosition();\n }\n\n protected componentWillLoad(): void {\n this.value = this.pin?.label.text ?? '';\n this.computeScreenPosition();\n }\n\n protected componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n this.labelChanged.emit();\n });\n\n this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n if (this.hostEl != null) {\n this.resizeObserver.observe(this.hostEl);\n }\n\n if (this.contentEl != null) {\n this.contentResizeObserver.observe(this.contentEl);\n }\n\n if (this.pinController == null) {\n this.pinController = new PinController(new PinModel());\n }\n }\n\n protected disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.contentResizeObserver?.disconnect();\n }\n\n protected componentDidRender(): void {\n if (this.focused && this.inputEl != null) {\n this.setFocus();\n }\n }\n\n protected render(): JSX.Element {\n const { primaryColor, accentColor } = getPinColors(this.pin);\n return (\n <Host>\n <div\n class={classNames('pin-label-input-wrapper', {\n focused: this.focused,\n })}\n onPointerDown={this.handlePointerDown}\n style={{\n top: `${this.computedScreenPosition?.y.toString() \|\| 0}px`,\n left: `${this.computedScreenPosition?.x.toString() \|\| 0}px`,\n minWidth: this.computeMinWidth(),\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n borderColor: primaryColor,\n background: accentColor,\n }}\n >\n <textarea\n id={`pin-label-input-${this.pin?.id}`}\n class={classNames('pin-label-input', 'pin-label-text', {\n ['readonly']: !this.focused,\n })}\n disabled={!this.focused}\n ref={(ref) => (this.inputEl = ref)}\n value={this.value}\n rows={this.textareaRows}\n onKeyDown={this.handleInputKeyDown}\n onInput={this.handleTextInput}\n onBlur={this.handleTextBlur}\n />\n {/ This corrects for a behavior in Firefox where setting the `disabled` attribute to true /}\n {/ prevents any events from propagating. /}\n {!this.focused && (\n <div\n class=\"pin-input-drag-target\"\n onPointerDown={this.handlePointerDown}\n />\n )}\n </div>\n <div\n ref={(el) => (this.contentEl = el)}\n class={classNames('pin-label-text', 'pin-label-hidden')}\n style={{\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n }}\n >\n {this.hiddenContent()}\n </div>\n </Host>\n );\n }\n\n private hiddenContent(): Array<string \| HTMLBRElement> {\n // This corrects some inconsistencies in how a newline character\n // is represented in a div. Leveraging `<br>`s results in a more\n // consistent representation of the newlines in a textarea.\n return this.value.includes('\\n')\n ? this.value\n .split('\\n')\n .reduce(\n (res, str) => [...res, str, <br />],\n [] as Array<string \| HTMLBRElement>\n )\n : [this.value];\n }\n\n private computeMinWidth(): string {\n if (this.contentElBounds != null) {\n const expected = `${this.contentElBounds.width + 8}px`;\n\n return `min(${expected}, ${this.computeMaxWidth()})`;\n } else {\n return `var(--viewer-annotations-pin-label-min-width)`;\n }\n }\n\n private computeMaxWidth(): string {\n const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n return `min(${expected}, ${this.computeRemainingWidth()})`;\n }\n\n private computeMaxHeight(): string {\n const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n return `min(${expected}, ${this.computeRemainingHeight()})`;\n }\n\n private computeRemainingWidth(): string {\n return `calc(${this.elementBounds?.width.toString() \|\| 0}px - ${\n this.computedScreenPosition?.x.toString() \|\| 0\n }px)`;\n }\n\n private computeRemainingHeight(): string {\n return `calc(${this.elementBounds?.height.toString() \|\| 0}px - ${\n this.computedScreenPosition?.y.toString() \|\| 0\n }px)`;\n }\n\n private computeScreenPosition(): void {\n this.computedScreenPosition =\n isTextPin(this.pin) &&\n this.elementBounds != null &&\n this.pin.label.point != null\n ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n : undefined;\n }\n\n private computeContentSize = (): void => {\n readDOM(() => {\n if (this.contentEl != null) {\n this.contentElBounds = this.contentEl.getBoundingClientRect();\n const computedStyles = getComputedStyle(this.contentEl);\n this.textareaRows = Math.max(\n 1,\n Math.ceil(\n (parseFloat(computedStyles.getPropertyValue('height')) -\n parseFloat(computedStyles.getPropertyValue('borderWidth')) 2) /\n parseFloat(computedStyles.getPropertyValue('lineHeight'))\n )\n );\n }\n });\n };\n\n private handleInputKeyDown = (event: KeyboardEvent): void => {\n event.stopPropagation();\n if (\n event.key === 'Enter' &&\n (event.ctrlKey \|\| event.metaKey \|\| event.shiftKey)\n ) {\n this.textareaRows += 1;\n this.value += '\\n';\n } else if (event.key === 'Enter') {\n event.preventDefault();\n this.submit();\n }\n };\n\n private handlePointerDown = (event: PointerEvent): void => {\n if (!this.focused) {\n if (this.elementBounds != null) {\n if (event.buttons !== 2) {\n event.preventDefault();\n event.stopPropagation();\n }\n this.relativePointerDownPosition = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds\n );\n this.pinPointerDownPosition = this.pin?.label.point;\n\n window.addEventListener('pointermove', this.handlePointerMove);\n window.addEventListener('pointerup', this.handlePointerUp);\n }\n }\n };\n\n private handlePointerMove = (event: PointerEvent): void => {\n if (\n this.elementBounds != null &&\n this.relativePointerDownPosition &&\n this.pinPointerDownPosition != null\n ) {\n // Prevent selection of any text while interacting with the label\n event.preventDefault();\n event.stopPropagation();\n\n const point = getMouseClientPosition(event, this.elementBounds);\n const relative = translatePointToRelative(point, this.elementBounds);\n\n const relativeDelta = Point.subtract(\n relative,\n this.relativePointerDownPosition\n );\n\n const myUpdatedPin =\n this.pin != null\n ? {\n ...this.pin,\n label: {\n ...this.pin.label,\n point: Point.add(this.pinPointerDownPosition, relativeDelta),\n },\n }\n : undefined;\n\n if (myUpdatedPin) {\n this.pinController?.updatePin(myUpdatedPin);\n this.computeScreenPosition();\n }\n }\n };\n\n private handlePointerUp = (event: PointerEvent): void => {\n if (\n this.pinController?.getToolMode() === 'edit' &&\n this.relativePointerDownPosition != null &&\n this.elementBounds != null\n ) {\n const pointerDownScreen = translatePointToScreen(\n this.relativePointerDownPosition,\n this.elementBounds\n );\n const distanceBetweenStartAndEndPoint = Point.distance(\n pointerDownScreen,\n getMouseClientPosition(event, this.elementBounds)\n );\n\n if (distanceBetweenStartAndEndPoint <= 2) {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n }\n }\n\n this.relativePointerDownPosition = undefined;\n this.pinPointerDownPosition = undefined;\n\n window.removeEventListener('pointermove', this.handlePointerMove);\n window.removeEventListener('pointerup', this.handlePointerUp);\n };\n\n private handleTextBlur = (): void => {\n this.submit();\n };\n\n private handleTextInput = (event: Event): void => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n };\n}\n","\n:host {\n /*\n @prop --viewer-annotations-pin-label-line-color: A CSS color that\n * specifies the color of the label line\n /\n --viewer-annotations-pin-label-line-color: var(--viewer-annotations-pin-primary-color);\n\n /\n @prop --viewer-annotations-pin-label-line-width: A CSS color that\n * specifies the width of the label line\n */\n --viewer-annotations-pin-label-line-width: 1;\n\n overflow: hidden;\n pointer-events: none;\n}\n\n.label-line {\n pointer-events: auto;\n stroke: var(--viewer-annotations-pin-label-line-color);\n stroke-width: var( --viewer-annotations-pin-label-line-width);\n cursor: default;\n}\n\n.svg {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: hidden;\n pointer-events: none;\n height: 100%;\n width: 100%;\n}\n","import {\n Component,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Prop,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { getPinColors, Pin } from '../../lib/pins/model';\n\n@Component({\n tag: 'vertex-viewer-pin-label-line',\n styleUrl: 'viewer-pin-label-line.css',\n shadow: false,\n})\nexport class VertexPinLabelLine {\n @Prop()\n public pinPoint: Point.Point \| undefined;\n\n @Prop()\n public labelPoint: Point.Point \| undefined;\n\n @Prop()\n public pin: Pin \| undefined;\n\n protected render(): JSX.Element {\n const { primaryColor } = getPinColors(this.pin);\n return (\n <Host>\n <svg class=\"svg\">\n <line\n class=\"label-line\"\n style={{\n stroke: primaryColor,\n }}\n x1={this.labelPoint?.x}\n y1={this.labelPoint?.y}\n x2={this.pinPoint?.x}\n y2={this.pinPoint?.y}\n />\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -14,6 +14,11 @@ import { translatePointToRelative, translatePointToScreen, } from "../viewer-pin
 import { getComputedStyle } from "./utils";
 export class VertexPinLabel {
     constructor() {
+        /**
+         * The current text value of the component. Value is updated on user
+         * interaction.
+         */
+        this.value = '';
         this.focused = false;
         this.textareaRows = 1;
         this.computeContentSize = () => {
@@ -104,7 +109,6 @@ export class VertexPinLabel {
             const input = event.target;
             this.value = input.value;
         };
-        this.value = this.getPinText();
     }
     /**
      * Gives focus to the component's internal text input.
@@ -144,13 +148,16 @@ export class VertexPinLabel {
         }
     }
     watchPinChange() {
-        this.value = this.getPinText();
+        var _a, _b;
+        this.value = (_b = (_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.text) !== null && _b !== void 0 ? _b : '';
         this.computeScreenPosition();
     }
     watchElementBoundsChange() {
         this.computeScreenPosition();
     }
     componentWillLoad() {
+        var _a, _b;
+        this.value = (_b = (_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.text) !== null && _b !== void 0 ? _b : '';
         this.computeScreenPosition();
     }
     componentDidLoad() {
@@ -181,7 +188,7 @@ export class VertexPinLabel {
     render() {
         var _a, _b, _c;
         const { primaryColor, accentColor } = getPinColors(this.pin);
-        return (h(Host, { key: '8d669c1fd5682762a6c4535e3deab3ac5bd6eba6' }, h("div", { key: '94a3e0a516efe046798c5cd9e6c95c041ec869cd', class: classNames('pin-label-input-wrapper', {
+        return (h(Host, { key: 'a02e4135406398f7e49331ac65ec121c216c75c1' }, h("div", { key: '14373fe8ac2fff6988c38d8c73fdd484c0fd8079', class: classNames('pin-label-input-wrapper', {
                 focused: this.focused,
             }), onPointerDown: this.handlePointerDown, style: {
                 top: `${((_a = this.computedScreenPosition) === null || _a === void 0 ? void 0 : _a.y.toString()) || 0}px`,
@@ -191,9 +198,9 @@ export class VertexPinLabel {
                 maxHeight: this.computeMaxHeight(),
                 borderColor: primaryColor,
                 background: accentColor,
-            } }, h("textarea", { key: 'af7e54ab8af5e48687a8b2a297b56d1ce17e5218', id: `pin-label-input-${(_c = this.pin) === null || _c === void 0 ? void 0 : _c.id}`, class: classNames('pin-label-input', 'pin-label-text', {
+            } }, h("textarea", { key: '10f15845d35c653f4d84c9d39694977e79ec329a', id: `pin-label-input-${(_c = this.pin) === null || _c === void 0 ? void 0 : _c.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", { key: '55597d1f05cdaf94694adbec9e7081956bee4f96', class: "pin-input-drag-target", onPointerDown: this.handlePointerDown }))), h("div", { key: '15e97bf8320baf7ab5c5b589fd11090d5f9d4a8d', ref: (el) => (this.contentEl = el), class: classNames('pin-label-text', 'pin-label-hidden'), style: {
+            }), 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", { key: 'a82f6c8553da740e3ab8c9c4f0b92cd1c3647ec6', class: "pin-input-drag-target", onPointerDown: this.handlePointerDown }))), h("div", { key: '197aae8a4bcb977305f662b61308310eacb0b780', ref: (el) => (this.contentEl = el), class: classNames('pin-label-text', 'pin-label-hidden'), style: {
                 maxWidth: this.computeMaxWidth(),
                 maxHeight: this.computeMaxHeight(),
             } }, this.hiddenContent())));
@@ -233,16 +240,6 @@ export class VertexPinLabel {
         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) &&
@@ -327,7 +324,8 @@ export class VertexPinLabel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "value",
+                "defaultValue": "''"
             },
             "pinController": {
                 "type": "unknown",

package/dist/collection/components/viewer-pin-label/viewer-pin-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"viewer-pin-label.js","sourceRoot":"","sources":["../../../../../src/components/viewer-pin-label/viewer-pin-label.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n getPinColors,\n isTextPin,\n PinModel,\n TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n tag: 'vertex-viewer-pin-label',\n styleUrl: 'viewer-pin-label.css',\n shadow: false,\n})\nexport class VertexPinLabel {\n /*\n The pin to draw for the group\n /\n @Prop()\n public pin?: TextPin;\n\n /\n The dimensions of the canvas for the pins\n /\n @Prop()\n public elementBounds?: DOMRect;\n\n /\n The current text value of the component. Value is updated on user\n * interaction.\n /\n @Prop({ mutable: true })\n public value: string;\n\n /\n The controller that drives behavior for pin operations\n /\n @Prop()\n public pinController?: PinController;\n\n /\n @internal\n /\n @Event({ bubbles: true })\n public labelChanged!: EventEmitter<void>;\n\n /\n Emitted whenever the label is focused, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelFocused!: EventEmitter<string \| undefined>;\n\n /\n Emitted whenever the label is blurred, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelBlurred!: EventEmitter<string \| undefined>;\n\n @Element()\n private hostEl!: HTMLElement;\n\n @State()\n private focused = false;\n\n @State()\n private computedScreenPosition?: Point.Point;\n\n @State()\n private textareaRows = 1;\n\n @State()\n private contentElBounds?: DOMRect;\n\n private relativePointerDownPosition?: Point.Point;\n private pinPointerDownPosition?: Point.Point;\n\n private inputEl?: HTMLTextAreaElement;\n private contentEl?: HTMLDivElement;\n\n private resizeObserver?: ResizeObserver;\n private contentResizeObserver?: ResizeObserver;\n\n public constructor() {\n this.value = this.getPinText();\n }\n\n /\n Gives focus to the component's internal text input.\n /\n @Method()\n public async setFocus(): Promise<void> {\n // HTMLInputElement.focus() doesn't exist in tests.\n if (typeof this.inputEl?.focus === 'function') {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n this.inputEl?.focus();\n }\n }\n\n /\n @internal\n * submits the current text, unfocuses the input and emits the blur event to consumers\n /\n @Method()\n public async submit(): Promise<void> {\n this.focused = false;\n this.labelBlurred.emit(this.pin?.id);\n if (this.pin != null) {\n this.pinController?.updatePin({\n ...this.pin,\n label: {\n point: this.pin.label.point,\n text: this.value,\n },\n });\n }\n }\n\n @Watch('focused')\n protected watchFocusChange(): void {\n this.labelChanged.emit();\n\n if (this.focused) {\n this.pinController?.setSelectedPinId(this.pin?.id);\n }\n }\n\n @Watch('pin')\n protected watchPinChange(): void {\n this.value = this.getPinText();\n this.computeScreenPosition();\n }\n\n @Watch('elementBounds')\n protected watchElementBoundsChange(): void {\n this.computeScreenPosition();\n }\n\n protected componentWillLoad(): void {\n this.computeScreenPosition();\n }\n\n protected componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n this.labelChanged.emit();\n });\n\n this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n if (this.hostEl != null) {\n this.resizeObserver.observe(this.hostEl);\n }\n\n if (this.contentEl != null) {\n this.contentResizeObserver.observe(this.contentEl);\n }\n\n if (this.pinController == null) {\n this.pinController = new PinController(new PinModel());\n }\n }\n\n protected disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.contentResizeObserver?.disconnect();\n }\n\n protected componentDidRender(): void {\n if (this.focused && this.inputEl != null) {\n this.setFocus();\n }\n }\n\n protected render(): JSX.Element {\n const { primaryColor, accentColor } = getPinColors(this.pin);\n return (\n <Host>\n <div\n class={classNames('pin-label-input-wrapper', {\n focused: this.focused,\n })}\n onPointerDown={this.handlePointerDown}\n style={{\n top: `${this.computedScreenPosition?.y.toString() \|\| 0}px`,\n left: `${this.computedScreenPosition?.x.toString() \|\| 0}px`,\n minWidth: this.computeMinWidth(),\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n borderColor: primaryColor,\n background: accentColor,\n }}\n >\n <textarea\n id={`pin-label-input-${this.pin?.id}`}\n class={classNames('pin-label-input', 'pin-label-text', {\n ['readonly']: !this.focused,\n })}\n disabled={!this.focused}\n ref={(ref) => (this.inputEl = ref)}\n value={this.value}\n rows={this.textareaRows}\n onKeyDown={this.handleInputKeyDown}\n onInput={this.handleTextInput}\n onBlur={this.handleTextBlur}\n />\n {/ This corrects for a behavior in Firefox where setting the `disabled` attribute to true /}\n {/ prevents any events from propagating. /}\n {!this.focused && (\n <div\n class=\"pin-input-drag-target\"\n onPointerDown={this.handlePointerDown}\n />\n )}\n </div>\n <div\n ref={(el) => (this.contentEl = el)}\n class={classNames('pin-label-text', 'pin-label-hidden')}\n style={{\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n }}\n >\n {this.hiddenContent()}\n </div>\n </Host>\n );\n }\n\n private hiddenContent(): Array<string \| HTMLBRElement> {\n // This corrects some inconsistencies in how a newline character\n // is represented in a div. Leveraging `<br>`s results in a more\n // consistent representation of the newlines in a textarea.\n return this.value.includes('\\n')\n ? this.value\n .split('\\n')\n .reduce(\n (res, str) => [...res, str, <br />],\n [] as Array<string \| HTMLBRElement>\n )\n : [this.value];\n }\n\n private computeMinWidth(): string {\n if (this.contentElBounds != null) {\n const expected = `${this.contentElBounds.width + 8}px`;\n\n return `min(${expected}, ${this.computeMaxWidth()})`;\n } else {\n return `var(--viewer-annotations-pin-label-min-width)`;\n }\n }\n\n private computeMaxWidth(): string {\n const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n return `min(${expected}, ${this.computeRemainingWidth()})`;\n }\n\n private computeMaxHeight(): string {\n const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n return `min(${expected}, ${this.computeRemainingHeight()})`;\n }\n\n private computeRemainingWidth(): string {\n return `calc(${this.elementBounds?.width.toString() \|\| 0}px - ${\n this.computedScreenPosition?.x.toString() \|\| 0\n }px)`;\n }\n\n private computeRemainingHeight(): string {\n return `calc(${this.elementBounds?.height.toString() \|\| 0}px - ${\n this.computedScreenPosition?.y.toString() \|\| 0\n }px)`;\n }\n\n private getPinText(): string {\n if (this.pin?.label.text != null) {\n this.value = this.pin.label.text;\n } else {\n this.value = '';\n }\n\n return this.value;\n }\n\n private computeScreenPosition(): void {\n this.computedScreenPosition =\n isTextPin(this.pin) &&\n this.elementBounds != null &&\n this.pin.label.point != null\n ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n : undefined;\n }\n\n private computeContentSize = (): void => {\n readDOM(() => {\n if (this.contentEl != null) {\n this.contentElBounds = this.contentEl.getBoundingClientRect();\n const computedStyles = getComputedStyle(this.contentEl);\n this.textareaRows = Math.max(\n 1,\n Math.ceil(\n (parseFloat(computedStyles.getPropertyValue('height')) -\n parseFloat(computedStyles.getPropertyValue('borderWidth')) 2) /\n parseFloat(computedStyles.getPropertyValue('lineHeight'))\n )\n );\n }\n });\n };\n\n private handleInputKeyDown = (event: KeyboardEvent): void => {\n event.stopPropagation();\n if (\n event.key === 'Enter' &&\n (event.ctrlKey \|\| event.metaKey \|\| event.shiftKey)\n ) {\n this.textareaRows += 1;\n this.value += '\\n';\n } else if (event.key === 'Enter') {\n event.preventDefault();\n this.submit();\n }\n };\n\n private handlePointerDown = (event: PointerEvent): void => {\n if (!this.focused) {\n if (this.elementBounds != null) {\n if (event.buttons !== 2) {\n event.preventDefault();\n event.stopPropagation();\n }\n this.relativePointerDownPosition = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds\n );\n this.pinPointerDownPosition = this.pin?.label.point;\n\n window.addEventListener('pointermove', this.handlePointerMove);\n window.addEventListener('pointerup', this.handlePointerUp);\n }\n }\n };\n\n private handlePointerMove = (event: PointerEvent): void => {\n if (\n this.elementBounds != null &&\n this.relativePointerDownPosition &&\n this.pinPointerDownPosition != null\n ) {\n // Prevent selection of any text while interacting with the label\n event.preventDefault();\n event.stopPropagation();\n\n const point = getMouseClientPosition(event, this.elementBounds);\n const relative = translatePointToRelative(point, this.elementBounds);\n\n const relativeDelta = Point.subtract(\n relative,\n this.relativePointerDownPosition\n );\n\n const myUpdatedPin =\n this.pin != null\n ? {\n ...this.pin,\n label: {\n ...this.pin.label,\n point: Point.add(this.pinPointerDownPosition, relativeDelta),\n },\n }\n : undefined;\n\n if (myUpdatedPin) {\n this.pinController?.updatePin(myUpdatedPin);\n this.computeScreenPosition();\n }\n }\n };\n\n private handlePointerUp = (event: PointerEvent): void => {\n if (\n this.pinController?.getToolMode() === 'edit' &&\n this.relativePointerDownPosition != null &&\n this.elementBounds != null\n ) {\n const pointerDownScreen = translatePointToScreen(\n this.relativePointerDownPosition,\n this.elementBounds\n );\n const distanceBetweenStartAndEndPoint = Point.distance(\n pointerDownScreen,\n getMouseClientPosition(event, this.elementBounds)\n );\n\n if (distanceBetweenStartAndEndPoint <= 2) {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n }\n }\n\n this.relativePointerDownPosition = undefined;\n this.pinPointerDownPosition = undefined;\n\n window.removeEventListener('pointermove', this.handlePointerMove);\n window.removeEventListener('pointerup', this.handlePointerUp);\n };\n\n private handleTextBlur = (): void => {\n this.submit();\n };\n\n private handleTextInput = (event: Event): void => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n };\n}\n"]}
1	+ {"version":3,"file":"viewer-pin-label.js","sourceRoot":"","sources":["../../../../../src/components/viewer-pin-label/viewer-pin-label.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n getPinColors,\n isTextPin,\n PinModel,\n TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n tag: 'vertex-viewer-pin-label',\n styleUrl: 'viewer-pin-label.css',\n shadow: false,\n})\nexport class VertexPinLabel {\n /*\n The pin to draw for the group\n /\n @Prop()\n public pin?: TextPin;\n\n /\n The dimensions of the canvas for the pins\n /\n @Prop()\n public elementBounds?: DOMRect;\n\n /\n The current text value of the component. Value is updated on user\n * interaction.\n /\n @Prop({ mutable: true })\n public value = '';\n\n /\n The controller that drives behavior for pin operations\n /\n @Prop()\n public pinController?: PinController;\n\n /\n @internal\n /\n @Event({ bubbles: true })\n public labelChanged!: EventEmitter<void>;\n\n /\n Emitted whenever the label is focused, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelFocused!: EventEmitter<string \| undefined>;\n\n /\n Emitted whenever the label is blurred, with the ID of the\n * associated pin (or undefined if no pin is provided).\n /\n @Event({ bubbles: true })\n public labelBlurred!: EventEmitter<string \| undefined>;\n\n @Element()\n private hostEl!: HTMLElement;\n\n @State()\n private focused = false;\n\n @State()\n private computedScreenPosition?: Point.Point;\n\n @State()\n private textareaRows = 1;\n\n @State()\n private contentElBounds?: DOMRect;\n\n private relativePointerDownPosition?: Point.Point;\n private pinPointerDownPosition?: Point.Point;\n\n private inputEl?: HTMLTextAreaElement;\n private contentEl?: HTMLDivElement;\n\n private resizeObserver?: ResizeObserver;\n private contentResizeObserver?: ResizeObserver;\n\n /\n Gives focus to the component's internal text input.\n /\n @Method()\n public async setFocus(): Promise<void> {\n // HTMLInputElement.focus() doesn't exist in tests.\n if (typeof this.inputEl?.focus === 'function') {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n this.inputEl?.focus();\n }\n }\n\n /\n @internal\n * submits the current text, unfocuses the input and emits the blur event to consumers\n /\n @Method()\n public async submit(): Promise<void> {\n this.focused = false;\n this.labelBlurred.emit(this.pin?.id);\n if (this.pin != null) {\n this.pinController?.updatePin({\n ...this.pin,\n label: {\n point: this.pin.label.point,\n text: this.value,\n },\n });\n }\n }\n\n @Watch('focused')\n protected watchFocusChange(): void {\n this.labelChanged.emit();\n\n if (this.focused) {\n this.pinController?.setSelectedPinId(this.pin?.id);\n }\n }\n\n @Watch('pin')\n protected watchPinChange(): void {\n this.value = this.pin?.label.text ?? '';\n this.computeScreenPosition();\n }\n\n @Watch('elementBounds')\n protected watchElementBoundsChange(): void {\n this.computeScreenPosition();\n }\n\n protected componentWillLoad(): void {\n this.value = this.pin?.label.text ?? '';\n this.computeScreenPosition();\n }\n\n protected componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n this.labelChanged.emit();\n });\n\n this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n if (this.hostEl != null) {\n this.resizeObserver.observe(this.hostEl);\n }\n\n if (this.contentEl != null) {\n this.contentResizeObserver.observe(this.contentEl);\n }\n\n if (this.pinController == null) {\n this.pinController = new PinController(new PinModel());\n }\n }\n\n protected disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.contentResizeObserver?.disconnect();\n }\n\n protected componentDidRender(): void {\n if (this.focused && this.inputEl != null) {\n this.setFocus();\n }\n }\n\n protected render(): JSX.Element {\n const { primaryColor, accentColor } = getPinColors(this.pin);\n return (\n <Host>\n <div\n class={classNames('pin-label-input-wrapper', {\n focused: this.focused,\n })}\n onPointerDown={this.handlePointerDown}\n style={{\n top: `${this.computedScreenPosition?.y.toString() \|\| 0}px`,\n left: `${this.computedScreenPosition?.x.toString() \|\| 0}px`,\n minWidth: this.computeMinWidth(),\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n borderColor: primaryColor,\n background: accentColor,\n }}\n >\n <textarea\n id={`pin-label-input-${this.pin?.id}`}\n class={classNames('pin-label-input', 'pin-label-text', {\n ['readonly']: !this.focused,\n })}\n disabled={!this.focused}\n ref={(ref) => (this.inputEl = ref)}\n value={this.value}\n rows={this.textareaRows}\n onKeyDown={this.handleInputKeyDown}\n onInput={this.handleTextInput}\n onBlur={this.handleTextBlur}\n />\n {/ This corrects for a behavior in Firefox where setting the `disabled` attribute to true /}\n {/ prevents any events from propagating. /}\n {!this.focused && (\n <div\n class=\"pin-input-drag-target\"\n onPointerDown={this.handlePointerDown}\n />\n )}\n </div>\n <div\n ref={(el) => (this.contentEl = el)}\n class={classNames('pin-label-text', 'pin-label-hidden')}\n style={{\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n }}\n >\n {this.hiddenContent()}\n </div>\n </Host>\n );\n }\n\n private hiddenContent(): Array<string \| HTMLBRElement> {\n // This corrects some inconsistencies in how a newline character\n // is represented in a div. Leveraging `<br>`s results in a more\n // consistent representation of the newlines in a textarea.\n return this.value.includes('\\n')\n ? this.value\n .split('\\n')\n .reduce(\n (res, str) => [...res, str, <br />],\n [] as Array<string \| HTMLBRElement>\n )\n : [this.value];\n }\n\n private computeMinWidth(): string {\n if (this.contentElBounds != null) {\n const expected = `${this.contentElBounds.width + 8}px`;\n\n return `min(${expected}, ${this.computeMaxWidth()})`;\n } else {\n return `var(--viewer-annotations-pin-label-min-width)`;\n }\n }\n\n private computeMaxWidth(): string {\n const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n return `min(${expected}, ${this.computeRemainingWidth()})`;\n }\n\n private computeMaxHeight(): string {\n const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n return `min(${expected}, ${this.computeRemainingHeight()})`;\n }\n\n private computeRemainingWidth(): string {\n return `calc(${this.elementBounds?.width.toString() \|\| 0}px - ${\n this.computedScreenPosition?.x.toString() \|\| 0\n }px)`;\n }\n\n private computeRemainingHeight(): string {\n return `calc(${this.elementBounds?.height.toString() \|\| 0}px - ${\n this.computedScreenPosition?.y.toString() \|\| 0\n }px)`;\n }\n\n private computeScreenPosition(): void {\n this.computedScreenPosition =\n isTextPin(this.pin) &&\n this.elementBounds != null &&\n this.pin.label.point != null\n ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n : undefined;\n }\n\n private computeContentSize = (): void => {\n readDOM(() => {\n if (this.contentEl != null) {\n this.contentElBounds = this.contentEl.getBoundingClientRect();\n const computedStyles = getComputedStyle(this.contentEl);\n this.textareaRows = Math.max(\n 1,\n Math.ceil(\n (parseFloat(computedStyles.getPropertyValue('height')) -\n parseFloat(computedStyles.getPropertyValue('borderWidth')) 2) /\n parseFloat(computedStyles.getPropertyValue('lineHeight'))\n )\n );\n }\n });\n };\n\n private handleInputKeyDown = (event: KeyboardEvent): void => {\n event.stopPropagation();\n if (\n event.key === 'Enter' &&\n (event.ctrlKey \|\| event.metaKey \|\| event.shiftKey)\n ) {\n this.textareaRows += 1;\n this.value += '\\n';\n } else if (event.key === 'Enter') {\n event.preventDefault();\n this.submit();\n }\n };\n\n private handlePointerDown = (event: PointerEvent): void => {\n if (!this.focused) {\n if (this.elementBounds != null) {\n if (event.buttons !== 2) {\n event.preventDefault();\n event.stopPropagation();\n }\n this.relativePointerDownPosition = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds\n );\n this.pinPointerDownPosition = this.pin?.label.point;\n\n window.addEventListener('pointermove', this.handlePointerMove);\n window.addEventListener('pointerup', this.handlePointerUp);\n }\n }\n };\n\n private handlePointerMove = (event: PointerEvent): void => {\n if (\n this.elementBounds != null &&\n this.relativePointerDownPosition &&\n this.pinPointerDownPosition != null\n ) {\n // Prevent selection of any text while interacting with the label\n event.preventDefault();\n event.stopPropagation();\n\n const point = getMouseClientPosition(event, this.elementBounds);\n const relative = translatePointToRelative(point, this.elementBounds);\n\n const relativeDelta = Point.subtract(\n relative,\n this.relativePointerDownPosition\n );\n\n const myUpdatedPin =\n this.pin != null\n ? {\n ...this.pin,\n label: {\n ...this.pin.label,\n point: Point.add(this.pinPointerDownPosition, relativeDelta),\n },\n }\n : undefined;\n\n if (myUpdatedPin) {\n this.pinController?.updatePin(myUpdatedPin);\n this.computeScreenPosition();\n }\n }\n };\n\n private handlePointerUp = (event: PointerEvent): void => {\n if (\n this.pinController?.getToolMode() === 'edit' &&\n this.relativePointerDownPosition != null &&\n this.elementBounds != null\n ) {\n const pointerDownScreen = translatePointToScreen(\n this.relativePointerDownPosition,\n this.elementBounds\n );\n const distanceBetweenStartAndEndPoint = Point.distance(\n pointerDownScreen,\n getMouseClientPosition(event, this.elementBounds)\n );\n\n if (distanceBetweenStartAndEndPoint <= 2) {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n }\n }\n\n this.relativePointerDownPosition = undefined;\n this.pinPointerDownPosition = undefined;\n\n window.removeEventListener('pointermove', this.handlePointerMove);\n window.removeEventListener('pointerup', this.handlePointerUp);\n };\n\n private handleTextBlur = (): void => {\n this.submit();\n };\n\n private handleTextInput = (event: Event): void => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n };\n}\n"]}

package/dist/components/{p-BlJx96mR.js → p-Du8OS-pg.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{h as e,F as i,t,p as n,H as o}from"./p-DmsAWRoU.js";import{p as s,m as r,v as a}from"./p-Tvs4yxd5.js";import"./p-CWieLCfP.js";import"./p-AZXboIdP.js";import"./p-Cc_lzbST.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-DsZcVdq8.js";import"./p-DxRQdGXU.js";import"./p-BKHZYE0A.js";import{V as l}from"./p-Dpyl9pSp.js";import{d,P as c,t as p}from"./p-BfvfuUhv.js";import{g as h,i as v,a as u,P as b}from"./p-zxYMoA6A.js";import{c as m}from"./p-C6gMOKYg.js";import{d as f}from"./p-ChMr_49H.js";import{d as w}from"./p-nGQgu0fu.js";import{d as x}from"./p-eQ-n5bzB.js";const y=({pin:t,selected:n,occluded:o,detached:s})=>{const{primaryColor:r}=h(t);return e(i,null,u(t)&&e("div",{id:"pin-anchor",class:m("pin-anchor",{selected:n,"pin-occluded":o,"pin-detached":s}),style:{background:r}}),v(t)&&e("vertex-viewer-icon",{name:"pin-fill",size:"lg",class:m("pin",{"pin-selected":n,"pin-occluded":o,"pin-detached":s}),style:{color:r}}))};function g(e,i,t){const n={x:e.x+t.width/2,y:e.y};const o={x:e.x+t.width/2,y:e.y+t.height};const r={x:e.x+t.width,y:e.y+t.height/2};const a={x:e.x,y:e.y+t.height/2};const l=[n,o,a,r];const d=l.map((e=>s.distance(e,i)));const c=d.indexOf(Math.min(...d));return l[c]}const P=()=>`: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 k=n(class t extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.matrix=r.makeIdentity();this.projectionViewMatrix=r.makeIdentity();this.pinModel=new b;this.selected=false;this.occluded=false;this.detached=false;this.invalidateStateCounter=0;this.invalidateState=()=>{this.invalidateStateCounter=this.invalidateStateCounter+1}}componentDidLoad(){var e;this.setLabelObserver();if(this.pinController==null){this.pinController=new c(this.pinModel)}if(this.selected){(e=this.labelEl)===null||e===void 0?void 0:e.setFocus()}}async handleOcclusionStateChanged(e){this.occluded=e.detail}async handleDetachedStateChanged(e){this.detached=e.detail}disconnectedCallback(){var e,i;(e=this.labelEl)===null||e===void 0?void 0:e.removeEventListener("labelChanged",this.invalidateState);(i=this.resizeObserver)===null||i===void 0?void 0:i.disconnect()}render(){var t;if(this.pin==null){throw new Error("Unable to draw pin")}const{pinPoint:n,labelPoint:o}=this.computePinPoints(this.pin);return e(i,{key:"b26f95c0e4b86b263eca80c5db8576ef1c787b26"},e("vertex-viewer-dom-element",{key:"9fcb9d0f55f9abb3397db4051ed59c7a05d4ae6a","data-testid":`drawn-pin-${this.pin.id}`,position:this.pin.worldPosition,onPointerDown:async()=>{var e;await((e=this.labelEl)===null||e===void 0?void 0:e.submit());this.selectPin();this.handleAnchorPointerDown()},detachedOff:false},e(y,{key:"2264652f4c83539f47af324f6937fb6581edafe1",pin:this.pin,selected:this.selected,occluded:this.occluded,detached:this.detached})),u(this.pin)&&!this.occluded&&!this.detached&&e(i,{key:"04c86f573b99fb320b0a651dc903131e6654bd9e"},e("vertex-viewer-pin-label-line",{key:"cec6ee8195fba5fadd9e1b272abd61b6b6dd05c6",id:`pin-label-line-${(t=this.pin)===null||t===void 0?void 0:t.id}`,pinPoint:n,pin:this.pin,labelPoint:o,onPointerDown:()=>this.selectPin()}),e("vertex-viewer-pin-label",{key:"556a36ac8e9046b0e40c6973c1ecf47319f28ab6",pin:this.pin,ref:e=>this.labelEl=e,elementBounds:this.elementBounds,pinController:this.pinController,onPointerDown:()=>this.selectPin()})))}setLabelObserver(){if(this.labelEl!=null){this.labelEl.addEventListener("labelChanged",this.invalidateState);this.resizeObserver=new ResizeObserver((()=>this.invalidateState()));this.resizeObserver.observe(this.labelEl)}}computePinPoints(e){if(this.elementBounds!=null&&this.pin!=null){return u(this.pin)&&this.pin.label.point!=null?this.computeTextPinPoints(this.pin,this.elementBounds):this.computeDefaultPinPoints(this.pin,this.elementBounds)}return{pinPoint:e.worldPosition}}computeDefaultPinPoints(e,i){return{pinPoint:this.getFromWorldPosition(e.worldPosition,this.projectionViewMatrix,i)}}computeTextPinPoints(e,i){var t,n,o,s;const{pinPoint:r}=this.computeDefaultPinPoints(e,i);const a=p(e.label.point,i);const l=((n=(t=this.labelEl)===null||t===void 0?void 0:t.firstElementChild)===null||n===void 0?void 0:n.clientWidth)||0;const d=((s=(o=this.labelEl)===null||o===void 0?void 0:o.firstElementChild)===null||s===void 0?void 0:s.clientHeight)||0;return{pinPoint:r,labelPoint:g(a,r,{width:l,height:d})}}handleAnchorPointerDown(){var e,i;if(this.elementBounds!=null&&((e=this.pinController)===null||e===void 0?void 0:e.getToolMode())==="edit"&&this.pin!=null){(i=this.pinController)===null||i===void 0?void 0:i.setDraggable({id:this.pin.id})}}selectPin(){var e,i;(e=this.pinController)===null||e===void 0?void 0:e.setSelectedPinId((i=this.pin)===null||i===void 0?void 0:i.id)}getFromWorldPosition(e,i,t){const n=a.transformMatrix(e,i);return l.fromDimensions(t).transformVectorToViewport(n)}static get style(){return P()}},[0,"vertex-viewer-pin-group",{pin:[16],matrix:[1040],projectionViewMatrix:[16],elementBounds:[1040],pinModel:[16],pinController:[16],selected:[4],occluded:[1540],detached:[1540],invalidateStateCounter:[32]},[[0,"occlusionStateChanged","handleOcclusionStateChanged"],[0,"detachedStateChanged","handleDetachedStateChanged"]]]);function j(){if(typeof customElements==="undefined"){return}const e=["vertex-viewer-pin-group","vertex-viewer-dom-element","vertex-viewer-icon","vertex-viewer-pin-label","vertex-viewer-pin-label-line"];e.forEach((e=>{switch(e){case"vertex-viewer-pin-group":if(!customElements.get(t(e))){customElements.define(t(e),k)}break;case"vertex-viewer-dom-element":if(!customElements.get(t(e))){f()}break;case"vertex-viewer-icon":if(!customElements.get(t(e))){w()}break;case"vertex-viewer-pin-label":if(!customElements.get(t(e))){d()}break;case"vertex-viewer-pin-label-line":if(!customElements.get(t(e))){x()}break}}))}j();export{k as V,j as d};
-//# sourceMappingURL=p-BlJx96mR.js.map
+import{h as e,F as i,t,p as n,H as o}from"./p-DmsAWRoU.js";import{p as s,m as r,v as a}from"./p-Tvs4yxd5.js";import"./p-CWieLCfP.js";import"./p-AZXboIdP.js";import"./p-Cc_lzbST.js";import"./p-FRKLa468.js";import"./p-ux1ckSDN.js";import"./p-DsZcVdq8.js";import"./p-DxRQdGXU.js";import"./p-BKHZYE0A.js";import{V as l}from"./p-Dpyl9pSp.js";import{d,P as c,t as p}from"./p-Kq-xexYy.js";import{g as h,i as v,a as u,P as b}from"./p-zxYMoA6A.js";import{c as m}from"./p-C6gMOKYg.js";import{d as f}from"./p-ChMr_49H.js";import{d as w}from"./p-nGQgu0fu.js";import{d as x}from"./p-eQ-n5bzB.js";const y=({pin:t,selected:n,occluded:o,detached:s})=>{const{primaryColor:r}=h(t);return e(i,null,u(t)&&e("div",{id:"pin-anchor",class:m("pin-anchor",{selected:n,"pin-occluded":o,"pin-detached":s}),style:{background:r}}),v(t)&&e("vertex-viewer-icon",{name:"pin-fill",size:"lg",class:m("pin",{"pin-selected":n,"pin-occluded":o,"pin-detached":s}),style:{color:r}}))};function g(e,i,t){const n={x:e.x+t.width/2,y:e.y};const o={x:e.x+t.width/2,y:e.y+t.height};const r={x:e.x+t.width,y:e.y+t.height/2};const a={x:e.x,y:e.y+t.height/2};const l=[n,o,a,r];const d=l.map((e=>s.distance(e,i)));const c=d.indexOf(Math.min(...d));return l[c]}const P=()=>`: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 k=n(class t extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.matrix=r.makeIdentity();this.projectionViewMatrix=r.makeIdentity();this.pinModel=new b;this.selected=false;this.occluded=false;this.detached=false;this.invalidateStateCounter=0;this.invalidateState=()=>{this.invalidateStateCounter=this.invalidateStateCounter+1}}componentDidLoad(){var e;this.setLabelObserver();if(this.pinController==null){this.pinController=new c(this.pinModel)}if(this.selected){(e=this.labelEl)===null||e===void 0?void 0:e.setFocus()}}async handleOcclusionStateChanged(e){this.occluded=e.detail}async handleDetachedStateChanged(e){this.detached=e.detail}disconnectedCallback(){var e,i;(e=this.labelEl)===null||e===void 0?void 0:e.removeEventListener("labelChanged",this.invalidateState);(i=this.resizeObserver)===null||i===void 0?void 0:i.disconnect()}render(){var t;if(this.pin==null){throw new Error("Unable to draw pin")}const{pinPoint:n,labelPoint:o}=this.computePinPoints(this.pin);return e(i,{key:"b26f95c0e4b86b263eca80c5db8576ef1c787b26"},e("vertex-viewer-dom-element",{key:"9fcb9d0f55f9abb3397db4051ed59c7a05d4ae6a","data-testid":`drawn-pin-${this.pin.id}`,position:this.pin.worldPosition,onPointerDown:async()=>{var e;await((e=this.labelEl)===null||e===void 0?void 0:e.submit());this.selectPin();this.handleAnchorPointerDown()},detachedOff:false},e(y,{key:"2264652f4c83539f47af324f6937fb6581edafe1",pin:this.pin,selected:this.selected,occluded:this.occluded,detached:this.detached})),u(this.pin)&&!this.occluded&&!this.detached&&e(i,{key:"04c86f573b99fb320b0a651dc903131e6654bd9e"},e("vertex-viewer-pin-label-line",{key:"cec6ee8195fba5fadd9e1b272abd61b6b6dd05c6",id:`pin-label-line-${(t=this.pin)===null||t===void 0?void 0:t.id}`,pinPoint:n,pin:this.pin,labelPoint:o,onPointerDown:()=>this.selectPin()}),e("vertex-viewer-pin-label",{key:"556a36ac8e9046b0e40c6973c1ecf47319f28ab6",pin:this.pin,ref:e=>this.labelEl=e,elementBounds:this.elementBounds,pinController:this.pinController,onPointerDown:()=>this.selectPin()})))}setLabelObserver(){if(this.labelEl!=null){this.labelEl.addEventListener("labelChanged",this.invalidateState);this.resizeObserver=new ResizeObserver((()=>this.invalidateState()));this.resizeObserver.observe(this.labelEl)}}computePinPoints(e){if(this.elementBounds!=null&&this.pin!=null){return u(this.pin)&&this.pin.label.point!=null?this.computeTextPinPoints(this.pin,this.elementBounds):this.computeDefaultPinPoints(this.pin,this.elementBounds)}return{pinPoint:e.worldPosition}}computeDefaultPinPoints(e,i){return{pinPoint:this.getFromWorldPosition(e.worldPosition,this.projectionViewMatrix,i)}}computeTextPinPoints(e,i){var t,n,o,s;const{pinPoint:r}=this.computeDefaultPinPoints(e,i);const a=p(e.label.point,i);const l=((n=(t=this.labelEl)===null||t===void 0?void 0:t.firstElementChild)===null||n===void 0?void 0:n.clientWidth)||0;const d=((s=(o=this.labelEl)===null||o===void 0?void 0:o.firstElementChild)===null||s===void 0?void 0:s.clientHeight)||0;return{pinPoint:r,labelPoint:g(a,r,{width:l,height:d})}}handleAnchorPointerDown(){var e,i;if(this.elementBounds!=null&&((e=this.pinController)===null||e===void 0?void 0:e.getToolMode())==="edit"&&this.pin!=null){(i=this.pinController)===null||i===void 0?void 0:i.setDraggable({id:this.pin.id})}}selectPin(){var e,i;(e=this.pinController)===null||e===void 0?void 0:e.setSelectedPinId((i=this.pin)===null||i===void 0?void 0:i.id)}getFromWorldPosition(e,i,t){const n=a.transformMatrix(e,i);return l.fromDimensions(t).transformVectorToViewport(n)}static get style(){return P()}},[0,"vertex-viewer-pin-group",{pin:[16],matrix:[1040],projectionViewMatrix:[16],elementBounds:[1040],pinModel:[16],pinController:[16],selected:[4],occluded:[1540],detached:[1540],invalidateStateCounter:[32]},[[0,"occlusionStateChanged","handleOcclusionStateChanged"],[0,"detachedStateChanged","handleDetachedStateChanged"]]]);function j(){if(typeof customElements==="undefined"){return}const e=["vertex-viewer-pin-group","vertex-viewer-dom-element","vertex-viewer-icon","vertex-viewer-pin-label","vertex-viewer-pin-label-line"];e.forEach((e=>{switch(e){case"vertex-viewer-pin-group":if(!customElements.get(t(e))){customElements.define(t(e),k)}break;case"vertex-viewer-dom-element":if(!customElements.get(t(e))){f()}break;case"vertex-viewer-icon":if(!customElements.get(t(e))){w()}break;case"vertex-viewer-pin-label":if(!customElements.get(t(e))){d()}break;case"vertex-viewer-pin-label-line":if(!customElements.get(t(e))){x()}break}}))}j();export{k as V,j as d};
+//# sourceMappingURL=p-Du8OS-pg.js.map

package/dist/components/p-Kq-xexYy.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
+ */
+import{t as i,p as t,H as n,d as e,h as o,e as s}from"./p-DmsAWRoU.js";import{e as a,p as r}from"./p-Tvs4yxd5.js";import{c as l}from"./p-C6gMOKYg.js";import{g as h}from"./p-BSYTUXcE.js";import{P as d,g as c,a as p}from"./p-zxYMoA6A.js";import{r as v}from"./p-Ss6piqGD.js";import{r as u}from"./p-Dc9KNUUp.js";class b{constructor(i,t="view",n="pin-icon",e=undefined){this.model=i;this.mode=t;this.type=n;this.styleAttributes=e}addPin(i){this.model.addPin(i)}clearPins(){this.model.clearPins()}removePin(i){this.model.removePin(i)}setPins(i){this.model.setPins(i)}setPin(i){this.model.setPin(i)}updatePin(i){this.model.updatePin(i)}setSelectedPinId(i){this.model.setSelectedPin(i)}getToolMode(){return this.mode}getToolType(){return this.type}setToolMode(i){this.mode=i}setToolType(i){this.type=i}getDraggable(){return this.draggable}setDraggable(i){this.draggable=i}setPrimaryColor(i){this.styleAttributes={...this.styleAttributes,primaryColor:i}}setAccentColor(i){this.styleAttributes={...this.styleAttributes,accentColor:i}}getStyleAttributes(){return this.styleAttributes}updateDraggable(i,t,n){if(this.draggable!=null){this.draggable=i}const e=this.model.getPinById(i.id);if(e!=null){this.updatePin({...e,worldPosition:t,partId:n})}}}function w(i,t){const n=Math.max(t.start,Math.min(t.end,i.x));const e=Math.max(t.start,Math.min(t.end,i.y));return r.create(n,e)}function m(i,t){return r.add(r.scale(i,t.width,t.height),a.center(t))}function f(i,t,n,e,o){const s=1/t.height;const l=1/t.width;const h=a.center(t);const d=r.scale(r.subtract(i,h),l,s);if(n){const t=r.scale(r.create(e,o),l,s);const n=h.x>i.x;const a=n?t.x:-3*t.x;const c=h.y>i.y;const p=c?t.y:-3*t.y;const v=r.add(d,r.create(a,p));return w(v,u.create(-.5,.5))}else{return w(d,u.create(-.5,.5))}}function g(i){return window.getComputedStyle(i)}const x=()=>`:host{--viewer-annotations-pin-label-background-color:var(--viewer-annotations-pin-accent-color);--viewer-annotations-pin-label-border-color:var(--viewer-annotations-pin-primary-color);--viewer-annotations-pin-label-focused-border-color:var(--viewer-annotations-pin-primary-color);--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)))}`;const y=t(class i extends n{constructor(i){super();if(i!==false){this.__registerHost()}this.labelChanged=e(this,"labelChanged");this.labelFocused=e(this,"labelFocused");this.labelBlurred=e(this,"labelBlurred");this.value="";this.focused=false;this.textareaRows=1;this.computeContentSize=()=>{v((()=>{if(this.contentEl!=null){this.contentElBounds=this.contentEl.getBoundingClientRect();const i=g(this.contentEl);this.textareaRows=Math.max(1,Math.ceil((parseFloat(i.getPropertyValue("height"))-parseFloat(i.getPropertyValue("borderWidth"))*2)/parseFloat(i.getPropertyValue("lineHeight"))))}}))};this.handleInputKeyDown=i=>{i.stopPropagation();if(i.key==="Enter"&&(i.ctrlKey||i.metaKey||i.shiftKey)){this.textareaRows+=1;this.value+="\n"}else if(i.key==="Enter"){i.preventDefault();this.submit()}};this.handlePointerDown=i=>{var t;if(!this.focused){if(this.elementBounds!=null){if(i.buttons!==2){i.preventDefault();i.stopPropagation()}this.relativePointerDownPosition=f(h(i,this.elementBounds),this.elementBounds);this.pinPointerDownPosition=(t=this.pin)===null||t===void 0?void 0:t.label.point;window.addEventListener("pointermove",this.handlePointerMove);window.addEventListener("pointerup",this.handlePointerUp)}}};this.handlePointerMove=i=>{var t;if(this.elementBounds!=null&&this.relativePointerDownPosition&&this.pinPointerDownPosition!=null){i.preventDefault();i.stopPropagation();const n=h(i,this.elementBounds);const e=f(n,this.elementBounds);const o=r.subtract(e,this.relativePointerDownPosition);const s=this.pin!=null?{...this.pin,label:{...this.pin.label,point:r.add(this.pinPointerDownPosition,o)}}:undefined;if(s){(t=this.pinController)===null||t===void 0?void 0:t.updatePin(s);this.computeScreenPosition()}}};this.handlePointerUp=i=>{var t,n;if(((t=this.pinController)===null||t===void 0?void 0:t.getToolMode())==="edit"&&this.relativePointerDownPosition!=null&&this.elementBounds!=null){const t=m(this.relativePointerDownPosition,this.elementBounds);const e=r.distance(t,h(i,this.elementBounds));if(e<=2){this.focused=true;this.labelFocused.emit((n=this.pin)===null||n===void 0?void 0:n.id)}}this.relativePointerDownPosition=undefined;this.pinPointerDownPosition=undefined;window.removeEventListener("pointermove",this.handlePointerMove);window.removeEventListener("pointerup",this.handlePointerUp)};this.handleTextBlur=()=>{this.submit()};this.handleTextInput=i=>{const t=i.target;this.value=t.value}}async setFocus(){var i,t,n;if(typeof((i=this.inputEl)===null||i===void 0?void 0:i.focus)==="function"){this.focused=true;this.labelFocused.emit((t=this.pin)===null||t===void 0?void 0:t.id);(n=this.inputEl)===null||n===void 0?void 0:n.focus()}}async submit(){var i,t;this.focused=false;this.labelBlurred.emit((i=this.pin)===null||i===void 0?void 0:i.id);if(this.pin!=null){(t=this.pinController)===null||t===void 0?void 0:t.updatePin({...this.pin,label:{point:this.pin.label.point,text:this.value}})}}watchFocusChange(){var i,t;this.labelChanged.emit();if(this.focused){(i=this.pinController)===null||i===void 0?void 0:i.setSelectedPinId((t=this.pin)===null||t===void 0?void 0:t.id)}}watchPinChange(){var i,t;this.value=(t=(i=this.pin)===null||i===void 0?void 0:i.label.text)!==null&&t!==void 0?t:"";this.computeScreenPosition()}watchElementBoundsChange(){this.computeScreenPosition()}componentWillLoad(){var i,t;this.value=(t=(i=this.pin)===null||i===void 0?void 0:i.label.text)!==null&&t!==void 0?t:"";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 b(new d)}}disconnectedCallback(){var i,t;(i=this.resizeObserver)===null||i===void 0?void 0:i.disconnect();(t=this.contentResizeObserver)===null||t===void 0?void 0:t.disconnect()}componentDidRender(){if(this.focused&&this.inputEl!=null){this.setFocus()}}render(){var i,t,n;const{primaryColor:e,accentColor:a}=c(this.pin);return o(s,{key:"a02e4135406398f7e49331ac65ec121c216c75c1"},o("div",{key:"14373fe8ac2fff6988c38d8c73fdd484c0fd8079",class:l("pin-label-input-wrapper",{focused:this.focused}),onPointerDown:this.handlePointerDown,style:{top:`${((i=this.computedScreenPosition)===null||i===void 0?void 0:i.y.toString())||0}px`,left:`${((t=this.computedScreenPosition)===null||t===void 0?void 0:t.x.toString())||0}px`,minWidth:this.computeMinWidth(),maxWidth:this.computeMaxWidth(),maxHeight:this.computeMaxHeight(),borderColor:e,background:a}},o("textarea",{key:"10f15845d35c653f4d84c9d39694977e79ec329a",id:`pin-label-input-${(n=this.pin)===null||n===void 0?void 0:n.id}`,class:l("pin-label-input","pin-label-text",{["readonly"]:!this.focused}),disabled:!this.focused,ref:i=>this.inputEl=i,value:this.value,rows:this.textareaRows,onKeyDown:this.handleInputKeyDown,onInput:this.handleTextInput,onBlur:this.handleTextBlur}),!this.focused&&o("div",{key:"a82f6c8553da740e3ab8c9c4f0b92cd1c3647ec6",class:"pin-input-drag-target",onPointerDown:this.handlePointerDown})),o("div",{key:"197aae8a4bcb977305f662b61308310eacb0b780",ref:i=>this.contentEl=i,class:l("pin-label-text","pin-label-hidden"),style:{maxWidth:this.computeMaxWidth(),maxHeight:this.computeMaxHeight()}},this.hiddenContent()))}hiddenContent(){return this.value.includes("\n")?this.value.split("\n").reduce(((i,t)=>[...i,t,o("br",null)]),[]):[this.value]}computeMinWidth(){if(this.contentElBounds!=null){const i=`${this.contentElBounds.width+8}px`;return`min(${i}, ${this.computeMaxWidth()})`}else{return`var(--viewer-annotations-pin-label-min-width)`}}computeMaxWidth(){const i=`var(--viewer-annotations-pin-label-max-width)`;return`min(${i}, ${this.computeRemainingWidth()})`}computeMaxHeight(){const i=`var(--viewer-annotations-pin-label-max-height)`;return`min(${i}, ${this.computeRemainingHeight()})`}computeRemainingWidth(){var i,t;return`calc(${((i=this.elementBounds)===null||i===void 0?void 0:i.width.toString())||0}px - ${((t=this.computedScreenPosition)===null||t===void 0?void 0:t.x.toString())||0}px)`}computeRemainingHeight(){var i,t;return`calc(${((i=this.elementBounds)===null||i===void 0?void 0:i.height.toString())||0}px - ${((t=this.computedScreenPosition)===null||t===void 0?void 0:t.y.toString())||0}px)`}computeScreenPosition(){this.computedScreenPosition=p(this.pin)&&this.elementBounds!=null&&this.pin.label.point!=null?m(this.pin.label.point,this.elementBounds):undefined}get hostEl(){return this}static get watchers(){return{focused:[{watchFocusChange:0}],pin:[{watchPinChange:0}],elementBounds:[{watchElementBoundsChange:0}]}}static get style(){return x()}},[0,"vertex-viewer-pin-label",{pin:[16],elementBounds:[16],value:[1025],pinController:[16],focused:[32],computedScreenPosition:[32],textareaRows:[32],contentElBounds:[32],setFocus:[64],submit:[64]},undefined,{focused:[{watchFocusChange:0}],pin:[{watchPinChange:0}],elementBounds:[{watchElementBoundsChange:0}]}]);function C(){if(typeof customElements==="undefined"){return}const t=["vertex-viewer-pin-label"];t.forEach((t=>{switch(t){case"vertex-viewer-pin-label":if(!customElements.get(i(t))){customElements.define(i(t),y)}break}}))}C();export{b as P,y as V,f as a,C as d,m as t};
+//# sourceMappingURL=p-Kq-xexYy.js.map

package/dist/components/p-Kq-xexYy.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["PinController","constructor","model","mode","type","styleAttributes","undefined","this","addPin","pin","clearPins","removePin","setPins","pins","setPin","updatePin","setSelectedPinId","pinId","setSelectedPin","getToolMode","getToolType","setToolMode","setToolType","getDraggable","draggable","setDraggable","setPrimaryColor","color","primaryColor","setAccentColor","accentColor","getStyleAttributes","updateDraggable","worldPosition","partId","getPinById","id","constrainRelativePoint","pt","range","constrainedX","Math","max","start","min","end","x","constrainedY","y","Point","create","translatePointToScreen","canvasDimensions","add","scale","width","height","Dimensions","center","translatePointToRelative","includeOffset","xOffset","yOffset","verticalScaleFactor","horizontalScaleFactor","canvasCenterPoint","point","subtract","offset","centerIsToTheRightInXDirection","xOffsetCalculated","centerIsBelowInYDirection","yOffsetCalculated","offsetPoint","Range","getComputedStyle","el","window","viewerPinLabelCss","VertexPinLabel","__stencil_proxyCustomElement","HTMLElement","registerHost","value","focused","textareaRows","computeContentSize","readDOM","contentEl","contentElBounds","getBoundingClientRect","computedStyles","ceil","parseFloat","getPropertyValue","handleInputKeyDown","event","stopPropagation","key","ctrlKey","metaKey","shiftKey","preventDefault","submit","handlePointerDown","elementBounds","buttons","relativePointerDownPosition","getMouseClientPosition","pinPointerDownPosition","_a","label","addEventListener","handlePointerMove","handlePointerUp","relative","relativeDelta","myUpdatedPin","pinController","computeScreenPosition","pointerDownScreen","distanceBetweenStartAndEndPoint","distance","labelFocused","emit","_b","removeEventListener","handleTextBlur","handleTextInput","input","target","setFocus","inputEl","focus","_c","labelBlurred","text","watchFocusChange","labelChanged","watchPinChange","watchElementBoundsChange","componentWillLoad","componentDidLoad","resizeObserver","ResizeObserver","contentResizeObserver","hostEl","observe","PinModel","disconnectedCallback","disconnect","componentDidRender","render","getPinColors","h","Host","class","classNames","onPointerDown","style","top","computedScreenPosition","toString","left","minWidth","computeMinWidth","maxWidth","computeMaxWidth","maxHeight","computeMaxHeight","borderColor","background","disabled","ref","rows","onKeyDown","onInput","onBlur","hiddenContent","includes","split","reduce","res","str","expected","computeRemainingWidth","computeRemainingHeight","isTextPin"],"sources":["src/lib/pins/controller.ts","src/components/viewer-pin-tool/utils.ts","src/components/viewer-pin-label/utils.ts","src/components/viewer-pin-label/viewer-pin-label.css?tag=vertex-viewer-pin-label","src/components/viewer-pin-label/viewer-pin-label.tsx"],"sourcesContent":["import { Point, Vector3 } from '@vertexvis/geometry';\nimport { Color } from '@vertexvis/utils';\n\nimport {\n Pin,\n PinModel,\n PinStyleAttributes,\n ViewerPinToolMode,\n ViewerPinToolType,\n} from './model';\n\nexport interface Draggable {\n id: string;\n lastPoint?: Point.Point;\n}\n\n/**\n * The `PinController` is responsible for adding pin entities to the viewer canvas\n */\nexport class PinController {\n private draggable?: Draggable;\n\n public constructor(\n private model: PinModel,\n private mode: ViewerPinToolMode = 'view',\n private type: ViewerPinToolType = 'pin-icon',\n private styleAttributes: PinStyleAttributes | undefined = undefined\n ) {}\n\n /**\n * Registers an entity to place on the canvas and places the pin on the associated part.\n *\n * @param pin The pin entity\n * @returns A void promise\n */\n public addPin(pin: Pin): void {\n this.model.addPin(pin);\n }\n\n /**\n * Clears all entities and returns a promise that resolves with an empty list\n * of pin results.\n */\n public clearPins(): void {\n this.model.clearPins();\n }\n\n /**\n * Deregisters an entity and performs a pin if this entity was\n * removed.\n *\n * @param entity The entity to remove.\n * @returns A promise that resolves with the results after removing this\n * entity.\n */\n public removePin(pin: Pin): void {\n this.model.removePin(pin);\n }\n\n /**\n * Registers a set of entities and adds a pin\n *\n * @param entities The pin entities to draw.\n * @returns A promise that resolves with the results after registering these\n * entities.\n */\n public setPins(pins: Set<Pin>): void {\n this.model.setPins(pins);\n }\n\n /**\n * Sets the set of entities to be placed with the model.\n *\n * @param pin A pin to set\n * @returns `true` if the entity has been added.\n */\n public setPin(pin: Pin): void {\n this.model.setPin(pin);\n }\n\n /**\n * Updates an existing pin\n * @param pin A pin to set\n * @returns `true` if the entity has been updated, false otherwise\n */\n public updatePin(pin: Pin): void {\n this.model.updatePin(pin);\n }\n\n /**\n * Tells the controller which pin is selected in the model\n * @param pinId\n */\n public setSelectedPinId(pinId?: string): void {\n this.model.setSelectedPin(pinId);\n }\n\n public getToolMode(): ViewerPinToolMode {\n return this.mode;\n }\n\n public getToolType(): ViewerPinToolType {\n return this.type;\n }\n\n public setToolMode(mode: ViewerPinToolMode): void {\n this.mode = mode;\n }\n\n public setToolType(type: ViewerPinToolType): void {\n this.type = type;\n }\n\n public getDraggable(): Draggable | undefined {\n return this.draggable;\n }\n\n public setDraggable(draggable: Draggable | undefined): void {\n this.draggable = draggable;\n }\n\n public setPrimaryColor(color?: Color.Color | string): void {\n this.styleAttributes = {\n ...this.styleAttributes,\n primaryColor: color,\n };\n }\n\n public setAccentColor(color?: Color.Color | string): void {\n this.styleAttributes = {\n ...this.styleAttributes,\n accentColor: color,\n };\n }\n\n public getStyleAttributes(): PinStyleAttributes | undefined {\n return this.styleAttributes;\n }\n\n public updateDraggable(\n draggable: Draggable,\n worldPosition: Vector3.Vector3,\n partId?: string\n ): void {\n if (this.draggable != null) {\n this.draggable = draggable;\n }\n const pin = this.model.getPinById(draggable.id);\n if (pin != null) {\n this.updatePin({\n ...pin,\n worldPosition,\n partId,\n });\n }\n }\n}\n","import { Dimensions, Point } from '@vertexvis/geometry';\nimport { Range } from '@vertexvis/utils';\n\nexport function constrainRelativePoint(\n pt: Point.Point,\n range: Range.Range\n): Point.Point {\n const constrainedX = Math.max(range.start, Math.min(range.end, pt.x));\n const constrainedY = Math.max(range.start, Math.min(range.end, pt.y));\n\n return Point.create(constrainedX, constrainedY);\n}\n\n/**\n * Translates a point in relative units to a point in screen units.\n */\nexport function translatePointToScreen(\n pt: Point.Point,\n canvasDimensions: Dimensions.Dimensions\n): Point.Point {\n return Point.add(\n Point.scale(pt, canvasDimensions.width, canvasDimensions.height),\n Dimensions.center(canvasDimensions)\n );\n}\n\n/**\n * Translates a point in screen units to a point in relative units.\n */\nexport function translatePointToRelative(\n pt: Point.Point,\n canvasDimensions: Dimensions.Dimensions,\n includeOffset?: boolean,\n xOffset?: number,\n yOffset?: number\n): Point.Point {\n const verticalScaleFactor = 1 / canvasDimensions.height;\n const horizontalScaleFactor = 1 / canvasDimensions.width;\n const canvasCenterPoint = Dimensions.center(canvasDimensions);\n\n const point = Point.scale(\n Point.subtract(pt, canvasCenterPoint),\n horizontalScaleFactor,\n verticalScaleFactor\n );\n\n if (includeOffset) {\n const offset = Point.scale(\n Point.create(xOffset, yOffset),\n horizontalScaleFactor,\n verticalScaleFactor\n );\n\n // We want to place the label towards the center of the screen.\n // The given point corresponds to the upper left corner of the label, so increase the offset\n // when placing it to the left or above to ensure that part of the label line is visible\n const centerIsToTheRightInXDirection = canvasCenterPoint.x > pt.x;\n const xOffsetCalculated = centerIsToTheRightInXDirection\n ? offset.x\n : -3 * offset.x;\n\n const centerIsBelowInYDirection = canvasCenterPoint.y > pt.y;\n const yOffsetCalculated = centerIsBelowInYDirection\n ? offset.y\n : -3 * offset.y;\n\n const offsetPoint = Point.add(\n point,\n Point.create(xOffsetCalculated, yOffsetCalculated)\n );\n\n return constrainRelativePoint(offsetPoint, Range.create(-0.5, 0.5));\n } else {\n return constrainRelativePoint(point, Range.create(-0.5, 0.5));\n }\n}\n","export function getComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n return window.getComputedStyle(el);\n}\n",":host {\n /**\n * @prop --viewer-annotations-pin-label-background-color: A CSS color that\n * specifies the color of the label background\n */\n --viewer-annotations-pin-label-background-color: var(--viewer-annotations-pin-accent-color);\n\n /**\n * @prop --viewer-annotations-pin-label-border-color: A CSS color that\n * specifies the color of the label's border\n */\n --viewer-annotations-pin-label-border-color: var(--viewer-annotations-pin-primary-color);\n\n /**\n * @prop --viewer-annotations-pin-label-focused-border-color: A CSS color that\n * specifies the color of the label's border when focused. \n */\n --viewer-annotations-pin-label-focused-border-color: var(--viewer-annotations-pin-primary-color);\n\n /**\n * @prop --viewer-annotations-pin-label-color: A CSS color that\n * specifies the color of the label \n */\n --viewer-annotations-pin-label-color: var(--white);\n\n /**\n * @prop --viewer-annotations-pin-label-padding-y: A var that\n * specifies the vertical padding of the label\n */\n --viewer-annotations-pin-label-padding-y: 0.375em;\n\n /**\n * @prop --viewer-annotations-pin-label-padding-x: A var that\n * specifies the horizontal padding of the label\n */\n --viewer-annotations-pin-label-padding-x: 0.5em;\n\n /**\n * @prop --viewer-annotations-pin-label-border-width: A CSS length that\n * specifies the width of the border on this label. Defaults to `2px`.\n */\n --viewer-annotations-pin-label-border-width: 2px;\n\n /**\n * @prop --viewer-annotations-pin-label-border-style: A CSS variable that\n * specifies the style of border on this label. Defaults to `solid`.\n */\n --viewer-annotations-pin-label-border-style: solid;\n\n /**\n * @prop --viewer-annotations-pin-label-border-radius: A var that\n * specifies the border radius of the label\n */\n --viewer-annotations-pin-label-border-radius: 0.25em;\n\n /**\n * @prop --viewer-annotations-pin-label-min-width: A CSS length that\n * specifies the minimum width of the label. Defaults to `2rem`.\n */\n --viewer-annotations-pin-label-min-width: 2rem;\n\n /**\n * @prop --viewer-annotations-pin-label-max-width: A CSS length that\n * specifies the maximum width of the label. Defaults to `25rem`.\n */\n --viewer-annotations-pin-label-max-width: 25rem;\n\n /**\n * @prop --viewer-annotations-pin-label-max-height: A CSS length that\n * specifies the maximum height of the label. Defaults to `50rem`.\n */\n --viewer-annotations-pin-label-max-height: 50rem;\n\n overflow: hidden;\n pointer-events: none;\n}\n\n:host([mode='']) .pin-label {\n color: var(--viewer-annotations-pin-label-color);\n background: var(--viewer-annotations-pin-label-background-color);\n}\n\n.pin-label-text {\n font-family: Arial, Helvetica, sans-serif;\n font-size: 0.875rem;\n line-height: 1rem;\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.pin-label-input-wrapper {\n display: flex;\n position: absolute;\n pointer-events: auto;\n box-sizing: border-box;\n min-width: var(--viewer-annotations-pin-label-min-width);\n max-width: var(--viewer-annotations-pin-label-max-width);\n max-height: var(--viewer-annotations-pin-label-max-height);\n background: var(--viewer-annotations-pin-label-background-color);\n border-width: var(--viewer-annotations-pin-label-border-width);\n border-style: var(--viewer-annotations-pin-label-border-style);\n border-color: var(--viewer-annotations-pin-label-border-color);\n border-radius: var(--viewer-annotations-pin-label-border-radius);\n}\n\n.pin-label-input-wrapper.focused {\n min-width: var(--viewer-annotations-pin-label-max-width);\n border-color: var(--viewer-annotations-pin-label-focused-border-color);\n}\n\n.pin-input-drag-target {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n\n.pin-label-input {\n resize: none;\n position: relative;\n outline: none;\n border: none;\n word-break: break-word;\n padding: 0 0 0 0;\n background-color: transparent;\n margin: var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);\n width: var(--viewer-annotations-pin-label-min-width);\n flex-grow: 1;\n overflow: hidden;\n max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n\n.pin-label-input.readonly {\n pointer-events: auto;\n color: black;\n cursor: pointer;\n}\n\n.pin-label-hidden {\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n width: auto;\n height: auto;\n box-sizing: border-box;\n border-width: var(--viewer-annotations-pin-label-border-width);\n border-style: var(--viewer-annotations-pin-label-border-style);\n border-color: var(--viewer-annotations-pin-label-border-color);\n margin: var(--viewer-annotations-pin-label-padding-y) 0;\n padding: 0 var(--viewer-annotations-pin-label-padding-x);\n max-width: calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n h,\n Host,\n JSX,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\nimport classNames from 'classnames';\n\nimport { getMouseClientPosition } from '../../lib/dom';\nimport { PinController } from '../../lib/pins/controller';\nimport {\n getPinColors,\n isTextPin,\n PinModel,\n TextPin,\n} from '../../lib/pins/model';\nimport { readDOM } from '../../lib/stencil';\nimport {\n translatePointToRelative,\n translatePointToScreen,\n} from '../viewer-pin-tool/utils';\nimport { getComputedStyle } from './utils';\n\n@Component({\n tag: 'vertex-viewer-pin-label',\n styleUrl: 'viewer-pin-label.css',\n shadow: false,\n})\nexport class VertexPinLabel {\n /**\n * The pin to draw for the group\n */\n @Prop()\n public pin?: TextPin;\n\n /**\n * The dimensions of the canvas for the pins\n */\n @Prop()\n public elementBounds?: DOMRect;\n\n /**\n * The current text value of the component. Value is updated on user\n * interaction.\n */\n @Prop({ mutable: true })\n public value = '';\n\n /**\n * The controller that drives behavior for pin operations\n */\n @Prop()\n public pinController?: PinController;\n\n /**\n * @internal\n */\n @Event({ bubbles: true })\n public labelChanged!: EventEmitter<void>;\n\n /**\n * Emitted whenever the label is focused, with the ID of the\n * associated pin (or undefined if no pin is provided).\n */\n @Event({ bubbles: true })\n public labelFocused!: EventEmitter<string | undefined>;\n\n /**\n * Emitted whenever the label is blurred, with the ID of the\n * associated pin (or undefined if no pin is provided).\n */\n @Event({ bubbles: true })\n public labelBlurred!: EventEmitter<string | undefined>;\n\n @Element()\n private hostEl!: HTMLElement;\n\n @State()\n private focused = false;\n\n @State()\n private computedScreenPosition?: Point.Point;\n\n @State()\n private textareaRows = 1;\n\n @State()\n private contentElBounds?: DOMRect;\n\n private relativePointerDownPosition?: Point.Point;\n private pinPointerDownPosition?: Point.Point;\n\n private inputEl?: HTMLTextAreaElement;\n private contentEl?: HTMLDivElement;\n\n private resizeObserver?: ResizeObserver;\n private contentResizeObserver?: ResizeObserver;\n\n /**\n * Gives focus to the component's internal text input.\n */\n @Method()\n public async setFocus(): Promise<void> {\n // HTMLInputElement.focus() doesn't exist in tests.\n if (typeof this.inputEl?.focus === 'function') {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n this.inputEl?.focus();\n }\n }\n\n /**\n * @internal\n * submits the current text, unfocuses the input and emits the blur event to consumers\n */\n @Method()\n public async submit(): Promise<void> {\n this.focused = false;\n this.labelBlurred.emit(this.pin?.id);\n if (this.pin != null) {\n this.pinController?.updatePin({\n ...this.pin,\n label: {\n point: this.pin.label.point,\n text: this.value,\n },\n });\n }\n }\n\n @Watch('focused')\n protected watchFocusChange(): void {\n this.labelChanged.emit();\n\n if (this.focused) {\n this.pinController?.setSelectedPinId(this.pin?.id);\n }\n }\n\n @Watch('pin')\n protected watchPinChange(): void {\n this.value = this.pin?.label.text ?? '';\n this.computeScreenPosition();\n }\n\n @Watch('elementBounds')\n protected watchElementBoundsChange(): void {\n this.computeScreenPosition();\n }\n\n protected componentWillLoad(): void {\n this.value = this.pin?.label.text ?? '';\n this.computeScreenPosition();\n }\n\n protected componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n this.labelChanged.emit();\n });\n\n this.contentResizeObserver = new ResizeObserver(this.computeContentSize);\n\n if (this.hostEl != null) {\n this.resizeObserver.observe(this.hostEl);\n }\n\n if (this.contentEl != null) {\n this.contentResizeObserver.observe(this.contentEl);\n }\n\n if (this.pinController == null) {\n this.pinController = new PinController(new PinModel());\n }\n }\n\n protected disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.contentResizeObserver?.disconnect();\n }\n\n protected componentDidRender(): void {\n if (this.focused && this.inputEl != null) {\n this.setFocus();\n }\n }\n\n protected render(): JSX.Element {\n const { primaryColor, accentColor } = getPinColors(this.pin);\n return (\n <Host>\n <div\n class={classNames('pin-label-input-wrapper', {\n focused: this.focused,\n })}\n onPointerDown={this.handlePointerDown}\n style={{\n top: `${this.computedScreenPosition?.y.toString() || 0}px`,\n left: `${this.computedScreenPosition?.x.toString() || 0}px`,\n minWidth: this.computeMinWidth(),\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n borderColor: primaryColor,\n background: accentColor,\n }}\n >\n <textarea\n id={`pin-label-input-${this.pin?.id}`}\n class={classNames('pin-label-input', 'pin-label-text', {\n ['readonly']: !this.focused,\n })}\n disabled={!this.focused}\n ref={(ref) => (this.inputEl = ref)}\n value={this.value}\n rows={this.textareaRows}\n onKeyDown={this.handleInputKeyDown}\n onInput={this.handleTextInput}\n onBlur={this.handleTextBlur}\n />\n {/* This corrects for a behavior in Firefox where setting the `disabled` attribute to true */}\n {/* prevents any events from propagating. */}\n {!this.focused && (\n <div\n class=\"pin-input-drag-target\"\n onPointerDown={this.handlePointerDown}\n />\n )}\n </div>\n <div\n ref={(el) => (this.contentEl = el)}\n class={classNames('pin-label-text', 'pin-label-hidden')}\n style={{\n maxWidth: this.computeMaxWidth(),\n maxHeight: this.computeMaxHeight(),\n }}\n >\n {this.hiddenContent()}\n </div>\n </Host>\n );\n }\n\n private hiddenContent(): Array<string | HTMLBRElement> {\n // This corrects some inconsistencies in how a newline character\n // is represented in a div. Leveraging `<br>`s results in a more\n // consistent representation of the newlines in a textarea.\n return this.value.includes('\\n')\n ? this.value\n .split('\\n')\n .reduce(\n (res, str) => [...res, str, <br />],\n [] as Array<string | HTMLBRElement>\n )\n : [this.value];\n }\n\n private computeMinWidth(): string {\n if (this.contentElBounds != null) {\n const expected = `${this.contentElBounds.width + 8}px`;\n\n return `min(${expected}, ${this.computeMaxWidth()})`;\n } else {\n return `var(--viewer-annotations-pin-label-min-width)`;\n }\n }\n\n private computeMaxWidth(): string {\n const expected = `var(--viewer-annotations-pin-label-max-width)`;\n\n return `min(${expected}, ${this.computeRemainingWidth()})`;\n }\n\n private computeMaxHeight(): string {\n const expected = `var(--viewer-annotations-pin-label-max-height)`;\n\n return `min(${expected}, ${this.computeRemainingHeight()})`;\n }\n\n private computeRemainingWidth(): string {\n return `calc(${this.elementBounds?.width.toString() || 0}px - ${\n this.computedScreenPosition?.x.toString() || 0\n }px)`;\n }\n\n private computeRemainingHeight(): string {\n return `calc(${this.elementBounds?.height.toString() || 0}px - ${\n this.computedScreenPosition?.y.toString() || 0\n }px)`;\n }\n\n private computeScreenPosition(): void {\n this.computedScreenPosition =\n isTextPin(this.pin) &&\n this.elementBounds != null &&\n this.pin.label.point != null\n ? translatePointToScreen(this.pin.label.point, this.elementBounds)\n : undefined;\n }\n\n private computeContentSize = (): void => {\n readDOM(() => {\n if (this.contentEl != null) {\n this.contentElBounds = this.contentEl.getBoundingClientRect();\n const computedStyles = getComputedStyle(this.contentEl);\n this.textareaRows = Math.max(\n 1,\n Math.ceil(\n (parseFloat(computedStyles.getPropertyValue('height')) -\n parseFloat(computedStyles.getPropertyValue('borderWidth')) * 2) /\n parseFloat(computedStyles.getPropertyValue('lineHeight'))\n )\n );\n }\n });\n };\n\n private handleInputKeyDown = (event: KeyboardEvent): void => {\n event.stopPropagation();\n if (\n event.key === 'Enter' &&\n (event.ctrlKey || event.metaKey || event.shiftKey)\n ) {\n this.textareaRows += 1;\n this.value += '\\n';\n } else if (event.key === 'Enter') {\n event.preventDefault();\n this.submit();\n }\n };\n\n private handlePointerDown = (event: PointerEvent): void => {\n if (!this.focused) {\n if (this.elementBounds != null) {\n if (event.buttons !== 2) {\n event.preventDefault();\n event.stopPropagation();\n }\n this.relativePointerDownPosition = translatePointToRelative(\n getMouseClientPosition(event, this.elementBounds),\n this.elementBounds\n );\n this.pinPointerDownPosition = this.pin?.label.point;\n\n window.addEventListener('pointermove', this.handlePointerMove);\n window.addEventListener('pointerup', this.handlePointerUp);\n }\n }\n };\n\n private handlePointerMove = (event: PointerEvent): void => {\n if (\n this.elementBounds != null &&\n this.relativePointerDownPosition &&\n this.pinPointerDownPosition != null\n ) {\n // Prevent selection of any text while interacting with the label\n event.preventDefault();\n event.stopPropagation();\n\n const point = getMouseClientPosition(event, this.elementBounds);\n const relative = translatePointToRelative(point, this.elementBounds);\n\n const relativeDelta = Point.subtract(\n relative,\n this.relativePointerDownPosition\n );\n\n const myUpdatedPin =\n this.pin != null\n ? {\n ...this.pin,\n label: {\n ...this.pin.label,\n point: Point.add(this.pinPointerDownPosition, relativeDelta),\n },\n }\n : undefined;\n\n if (myUpdatedPin) {\n this.pinController?.updatePin(myUpdatedPin);\n this.computeScreenPosition();\n }\n }\n };\n\n private handlePointerUp = (event: PointerEvent): void => {\n if (\n this.pinController?.getToolMode() === 'edit' &&\n this.relativePointerDownPosition != null &&\n this.elementBounds != null\n ) {\n const pointerDownScreen = translatePointToScreen(\n this.relativePointerDownPosition,\n this.elementBounds\n );\n const distanceBetweenStartAndEndPoint = Point.distance(\n pointerDownScreen,\n getMouseClientPosition(event, this.elementBounds)\n );\n\n if (distanceBetweenStartAndEndPoint <= 2) {\n this.focused = true;\n this.labelFocused.emit(this.pin?.id);\n }\n }\n\n this.relativePointerDownPosition = undefined;\n this.pinPointerDownPosition = undefined;\n\n window.removeEventListener('pointermove', this.handlePointerMove);\n window.removeEventListener('pointerup', this.handlePointerUp);\n };\n\n private handleTextBlur = (): void => {\n this.submit();\n };\n\n private handleTextInput = (event: Event): void => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/vertex-viewer-pin-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-BlJx96mR.js";const t=o;const m=s;export{t as VertexViewerPinGroup,m as defineCustomElement};
+import{V as o,d as s}from"./p-Du8OS-pg.js";const p=o;const t=s;export{p as VertexViewerPinGroup,t as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-pin-group.js.map

package/dist/components/vertex-viewer-pin-label.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
  */
-import{V as o,d as s}from"./p-BfvfuUhv.js";const t=o;const f=s;export{t as VertexViewerPinLabel,f as defineCustomElement};
+import{V as o,d as s}from"./p-Kq-xexYy.js";const t=o;const p=s;export{t as VertexViewerPinLabel,p as defineCustomElement};
 //# sourceMappingURL=vertex-viewer-pin-label.js.map