@vertexvis/viewer 0.21.0-testing.1 → 0.21.0-testing.2

package/dist/components/vertex-viewer-transform-widget.js

@@ -154,7 +154,7 @@ const TransformWidgetInput = ({ ref, bounds, viewport, point, placement, distanc
   const units = new DistanceUnits(distanceUnit);
   const definedValue = (_a = distance !== null && distance !== void 0 ? distance : angle) !== null && _a !== void 0 ? _a : 0;
   const displayValue = `${parseFloat(definedValue.toFixed(decimalPlaces))} ${distance != null ? units.unit.abbreviatedName : angles.unit.abbreviatedName}`;
-  const inputPlacement = computeInputPlacement(viewport, bounds !== null && bounds !== void 0 ? bounds : dimensions.create(0, 0), point, placement);
+  const inputPlacement = constrainInputToViewport(viewport, bounds !== null && bounds !== void 0 ? bounds : dimensions.create(0, 0), point, placement);
   const handleChange = (event) => {
     if (event.target != null) {
       const parsed = parseFloat(event.target.value);
@@ -177,32 +177,34 @@ const TransformWidgetInput = ({ ref, bounds, viewport, point, placement, distanc
 function constrainTo(dimension, length) {
   return Math.min(dimension, Math.max(0, length));
 }
-function computeInputPlacement(viewport, inputDimensions, point, placement) {
+function constrainInputToViewport(viewport, inputDimensions, point, placement, padding = 5) {
   const { width, height } = viewport.dimensions;
+  const paddedWidth = inputDimensions.width + padding;
+  const paddedHeight = inputDimensions.height + padding;
   function toCssLength(length) {
     return `${length}px`;
   }
   switch (placement) {
     case 'top-left':
       return {
-        right: toCssLength(constrainTo(width - inputDimensions.width, width - point.x)),
-        bottom: toCssLength(constrainTo(height - inputDimensions.height, height - point.y)),
+        right: toCssLength(constrainTo(width - paddedWidth, width - point.x)),
+        bottom: toCssLength(constrainTo(height - paddedHeight, height - point.y)),
       };
     case 'top-right':
       return {
-        left: toCssLength(constrainTo(width - inputDimensions.width, point.x)),
-        bottom: toCssLength(constrainTo(height - inputDimensions.height, height - point.y)),
+        left: toCssLength(constrainTo(width - paddedWidth, point.x)),
+        bottom: toCssLength(constrainTo(height - paddedHeight, height - point.y)),
       };
     case 'bottom-left':
       return {
-        right: toCssLength(constrainTo(width - inputDimensions.width, width - point.x)),
-        top: toCssLength(constrainTo(height - inputDimensions.height, point.y)),
+        right: toCssLength(constrainTo(width - paddedWidth, width - point.x)),
+        top: toCssLength(constrainTo(height - paddedHeight, point.y)),
       };
     case 'bottom-right':
     default:
       return {
-        left: toCssLength(constrainTo(width - inputDimensions.width, point.x)),
-        top: toCssLength(constrainTo(height - inputDimensions.height, point.y)),
+        left: toCssLength(constrainTo(width - paddedWidth, point.x)),
+        top: toCssLength(constrainTo(height - paddedHeight, point.y)),
       };
   }
 }
@@ -543,7 +545,7 @@ class TransformWidget extends ReglComponent {
   }
 }
 
-const viewerTransformWidgetCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-transform-widget-x-axis-arrow-color:var(--x-axis-color);--viewer-transform-widget-y-axis-arrow-color:var(--y-axis-color);--viewer-transform-widget-z-axis-arrow-color:var(--z-axis-color);--viewer-transform-widget-hovered-arrow-color:#ffff00;--viewer-transform-widget-input-width:7em}.widget{position:absolute;top:0;left:0}.widget.hovered{pointer-events:auto}.widget-input.wrapper{position:absolute;box-sizing:border-box;pointer-events:auto;display:flex;border:1px solid #cccccc;width:var(--viewer-transform-widget-input-width)}input.widget-input{text-align:center;border:none;width:100%}.widget-input.left-step,.widget-input.right-step{display:flex;align-items:center;padding:0;background-color:white;border:none}";
+const viewerTransformWidgetCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;--viewer-transform-widget-x-axis-arrow-color:var(--x-axis-color);--viewer-transform-widget-y-axis-arrow-color:var(--y-axis-color);--viewer-transform-widget-z-axis-arrow-color:var(--z-axis-color);--viewer-transform-widget-hovered-arrow-color:#ffff00;--viewer-transform-widget-input-width:7em}.widget{position:absolute;top:0;left:0}.widget.hovered{pointer-events:auto}.widget-input.wrapper{position:absolute;pointer-events:auto;display:flex;border:1px solid #cccccc;width:var(--viewer-transform-widget-input-width)}input.widget-input{box-sizing:border-box;text-align:center;border:none;width:100%;outline:none}input.widget-input:focus{outline:none}";
 
 const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -578,6 +580,11 @@ const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTM
      * Determines whether or not the z-translation is disabled on the widget
      */
     this.zTranslationDisabled = false;
+    /**
+     * Whether to show inputs beside the widget handles when they are interacted with.
+     * Defaults to `true`.
+     */
+    this.showInputs = true;
     /**
      * The unit to show for translation inputs. Defaults to `millimeters`.
      *
@@ -852,14 +859,17 @@ const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTM
     };
     this.updateInputPosition = () => {
       var _a, _b;
-      const widget = this.getTransformWidget();
-      const widgetBounds = widget.getFullBounds();
       const dragging = (_a = this.dragging) !== null && _a !== void 0 ? _a : this.lastDragged;
-      if (((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.frame) != null &&
+      if (this.showInputs &&
+        ((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.frame) != null &&
         this.position != null &&
-        dragging != null &&
-        widgetBounds != null) {
-        this.inputPosition = computeInputPosition(this.viewer.viewport, widgetBounds, dragging.points.toArray());
+        dragging != null) {
+        const widget = this.getTransformWidget();
+        const widgetBounds = widget.getFullBounds();
+        this.inputPosition =
+          widgetBounds != null
+            ? computeInputPosition(this.viewer.viewport, widgetBounds, dragging.points.toArray())
+            : undefined;
       }
     };
     this.getDisplayedAngle = () => {
@@ -931,7 +941,6 @@ const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTM
     });
     this.handleViewerChanged(this.viewer, undefined);
     this.handleStyleChange();
-    this.handleInputResize();
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -1012,9 +1021,7 @@ const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTM
         this.canvasRef = el;
       }, class: classnames('widget', {
         hovered: this.hovered != null,
-      }), width: (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.viewport.width, height: (_b = this.viewer) === null || _b === void 0 ? void 0 : _b.viewport.height, onPointerDown: this.handleBeginDrag }), this.inputPosition &&
-      this.inputValue != null &&
-      ((_c = this.viewer) === null || _c === void 0 ? void 0 : _c.viewport) && (h(TransformWidgetInput, { ref: (el) => {
+      }), width: (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.viewport.width, height: (_b = this.viewer) === null || _b === void 0 ? void 0 : _b.viewport.height, onPointerDown: this.handleBeginDrag }), this.showInputs && this.inputPosition && ((_c = this.viewer) === null || _c === void 0 ? void 0 : _c.viewport) && (h(TransformWidgetInput, { ref: (el) => {
         var _a, _b;
         if (el != null) {
           (_a = this.inputResizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
@@ -1053,12 +1060,6 @@ const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTM
       console.warn('Cannot set disabled values - no widget defined');
     }
   }
-  get currentRotation() {
-    if (this.currentTransform != null) {
-      return matrix4.makeRotation(quaternion.fromMatrixRotation(this.currentTransform));
-    }
-    return matrix4.makeIdentity();
-  }
   get hostEl() { return this; }
   static get watchers() { return {
     "viewer": ["handleViewerChanged"],
@@ -1083,6 +1084,7 @@ const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "xTranslationDisabled": [1028, "x-translation-disabled"],
     "yTranslationDisabled": [1028, "y-translation-disabled"],
     "zTranslationDisabled": [1028, "z-translation-disabled"],
+    "showInputs": [4, "show-inputs"],
     "distanceUnit": [1, "distance-unit"],
     "angleUnit": [1, "angle-unit"],
     "decimalPlaces": [2, "decimal-places"],