@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

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

@@ -0,0 +1,838 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as point, v as vector3, r as ray, f as plane, q as quaternion, m as matrix4, c as angle, b as boundingBox, e as rectangle } from './bundle.esm.js';
+import { c as classnames } from './index2.js';
+import { w as writeDOM, r as readDOM } from './stencil.js';
+import { T as TransformController } from './controller2.js';
+import { E as EventDispatcher } from './browser.esm.js';
+import { d as TriangleMeshPoints, T as TriangleMesh, R as ReglComponent, e as computeDrawable2dBounds, r as regl, s as shapeBuilder, x as xAxisArrowPositions, A as AxisLine, b as axisPositions, y as yAxisArrowPositions, z as zAxisArrowPositions, f as rotationAxisPositions, g as RotationLine } from './regl-component.js';
+
+function convertPointToCanvas(point$1, bounds) {
+  return bounds != null
+    ? point.create(point$1.x - bounds.left, point$1.y - bounds.top)
+    : undefined;
+}
+function convertCanvasPointToWorld(point, frame, viewport, transform) {
+  const position = transform != null ? vector3.fromMatrixPosition(transform) : undefined;
+  if (point != null && frame != null && viewport != null && position != null) {
+    if (frame.scene.camera.isOrthographic()) {
+      const ray$1 = viewport.transformPointToOrthographicRay(point, frame.image, frame.scene.camera);
+      // Offset the point to past the bounding sphere of the model to
+      // adjust the position plane location.
+      const offsetPoint = ray.at(ray.create({
+        origin: position,
+        direction: frame.scene.camera.direction,
+      }), vector3.magnitude(frame.scene.camera.viewVector) * 2);
+      return ray.intersectPlane(ray$1, plane.fromNormalAndCoplanarPoint(frame.scene.camera.direction, offsetPoint));
+    }
+    else {
+      const ray$1 = viewport.transformPointToRay(point, frame.image, frame.scene.camera);
+      return ray.intersectPlane(ray$1, plane.fromNormalAndCoplanarPoint(frame.scene.camera.direction, position));
+    }
+  }
+  return undefined;
+}
+function computeUpdatedTransform(current, previous, next, viewVector, angle, identifier) {
+  switch (identifier) {
+    case 'x-translate': {
+      return matrix4.multiply(current, matrix4.makeTranslation(vector3.create(computeTranslation(current, previous, next, vector3.right()), 0, 0)));
+    }
+    case 'y-translate':
+      return matrix4.multiply(current, matrix4.makeTranslation(vector3.create(0, computeTranslation(current, previous, next, vector3.up()), 0)));
+    case 'z-translate':
+      return matrix4.multiply(current, matrix4.makeTranslation(vector3.create(0, 0, computeTranslation(current, previous, next, vector3.back()))));
+    case 'x-rotate': {
+      const rotation = quaternion.fromMatrixRotation(current);
+      const rotatedRight = vector3.transformMatrix(vector3.right(), matrix4.makeRotation(rotation));
+      const rotatedLeft = vector3.transformMatrix(vector3.left(), matrix4.makeRotation(rotation));
+      const rotationAxis = vector3.dot(viewVector, rotatedRight) >
+        vector3.dot(viewVector, rotatedLeft)
+        ? rotatedRight
+        : rotatedLeft;
+      return computeRotation(quaternion.fromAxisAngle(rotationAxis, angle), current);
+    }
+    case 'y-rotate': {
+      const rotation = quaternion.fromMatrixRotation(current);
+      const rotatedUp = vector3.transformMatrix(vector3.up(), matrix4.makeRotation(rotation));
+      const rotatedDown = vector3.transformMatrix(vector3.down(), matrix4.makeRotation(rotation));
+      const rotationAxis = vector3.dot(viewVector, rotatedUp) >
+        vector3.dot(viewVector, rotatedDown)
+        ? rotatedUp
+        : rotatedDown;
+      return computeRotation(quaternion.fromAxisAngle(rotationAxis, angle), current);
+    }
+    case 'z-rotate': {
+      const rotation = quaternion.fromMatrixRotation(current);
+      const rotatedForward = vector3.transformMatrix(vector3.forward(), matrix4.makeRotation(rotation));
+      const rotatedBack = vector3.transformMatrix(vector3.back(), matrix4.makeRotation(rotation));
+      const rotationAxis = vector3.dot(viewVector, rotatedForward) >
+        vector3.dot(viewVector, rotatedBack)
+        ? rotatedForward
+        : rotatedBack;
+      return computeRotation(quaternion.fromAxisAngle(rotationAxis, angle), current);
+    }
+    default:
+      return current;
+  }
+}
+function computeTranslation(current, previous, next, direction) {
+  const rotatedTranslationAxis = vector3.transformMatrix(direction, matrix4.makeRotation(quaternion.fromMatrixRotation(current)));
+  const rotatedDelta = vector3.multiply(rotatedTranslationAxis, vector3.subtract(next, previous));
+  return rotatedDelta.x + rotatedDelta.y + rotatedDelta.z;
+}
+/**
+ * Computes a rotation Matrix4 by applying the rotation at the given position,
+ * then translating it back to convert it to a world delta.
+ * @param rotation
+ * @param current
+ * @returns
+ */
+function computeRotation(rotation, current) {
+  return matrix4.multiply(matrix4.multiply(matrix4.multiply(matrix4.makeTranslation(vector3.fromMatrixPosition(current)), matrix4.makeRotation(rotation)), matrix4.makeTranslation(vector3.negate(vector3.fromMatrixPosition(current)))), current);
+}
+
+function xAxisRotationPositions(widgetTransform, camera, triangleSize = 3) {
+  return computeRotationNdcValues(widgetTransform, camera, vector3.back(), vector3.up(), triangleSize);
+}
+function yAxisRotationPositions(widgetTransform, camera, triangleSize = 3) {
+  return computeRotationNdcValues(widgetTransform, camera, vector3.right(), vector3.back(), triangleSize);
+}
+function zAxisRotationPositions(widgetTransform, camera, triangleSize = 3) {
+  return computeRotationNdcValues(widgetTransform, camera, vector3.right(), vector3.up(), triangleSize);
+}
+function computeRotationNdcValues(widgetTransform, camera, xDirection, yDirection, triangleSize) {
+  const transformedDirection = vector3.transformMatrix(vector3.add(xDirection, yDirection), matrix4.makeRotation(quaternion.fromMatrixRotation(widgetTransform)));
+  const transformedX = vector3.transformMatrix(xDirection, matrix4.makeRotation(quaternion.fromMatrixRotation(widgetTransform)));
+  const transformedY = vector3.transformMatrix(yDirection, matrix4.makeRotation(quaternion.fromMatrixRotation(widgetTransform)));
+  const basePosition = vector3.fromMatrixPosition(widgetTransform);
+  const position = vector3.add(basePosition, vector3.scale(triangleSize * 10, transformedDirection));
+  const xRay = ray.create({
+    origin: position,
+    direction: transformedX,
+  });
+  const yRay = ray.create({
+    origin: position,
+    direction: transformedY,
+  });
+  const rotationAxis = vector3.cross(transformedX, transformedY);
+  const base = vector3.rotateAboutAxis(angle.toRadians(45), ray.at(yRay, -triangleSize), rotationAxis, position);
+  const right = vector3.rotateAboutAxis(angle.toRadians(45), ray.at(xRay, triangleSize), rotationAxis, position);
+  const up = vector3.rotateAboutAxis(angle.toRadians(45), ray.at(yRay, triangleSize), rotationAxis, position);
+  const left = vector3.rotateAboutAxis(angle.toRadians(45), ray.at(xRay, -triangleSize), rotationAxis, position);
+  return new TriangleMeshPoints(vector3.dot(transformedX, camera.direction) !== -1 &&
+    vector3.dot(transformedY, camera.direction) !== -1, base, left, right, up, vector3.transformMatrix(base, camera.projectionViewMatrix), vector3.transformMatrix(left, camera.projectionViewMatrix), vector3.transformMatrix(right, camera.projectionViewMatrix), vector3.transformMatrix(up, camera.projectionViewMatrix));
+}
+
+function testDrawable(drawable, frame, viewport, point) {
+  if (drawable instanceof TriangleMesh) {
+    return testTriangleMesh(drawable, frame, viewport, point);
+  }
+  return false;
+}
+function testTriangleMesh(mesh, frame, viewport, point) {
+  return (testTriangle([mesh.points.worldLeft, mesh.points.worldRight, mesh.points.worldTip], frame, viewport, point) ||
+    testTriangle([mesh.points.worldLeft, mesh.points.worldRight, mesh.points.worldBase], frame, viewport, point));
+}
+/**
+ * Adapted from https://en.wikipedia.org/wiki/M%C3%B6ller%E2%80%93Trumbore_intersection_algorithm.
+ */
+function testTriangle(points, frame, viewport, point) {
+  var _a;
+  if (points.length === 3) {
+    const ray = frame.scene.camera.isOrthographic()
+      ? viewport.transformPointToOrthographicRay(point, frame.image, frame.scene.camera)
+      : viewport.transformPointToRay(point, frame.image, frame.scene.camera);
+    const edge1 = vector3.subtract(points[1], points[0]);
+    const edge2 = vector3.subtract(points[2], points[0]);
+    const epsilon = boundingBox.epsilon((_a = boundingBox.fromVectors([ray.direction, ray.origin, edge1, edge2])) !== null && _a !== void 0 ? _a : boundingBox.create(edge1, edge2));
+    const p = vector3.cross(ray.direction, edge2);
+    const det = vector3.dot(edge1, p);
+    // This check causes a `det` of NaN or 0 to return false
+    // without needing to perform the subsequent calculations.
+    if (!(Math.abs(det) >= epsilon)) {
+      return false;
+    }
+    const t = vector3.subtract(ray.origin, points[0]);
+    const u = vector3.dot(t, p) / det;
+    if (u < 0 || u > 1) {
+      return false;
+    }
+    const q = vector3.cross(t, edge1);
+    const v = vector3.dot(ray.direction, q) / det;
+    if (v < 0 || u + v > 1) {
+      return false;
+    }
+    const r = vector3.dot(edge2, q) / det;
+    // Ignore the case where the computed hit position is negative
+    // if in orthographic to correctly return hit results when close
+    // to the camera.
+    // TODO: revisit with https://vertexvis.atlassian.net/browse/PLAT-1549
+    return !isNaN(r) && (r > 0 || frame.scene.camera.isOrthographic());
+  }
+  return false;
+}
+
+class TransformWidget extends ReglComponent {
+  constructor(canvasElement, colors = {}, initialDisabledAxes = {}) {
+    var _a, _b, _c, _d, _e, _f;
+    super(canvasElement);
+    this.disabledAxis = {
+      xTranslation: false,
+      yTranslation: false,
+      zTranslation: false,
+      xRotation: false,
+      yRotation: false,
+      zRotation: false,
+    };
+    this.axisLines = [];
+    this.rotationLines = [];
+    this.translationMeshes = [];
+    this.rotationMeshes = [];
+    this.hoveredChanged = new EventDispatcher();
+    this.xArrowFillColor = colors.xArrow;
+    this.yArrowFillColor = colors.yArrow;
+    this.zArrowFillColor = colors.zArrow;
+    this.hoveredArrowFillColor = colors.hovered;
+    this.outlineColor = colors.outline;
+    this.disabledAxis.xTranslation = (_a = initialDisabledAxes.xTranslation) !== null && _a !== void 0 ? _a : false;
+    this.disabledAxis.yTranslation = (_b = initialDisabledAxes.yTranslation) !== null && _b !== void 0 ? _b : false;
+    this.disabledAxis.zTranslation = (_c = initialDisabledAxes.zTranslation) !== null && _c !== void 0 ? _c : false;
+    this.disabledAxis.xRotation = (_d = initialDisabledAxes.xRotation) !== null && _d !== void 0 ? _d : false;
+    this.disabledAxis.yRotation = (_e = initialDisabledAxes.yRotation) !== null && _e !== void 0 ? _e : false;
+    this.disabledAxis.zRotation = (_f = initialDisabledAxes.zRotation) !== null && _f !== void 0 ? _f : false;
+  }
+  dispose() {
+    var _a;
+    (_a = this.reglFrameDisposable) === null || _a === void 0 ? void 0 : _a.cancel();
+  }
+  /**
+   * @internal - visible for testing
+   */
+  getDrawableElements() {
+    return this.drawableElements;
+  }
+  boundsContainsPoint(point) {
+    return (this.bounds != null &&
+      this.frame != null &&
+      rectangle.containsPoints(this.bounds, point));
+  }
+  updateDisabledAxis(axis) {
+    this.disabledAxis = Object.assign(Object.assign({}, this.disabledAxis), axis);
+    this.updateDisabledOnDrawables();
+  }
+  updateCursor(cursor) {
+    this.cursor = cursor;
+    if (cursor != null && this.frame != null) {
+      this.updateHovered();
+    }
+    else {
+      this.clearHovered();
+    }
+  }
+  updateTransform(transform) {
+    var _a;
+    this.transform = transform;
+    if (transform != null && this.frame != null) {
+      this.updateAndDraw();
+    }
+    else {
+      this.clear();
+      (_a = this.reglFrameDisposable) === null || _a === void 0 ? void 0 : _a.cancel();
+      this.reglFrameDisposable = undefined;
+    }
+  }
+  updateColors(colors = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    this.xArrowFillColor = (_a = colors.xArrow) !== null && _a !== void 0 ? _a : this.xArrowFillColor;
+    this.yArrowFillColor = (_b = colors.yArrow) !== null && _b !== void 0 ? _b : this.yArrowFillColor;
+    this.zArrowFillColor = (_c = colors.zArrow) !== null && _c !== void 0 ? _c : this.zArrowFillColor;
+    this.hoveredArrowFillColor = (_d = colors.hovered) !== null && _d !== void 0 ? _d : this.hoveredArrowFillColor;
+    this.outlineColor = (_e = colors.outline) !== null && _e !== void 0 ? _e : this.outlineColor;
+    (_f = this.xArrow) === null || _f === void 0 ? void 0 : _f.updateFillColor(this.getXTranslationColor());
+    (_g = this.yArrow) === null || _g === void 0 ? void 0 : _g.updateFillColor(this.getYTranslationColor());
+    (_h = this.zArrow) === null || _h === void 0 ? void 0 : _h.updateFillColor(this.getZTranslationColor());
+    (_j = this.xRotation) === null || _j === void 0 ? void 0 : _j.updateFillColor(this.getXRotationColor());
+    (_k = this.yRotation) === null || _k === void 0 ? void 0 : _k.updateFillColor(this.getYRotationColor());
+    (_l = this.zRotation) === null || _l === void 0 ? void 0 : _l.updateFillColor(this.getZRotationColor());
+    (_m = this.hoveredElement) === null || _m === void 0 ? void 0 : _m.updateFillColor(this.hoveredArrowFillColor);
+  }
+  onHoveredChanged(listener) {
+    return this.hoveredChanged.on(listener);
+  }
+  updateDisabledOnDrawables() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    (_a = this.xRotation) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabledAxis.xRotation);
+    (_b = this.xyRotationLine) === null || _b === void 0 ? void 0 : _b.setDisabled(this.disabledAxis.xRotation);
+    (_c = this.xzRotationLine) === null || _c === void 0 ? void 0 : _c.setDisabled(this.disabledAxis.xRotation);
+    (_d = this.yRotation) === null || _d === void 0 ? void 0 : _d.setDisabled(this.disabledAxis.yRotation);
+    (_e = this.yzRotationLine) === null || _e === void 0 ? void 0 : _e.setDisabled(this.disabledAxis.yRotation);
+    (_f = this.yxRotationLine) === null || _f === void 0 ? void 0 : _f.setDisabled(this.disabledAxis.yRotation);
+    (_g = this.zRotation) === null || _g === void 0 ? void 0 : _g.setDisabled(this.disabledAxis.zRotation);
+    (_h = this.zxRotationLine) === null || _h === void 0 ? void 0 : _h.setDisabled(this.disabledAxis.zRotation);
+    (_j = this.zyRotationLine) === null || _j === void 0 ? void 0 : _j.setDisabled(this.disabledAxis.zRotation);
+    (_k = this.xArrow) === null || _k === void 0 ? void 0 : _k.setDisabled(this.disabledAxis.xTranslation);
+    (_l = this.yArrow) === null || _l === void 0 ? void 0 : _l.setDisabled(this.disabledAxis.yTranslation);
+    (_m = this.zArrow) === null || _m === void 0 ? void 0 : _m.setDisabled(this.disabledAxis.zTranslation);
+    this.updateColors();
+  }
+  updateHovered() {
+    var _a;
+    const previousHovered = this.hoveredElement;
+    const currentFrame = this.frame;
+    if (currentFrame != null) {
+      this.hoveredElement = [...this.translationMeshes, ...this.rotationMeshes]
+        .filter((el) => el.points.valid && !el.isDisabled())
+        .find((m) => this.cursor != null
+        ? testDrawable(m, currentFrame, this.viewport, this.cursor)
+        : false);
+      if (this.hoveredElement !== previousHovered) {
+        this.hoveredChanged.emit(this.hoveredElement);
+        (_a = this.hoveredElement) === null || _a === void 0 ? void 0 : _a.updateFillColor(this.hoveredArrowFillColor);
+        previousHovered === null || previousHovered === void 0 ? void 0 : previousHovered.updateFillColor(previousHovered === null || previousHovered === void 0 ? void 0 : previousHovered.initialFillColor);
+      }
+    }
+  }
+  clearHovered() {
+    const previousHovered = this.hoveredElement;
+    this.hoveredElement = undefined;
+    if (this.hoveredElement !== previousHovered) {
+      this.hoveredChanged.emit(this.hoveredElement);
+      previousHovered.updateFillColor(previousHovered.initialFillColor);
+    }
+  }
+  hasData() {
+    return this.transform != null;
+  }
+  createOrUpdateElements() {
+    if (this.transform != null && this.frame != null) {
+      if (this.xArrow == null || this.yArrow == null || this.zArrow == null) {
+        this.createElements(this.transform, this.frame);
+      }
+      else {
+        this.updateElements(this.transform, this.frame);
+      }
+      this.bounds = computeDrawable2dBounds(this.viewport, ...this.rotationMeshes, ...this.translationMeshes);
+    }
+  }
+  createElements(transform, frame) {
+    this.reglCommand = regl({
+      canvas: this.canvasElement,
+      extensions: 'angle_instanced_arrays',
+    });
+    const { createShape } = shapeBuilder(this.reglCommand);
+    const triangleSize = this.computeTriangleSize(vector3.fromMatrixPosition(transform), frame);
+    this.xArrow = new TriangleMesh(createShape, 'x-translate', xAxisArrowPositions(transform, frame.scene.camera, triangleSize), this.outlineColor, this.getXTranslationColor());
+    this.xRotation = new TriangleMesh(createShape, 'x-rotate', xAxisRotationPositions(transform, frame.scene.camera, triangleSize), this.outlineColor, this.getXRotationColor());
+    this.xAxis = new AxisLine(createShape, 'x-axis', axisPositions(transform, frame.scene.camera, this.xArrow), this.outlineColor, this.getXTranslationColor());
+    this.yArrow = new TriangleMesh(createShape, 'y-translate', yAxisArrowPositions(transform, frame.scene.camera, triangleSize), this.outlineColor, this.getYTranslationColor());
+    this.yRotation = new TriangleMesh(createShape, 'y-rotate', yAxisRotationPositions(transform, frame.scene.camera, triangleSize), this.outlineColor, this.getYRotationColor());
+    this.yAxis = new AxisLine(createShape, 'y-axis', axisPositions(transform, frame.scene.camera, this.yArrow), this.outlineColor, this.getYTranslationColor());
+    this.zArrow = new TriangleMesh(createShape, 'z-translate', zAxisArrowPositions(transform, frame.scene.camera, triangleSize), this.outlineColor, this.getZTranslationColor());
+    this.zAxis = new AxisLine(createShape, 'z-axis', axisPositions(transform, frame.scene.camera, this.zArrow), this.outlineColor, this.getZTranslationColor());
+    this.zRotation = new TriangleMesh(createShape, 'z-rotate', zAxisRotationPositions(transform, frame.scene.camera, triangleSize), this.outlineColor, this.getZRotationColor());
+    this.createRotationLines(createShape, transform, frame);
+    this.axisLines = [this.xAxis, this.yAxis, this.zAxis];
+    this.translationMeshes = [this.xArrow, this.yArrow, this.zArrow];
+    this.rotationMeshes = [this.xRotation, this.yRotation, this.zRotation];
+    this.updateDisabledOnDrawables();
+    this.availableElements = [
+      ...this.axisLines,
+      ...this.rotationLines,
+      ...this.translationMeshes,
+      ...this.rotationMeshes,
+    ];
+  }
+  getXRotationColor() {
+    return this.xArrowFillColor;
+  }
+  getYRotationColor() {
+    return this.yArrowFillColor;
+  }
+  getZRotationColor() {
+    return this.zArrowFillColor;
+  }
+  getXTranslationColor() {
+    return this.xArrowFillColor;
+  }
+  getYTranslationColor() {
+    return this.yArrowFillColor;
+  }
+  getZTranslationColor() {
+    return this.zArrowFillColor;
+  }
+  createRotationLines(createShape, transform, frame) {
+    var _a, _b, _c, _d, _e, _f;
+    const triangleSize = this.computeTriangleSize(vector3.fromMatrixPosition(transform), frame);
+    const xyRotationLinePoints = rotationAxisPositions(frame.scene.camera, this.xRotation, (_a = this.yArrow) === null || _a === void 0 ? void 0 : _a.points.worldTip, triangleSize);
+    const xzRotationLinePoints = rotationAxisPositions(frame.scene.camera, this.xRotation, (_b = this.zArrow) === null || _b === void 0 ? void 0 : _b.points.worldTip, triangleSize);
+    const yxRotationLinePoints = rotationAxisPositions(frame.scene.camera, this.yRotation, (_c = this.xArrow) === null || _c === void 0 ? void 0 : _c.points.worldTip, triangleSize);
+    const yzRotationLinePoints = rotationAxisPositions(frame.scene.camera, this.yRotation, (_d = this.zArrow) === null || _d === void 0 ? void 0 : _d.points.worldTip, triangleSize);
+    const zxRotationLinePoints = rotationAxisPositions(frame.scene.camera, this.zRotation, (_e = this.xArrow) === null || _e === void 0 ? void 0 : _e.points.worldTip, triangleSize);
+    const zyRotationLinePoints = rotationAxisPositions(frame.scene.camera, this.zRotation, (_f = this.yArrow) === null || _f === void 0 ? void 0 : _f.points.worldTip, triangleSize);
+    if (xyRotationLinePoints != null) {
+      this.xyRotationLine = new RotationLine(createShape, 'xy-rotation-line', xyRotationLinePoints, this.outlineColor);
+    }
+    if (xzRotationLinePoints != null) {
+      this.xzRotationLine = new RotationLine(createShape, 'xz-rotation-line', xzRotationLinePoints, this.outlineColor);
+    }
+    if (yxRotationLinePoints != null) {
+      this.yxRotationLine = new RotationLine(createShape, 'yx-rotation-line', yxRotationLinePoints, this.outlineColor);
+    }
+    if (yzRotationLinePoints != null) {
+      this.yzRotationLine = new RotationLine(createShape, 'yz-rotation-line', yzRotationLinePoints, this.outlineColor);
+    }
+    if (zxRotationLinePoints != null) {
+      this.zxRotationLine = new RotationLine(createShape, 'zx-rotation-line', zxRotationLinePoints, this.outlineColor);
+    }
+    if (zyRotationLinePoints != null) {
+      this.zyRotationLine = new RotationLine(createShape, 'zy-rotation-line', zyRotationLinePoints, this.outlineColor);
+    }
+    this.rotationLines = [
+      this.xyRotationLine,
+      this.xzRotationLine,
+      this.yxRotationLine,
+      this.yzRotationLine,
+      this.zxRotationLine,
+      this.zyRotationLine,
+    ].filter((l) => l != null);
+  }
+  updateElements(transform, frame) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const triangleSize = this.computeTriangleSize(vector3.fromMatrixPosition(transform), frame);
+    if (this.xArrow != null) {
+      this.xArrow.updatePoints(xAxisArrowPositions(transform, frame.scene.camera, triangleSize));
+      (_a = this.xAxis) === null || _a === void 0 ? void 0 : _a.updatePoints(axisPositions(transform, frame.scene.camera, this.xArrow));
+    }
+    (_b = this.xRotation) === null || _b === void 0 ? void 0 : _b.updatePoints(xAxisRotationPositions(transform, frame.scene.camera, triangleSize));
+    if (this.yArrow != null) {
+      this.yArrow.updatePoints(yAxisArrowPositions(transform, frame.scene.camera, triangleSize));
+      (_c = this.yAxis) === null || _c === void 0 ? void 0 : _c.updatePoints(axisPositions(transform, frame.scene.camera, this.yArrow));
+    }
+    (_d = this.yRotation) === null || _d === void 0 ? void 0 : _d.updatePoints(yAxisRotationPositions(transform, frame.scene.camera, triangleSize));
+    if (this.zArrow != null) {
+      this.zArrow.updatePoints(zAxisArrowPositions(transform, frame.scene.camera, triangleSize));
+      (_e = this.zAxis) === null || _e === void 0 ? void 0 : _e.updatePoints(axisPositions(transform, frame.scene.camera, this.zArrow));
+    }
+    (_f = this.zRotation) === null || _f === void 0 ? void 0 : _f.updatePoints(zAxisRotationPositions(transform, frame.scene.camera, triangleSize));
+    (_g = this.xyRotationLine) === null || _g === void 0 ? void 0 : _g.updatePoints(rotationAxisPositions(frame.scene.camera, this.xRotation, (_h = this.yArrow) === null || _h === void 0 ? void 0 : _h.points.worldTip, triangleSize));
+    (_j = this.xzRotationLine) === null || _j === void 0 ? void 0 : _j.updatePoints(rotationAxisPositions(frame.scene.camera, this.xRotation, (_k = this.zArrow) === null || _k === void 0 ? void 0 : _k.points.worldTip, triangleSize));
+    (_l = this.yxRotationLine) === null || _l === void 0 ? void 0 : _l.updatePoints(rotationAxisPositions(frame.scene.camera, this.yRotation, (_m = this.xArrow) === null || _m === void 0 ? void 0 : _m.points.worldTip, triangleSize));
+    (_o = this.yzRotationLine) === null || _o === void 0 ? void 0 : _o.updatePoints(rotationAxisPositions(frame.scene.camera, this.yRotation, (_p = this.zArrow) === null || _p === void 0 ? void 0 : _p.points.worldTip, triangleSize));
+    (_q = this.zxRotationLine) === null || _q === void 0 ? void 0 : _q.updatePoints(rotationAxisPositions(frame.scene.camera, this.zRotation, (_r = this.xArrow) === null || _r === void 0 ? void 0 : _r.points.worldTip, triangleSize));
+    (_s = this.zyRotationLine) === null || _s === void 0 ? void 0 : _s.updatePoints(rotationAxisPositions(frame.scene.camera, this.zRotation, (_t = this.yArrow) === null || _t === void 0 ? void 0 : _t.points.worldTip, triangleSize));
+  }
+}
+
+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}.widget{position:absolute;top:0;left:0}.widget.hovered{pointer-events:auto}";
+
+const ViewerTransformWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.positionChanged = createEvent(this, "positionChanged", 7);
+    this.rotationChanged = createEvent(this, "rotationChanged", 7);
+    this.interactionEnded = createEvent(this, "interactionEnded", 7);
+    this.interactionStarted = createEvent(this, "interactionStarted", 7);
+    /**
+     * Determines whether or not the x-rotation is disabled on the widget
+     */
+    this.xRotationDisabled = false;
+    /**
+     * Determines whether or not the y-rotation is disabled on the widget
+     */
+    this.yRotationDisabled = false;
+    /**
+     * Determines whether or not the z-rotation is disabled on the widget
+     */
+    this.zRotationDisabled = false;
+    /**
+     * Determines whether or not the x-translation is disabled on the widget
+     */
+    this.xTranslationDisabled = false;
+    /**
+     * Determines whether or not the y-translation is disabled on the widget
+     */
+    this.yTranslationDisabled = false;
+    /**
+     * Determines whether or not the z-translation is disabled on the widget
+     */
+    this.zTranslationDisabled = false;
+    this.xArrowColor = '#ea3324';
+    this.yArrowColor = '#4faf32';
+    this.zArrowColor = '#0000ff';
+    this.hoveredColor = '#ffff00';
+    this.lastAngle = 0;
+    this.handleHoveredDrawableChanged = (drawable) => {
+      this.hovered = drawable;
+    };
+    this.handleViewerFrameDrawn = () => {
+      this.updatePropsFromViewer();
+    };
+    this.handleViewerDimensionsChange = () => {
+      writeDOM(() => {
+        if (this.viewer != null && this.canvasRef != null) {
+          this.canvasRef.width = this.viewer.viewport.width;
+          this.canvasRef.height = this.viewer.viewport.height;
+          this.updateCanvasBounds(this.canvasRef);
+        }
+      });
+    };
+    this.handleResize = () => {
+      if (this.canvasRef != null) {
+        this.updateCanvasBounds(this.canvasRef);
+      }
+    };
+    this.handlePointerMove = (event) => {
+      if (this.dragging == null) {
+        const canvasPoint = convertPointToCanvas(point.create(event.clientX, event.clientY), this.getCanvasBounds());
+        const widget = this.getTransformWidget();
+        if (canvasPoint != null && widget.boundsContainsPoint(canvasPoint)) {
+          widget.updateCursor(canvasPoint);
+        }
+        else {
+          widget.updateCursor(undefined);
+          this.hovered = undefined;
+        }
+      }
+    };
+    this.handleBeginDrag = async (event) => {
+      var _a, _b;
+      const canvasBounds = this.getCanvasBounds();
+      if (this.hovered != null &&
+        canvasBounds != null &&
+        this.viewer != null &&
+        this.position != null &&
+        this.viewer.frame != null) {
+        this.dragging = this.hovered;
+        const currentCanvas = convertPointToCanvas(point.create(event.clientX, event.clientY), canvasBounds);
+        const widgetCenter = this.viewer.viewport.transformWorldToViewport(this.position, this.viewer.frame.scene.camera.projectionViewMatrix);
+        this.lastAngle =
+          currentCanvas != null
+            ? angle.fromPoints(widgetCenter, currentCanvas)
+            : 0;
+        this.lastWorldPosition = convertCanvasPointToWorld(currentCanvas, (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.frame, (_b = this.viewer) === null || _b === void 0 ? void 0 : _b.viewport, this.currentTransform);
+        this.interactionStarted.emit();
+        window.removeEventListener('pointermove', this.handlePointerMove);
+        window.addEventListener('pointermove', this.handleDrag);
+        window.addEventListener('pointerup', this.handleEndTransform);
+      }
+    };
+    this.handleDrag = async (event) => {
+      var _a, _b, _c;
+      // Prevent selection of text and interaction with view cube while dragging the widget
+      event.preventDefault();
+      const canvasBounds = this.getCanvasBounds();
+      if (this.dragging != null &&
+        this.lastWorldPosition != null &&
+        canvasBounds != null &&
+        this.viewer != null &&
+        this.viewer.frame != null &&
+        this.position != null) {
+        // Begin the transform on the first `pointermove` event as opposed to the
+        // `pointerdown` to prevent accidental no-op transforms (identity matrix).
+        await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.beginTransform());
+        const currentCanvas = convertPointToCanvas(point.create(event.clientX, event.clientY), canvasBounds);
+        const widgetCenter = this.viewer.viewport.transformWorldToViewport(this.position, this.viewer.frame.scene.camera.projectionViewMatrix);
+        const currentWorld = convertCanvasPointToWorld(currentCanvas, (_b = this.viewer) === null || _b === void 0 ? void 0 : _b.frame, (_c = this.viewer) === null || _c === void 0 ? void 0 : _c.viewport, this.currentTransform);
+        if (currentWorld != null &&
+          currentCanvas != null &&
+          widgetCenter != null) {
+          const angle$1 = angle.fromPoints(widgetCenter, currentCanvas);
+          this.transform(this.lastWorldPosition, currentWorld, angle$1 - this.lastAngle);
+          this.lastWorldPosition = currentWorld;
+          this.lastAngle = angle$1;
+        }
+      }
+    };
+    this.handleEndTransform = async (event) => {
+      var _a, _b;
+      const canvasPoint = convertPointToCanvas(point.create(event.clientX, event.clientY), this.getCanvasBounds());
+      const widget = this.getTransformWidget();
+      this.dragging = undefined;
+      this.lastWorldPosition = undefined;
+      this.position =
+        this.currentTransform != null
+          ? vector3.fromMatrixPosition(this.currentTransform)
+          : this.position;
+      this.lastAngle = 0;
+      widget.updateCursor(canvasPoint);
+      widget.updateTransform(this.currentTransform);
+      widget.updateDisabledAxis({
+        xRotation: true,
+        yRotation: true,
+        zRotation: true,
+        xTranslation: true,
+        yTranslation: true,
+        zTranslation: true,
+      });
+      window.removeEventListener('pointermove', this.handleDrag);
+      window.removeEventListener('pointerup', this.handleEndTransform);
+      try {
+        const delta = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getCurrentDelta();
+        await ((_b = this.controller) === null || _b === void 0 ? void 0 : _b.endTransform());
+        this.interactionEnded.emit(delta);
+      }
+      catch (e) {
+        console.error('Failed to end transform interaction', e);
+      }
+      window.addEventListener('pointermove', this.handlePointerMove);
+      this.getTransformWidget().updateDisabledAxis({
+        xRotation: this.xRotationDisabled,
+        yRotation: this.yRotationDisabled,
+        zRotation: this.zRotationDisabled,
+        xTranslation: this.xTranslationDisabled,
+        yTranslation: this.yTranslationDisabled,
+        zTranslation: this.zTranslationDisabled,
+      });
+    };
+    this.updatePropsFromViewer = () => {
+      const { frame } = this.viewer || {};
+      if (frame != null) {
+        const widget = this.getTransformWidget();
+        widget.updateFrame(frame, this.dragging == null);
+      }
+    };
+    this.setupTransformWidget = (canvasRef) => {
+      var _a, _b;
+      console.debug(`Initializing transform widget. [initial-position=${JSON.stringify(this.position)}, has-initial-frame=${((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.frame) != null}]`);
+      this.widget = new TransformWidget(canvasRef, {
+        xArrow: this.xArrowColor,
+        yArrow: this.yArrowColor,
+        zArrow: this.zArrowColor,
+        hovered: this.hoveredColor,
+      });
+      if (this.rotation != null) {
+        this.currentTransform = this.getTransformForNewRotation(this.rotation);
+        this.startingTransform = this.currentTransform;
+        this.widget.updateTransform(this.currentTransform);
+      }
+      if (this.position != null) {
+        this.currentTransform = this.getTransformForNewPosition(this.position);
+        this.startingTransform = this.currentTransform;
+        this.widget.updateTransform(this.currentTransform);
+      }
+      if (((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.frame) != null) {
+        this.widget.updateFrame(this.viewer.frame, true);
+      }
+      this.handleSettingDisabledAxis();
+      this.hoveredChangeDisposable = this.widget.onHoveredChanged(this.handleHoveredDrawableChanged);
+      return this.widget;
+    };
+    this.updateCanvasBounds = (canvasElement) => {
+      readDOM(() => {
+        this.canvasBounds = canvasElement.getBoundingClientRect();
+        this.getTransformWidget().updateDimensions(canvasElement);
+      });
+    };
+    this.getTransformForNewPosition = (newPosition) => {
+      if (newPosition != null) {
+        const c = this.currentTransform != null
+          ? this.currentTransform
+          : matrix4.makeIdentity();
+        const currentRotation = matrix4.makeRotation(quaternion.fromMatrixRotation(c));
+        const position = matrix4.makeTranslation(newPosition);
+        return matrix4.multiply(position, currentRotation);
+      }
+      else if (newPosition != null) {
+        return matrix4.makeTranslation(newPosition);
+      }
+    };
+    this.getTransformForNewRotation = (newRotationEuler) => {
+      const c = this.currentTransform != null
+        ? this.currentTransform
+        : matrix4.makeIdentity();
+      const oldRotation = matrix4.invert(matrix4.makeRotation(quaternion.fromMatrixRotation(c)));
+      const newRotation = matrix4.makeRotation(quaternion.fromEuler(newRotationEuler));
+      const oldTranslation = matrix4.multiply(c, oldRotation);
+      return matrix4.multiply(oldTranslation, newRotation);
+    };
+    this.getCanvasBounds = () => {
+      if (this.canvasBounds != null) {
+        return this.canvasBounds;
+      }
+      else if (this.canvasRef != null) {
+        this.updateCanvasBounds(this.canvasRef);
+        return this.canvasBounds;
+      }
+    };
+    this.getTransformWidget = () => {
+      if (this.widget == null && this.canvasRef != null) {
+        return this.setupTransformWidget(this.canvasRef);
+      }
+      else if (this.widget != null) {
+        return this.widget;
+      }
+      else {
+        throw new Error('Transform widget was not initialized. The canvas element may not have been initialized.');
+      }
+    };
+  }
+  componentDidLoad() {
+    window.addEventListener('pointermove', this.handlePointerMove);
+    this.canvasResizeObserver = new ResizeObserver(this.handleResize);
+    if (this.canvasRef != null) {
+      this.canvasResizeObserver.observe(this.canvasRef);
+      this.setupTransformWidget(this.canvasRef);
+    }
+    this.handleViewerChanged(this.viewer, undefined);
+    readDOM(() => {
+      const hostStyles = window.getComputedStyle(this.hostEl);
+      this.xArrowColor = hostStyles
+        .getPropertyValue('--viewer-transform-widget-x-axis-arrow-color')
+        .trim();
+      this.yArrowColor = hostStyles
+        .getPropertyValue('--viewer-transform-widget-y-axis-arrow-color')
+        .trim();
+      this.zArrowColor = hostStyles
+        .getPropertyValue('--viewer-transform-widget-z-axis-arrow-color')
+        .trim();
+      this.hoveredColor = hostStyles
+        .getPropertyValue('--viewer-transform-widget-hovered-arrow-color')
+        .trim();
+    });
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    window.removeEventListener('pointermove', this.handlePointerMove);
+    (_a = this.canvasResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.hoveredChangeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+    (_c = this.widget) === null || _c === void 0 ? void 0 : _c.dispose();
+  }
+  /**
+   * @ignore
+   */
+  handleViewerChanged(newViewer, oldViewer) {
+    var _a;
+    oldViewer === null || oldViewer === void 0 ? void 0 : oldViewer.removeEventListener('frameDrawn', this.handleViewerFrameDrawn);
+    oldViewer === null || oldViewer === void 0 ? void 0 : oldViewer.removeEventListener('dimensionschange', this.handleViewerDimensionsChange);
+    newViewer === null || newViewer === void 0 ? void 0 : newViewer.addEventListener('frameDrawn', this.handleViewerFrameDrawn);
+    newViewer === null || newViewer === void 0 ? void 0 : newViewer.addEventListener('dimensionschange', this.handleViewerDimensionsChange);
+    if ((newViewer === null || newViewer === void 0 ? void 0 : newViewer.stream) != null) {
+      (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
+      this.controller = new TransformController(newViewer.stream);
+    }
+  }
+  /**
+   * @ignore
+   */
+  handleDisabledPropertyChanged() {
+    var _a;
+    (_a = this.widget) === null || _a === void 0 ? void 0 : _a.updateDisabledAxis({
+      xRotation: this.xRotationDisabled,
+      yRotation: this.yRotationDisabled,
+      zRotation: this.zRotationDisabled,
+      xTranslation: this.xTranslationDisabled,
+      yTranslation: this.yTranslationDisabled,
+      zTranslation: this.zTranslationDisabled,
+    });
+  }
+  /**
+   * @ignore
+   */
+  handleRotationChanged(newRotation, oldRotation) {
+    var _a;
+    this.currentTransform = this.getTransformForNewRotation(newRotation);
+    this.startingTransform = this.currentTransform;
+    (_a = this.widget) === null || _a === void 0 ? void 0 : _a.updateTransform(this.currentTransform);
+    console.debug(`Updating widget rotation [previous=${JSON.stringify(oldRotation)}, current=${JSON.stringify(newRotation)}]`);
+    this.rotationChanged.emit(newRotation);
+  }
+  /**
+   * @ignore
+   */
+  handlePositionChanged(newPosition, oldPosition) {
+    var _a, _b;
+    this.currentTransform = this.getTransformForNewPosition(newPosition);
+    this.startingTransform = this.currentTransform;
+    console.debug(`Updating widget position [previous=${JSON.stringify(oldPosition)}, current=${JSON.stringify(newPosition)}]`);
+    (_a = this.widget) === null || _a === void 0 ? void 0 : _a.updateTransform(this.currentTransform);
+    if (newPosition == null) {
+      (_b = this.controller) === null || _b === void 0 ? void 0 : _b.clearTransform();
+    }
+    this.positionChanged.emit(newPosition);
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, null, h("canvas", { ref: (el) => {
+        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 })));
+  }
+  transform(previous, next, angle) {
+    var _a, _b;
+    if (this.position != null &&
+      this.startingTransform != null &&
+      this.currentTransform != null &&
+      this.dragging != null &&
+      this.viewer != null &&
+      this.viewer.frame != null) {
+      this.currentTransform = computeUpdatedTransform(this.currentTransform, previous, next, (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.frame.scene.camera.viewVector, angle, this.dragging.identifier);
+      this.getTransformWidget().updateTransform(this.currentTransform);
+      (_b = this.controller) === null || _b === void 0 ? void 0 : _b.updateTransform(matrix4.multiply(this.currentTransform, matrix4.invert(this.startingTransform)));
+    }
+  }
+  handleSettingDisabledAxis() {
+    if (this.widget) {
+      this.widget.updateDisabledAxis({
+        xRotation: this.xRotationDisabled,
+        yRotation: this.yRotationDisabled,
+        zRotation: this.zRotationDisabled,
+        xTranslation: this.xTranslationDisabled,
+        yTranslation: this.yTranslationDisabled,
+        zTranslation: this.zTranslationDisabled,
+      });
+    }
+    else {
+      console.warn('Cannot set disabled values - no widget defined');
+    }
+  }
+  get hostEl() { return this; }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "xTranslationDisabled": ["handleDisabledPropertyChanged"],
+    "yTranslationDisabled": ["handleDisabledPropertyChanged"],
+    "zTranslationDisabled": ["handleDisabledPropertyChanged"],
+    "xRotationDisabled": ["handleDisabledPropertyChanged"],
+    "yRotationDisabled": ["handleDisabledPropertyChanged"],
+    "zRotationDisabled": ["handleDisabledPropertyChanged"],
+    "rotation": ["handleRotationChanged"],
+    "position": ["handlePositionChanged"]
+  }; }
+  static get style() { return viewerTransformWidgetCss; }
+}, [1, "vertex-viewer-transform-widget", {
+    "viewer": [16],
+    "position": [1040],
+    "rotation": [1040],
+    "controller": [1040],
+    "xRotationDisabled": [1028, "x-rotation-disabled"],
+    "yRotationDisabled": [1028, "y-rotation-disabled"],
+    "zRotationDisabled": [1028, "z-rotation-disabled"],
+    "xTranslationDisabled": [1028, "x-translation-disabled"],
+    "yTranslationDisabled": [1028, "y-translation-disabled"],
+    "zTranslationDisabled": [1028, "z-translation-disabled"],
+    "hovered": [1040]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-transform-widget"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-transform-widget":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerTransformWidget);
+      }
+      break;
+  } });
+}
+
+const VertexViewerTransformWidget = ViewerTransformWidget;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexViewerTransformWidget, defineCustomElement };
+
+//# sourceMappingURL=vertex-viewer-transform-widget.js.map