@vertexvis/viewer 0.18.2-testing.0 → 0.18.2-testing.1

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

@@ -1,838 +0,0 @@
-/*!
- * 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