@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

package/dist/components/viewer-toolbar.js

@@ -0,0 +1,61 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './viewer-layer.js';
+
+const viewerToolbarCss = ".layer{padding:1rem;display:flex}.layer.position-top{align-items:flex-start}.layer.position-middle{align-items:center}.layer.position-bottom{align-items:flex-end}.layer.position-left{justify-content:flex-start}.layer.position-center{justify-content:center}.layer.position-right{justify-content:flex-end}.inner{display:flex}.inner.vertical{flex-direction:column}.inner.horizonal{flex-direction:row}::slotted(*){pointer-events:initial}";
+
+const ViewerToolbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Specifies where the toolbar is positioned.
+     */
+    this.placement = 'bottom-center';
+    this.direction = 'horizontal';
+  }
+  render() {
+    const [vertical, horizontal] = this.placement.split('-');
+    return (h("vertex-viewer-layer", { class: classnames('layer', {
+        'position-top': vertical === 'top',
+        'position-middle': vertical === 'middle',
+        'position-bottom': vertical === 'bottom',
+        'position-left': horizontal === 'left',
+        'position-center': horizontal === 'center',
+        'position-right': horizontal === 'right',
+      }) }, h("div", { class: classnames('inner', {
+        vertical: this.direction === 'vertical',
+        horizontal: this.direction === 'horizontal',
+      }) }, h("slot", null))));
+  }
+  static get style() { return viewerToolbarCss; }
+}, [1, "vertex-viewer-toolbar", {
+    "placement": [1],
+    "direction": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-toolbar", "vertex-viewer-layer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-toolbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerToolbar);
+      }
+      break;
+    case "vertex-viewer-layer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ViewerToolbar as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-toolbar.js.map

package/dist/components/viewer-toolbar.js.map

@@ -0,0 +1 @@
+{"file":"viewer-toolbar.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,mbAAmb;;MCU/b,aAAa;EAL1B;;;;;;;IAUS,cAAS,GAA2B,eAAe,CAAC;IAGpD,cAAS,GAA2B,YAAY,CAAC;GA2BzD;EAzBQ,MAAM;IACX,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEzD,QACE,2BACE,KAAK,EAAEA,UAAS,CAAC,OAAO,EAAE;QACxB,cAAc,EAAE,QAAQ,KAAK,KAAK;QAClC,iBAAiB,EAAE,QAAQ,KAAK,QAAQ;QACxC,iBAAiB,EAAE,QAAQ,KAAK,QAAQ;QACxC,eAAe,EAAE,UAAU,KAAK,MAAM;QACtC,iBAAiB,EAAE,UAAU,KAAK,QAAQ;QAC1C,gBAAgB,EAAE,UAAU,KAAK,OAAO;OACzC,CAAC,IAEF,WACE,KAAK,EAAEA,UAAS,CAAC,OAAO,EAAE;QACxB,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;QACvC,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;OAC5C,CAAC,IAEF,eAAa,CACT,CACc,EACtB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["classname"],"sources":["./src/components/viewer-toolbar/viewer-toolbar.css?tag=vertex-viewer-toolbar&encapsulation=shadow","./src/components/viewer-toolbar/viewer-toolbar.tsx"],"sourcesContent":[".layer {\n  padding: 1rem;\n  display: flex;\n}\n\n.layer.position-top {\n  align-items: flex-start;\n}\n\n.layer.position-middle {\n  align-items: center;\n}\n\n.layer.position-bottom {\n  align-items: flex-end;\n}\n\n.layer.position-left {\n  justify-content: flex-start;\n}\n\n.layer.position-center {\n  justify-content: center;\n}\n\n.layer.position-right {\n  justify-content: flex-end;\n}\n\n.inner {\n  display: flex;\n}\n\n.inner.vertical {\n  flex-direction: column;\n}\n\n.inner.horizonal {\n  flex-direction: row;\n}\n\n::slotted(*) {\n  pointer-events: initial;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport classname from 'classnames';\n\nimport { ViewerToolbarDirection, ViewerToolbarPlacement } from './types';\n\n@Component({\n  tag: 'vertex-viewer-toolbar',\n  styleUrl: 'viewer-toolbar.css',\n  shadow: true,\n})\nexport class ViewerToolbar {\n  /**\n   * Specifies where the toolbar is positioned.\n   */\n  @Prop()\n  public placement: ViewerToolbarPlacement = 'bottom-center';\n\n  @Prop()\n  public direction: ViewerToolbarDirection = 'horizontal';\n\n  public render(): h.JSX.IntrinsicElements {\n    const [vertical, horizontal] = this.placement.split('-');\n\n    return (\n      <vertex-viewer-layer\n        class={classname('layer', {\n          'position-top': vertical === 'top',\n          'position-middle': vertical === 'middle',\n          'position-bottom': vertical === 'bottom',\n          'position-left': horizontal === 'left',\n          'position-center': horizontal === 'center',\n          'position-right': horizontal === 'right',\n        })}\n      >\n        <div\n          class={classname('inner', {\n            vertical: this.direction === 'vertical',\n            horizontal: this.direction === 'horizontal',\n          })}\n        >\n          <slot></slot>\n        </div>\n      </vertex-viewer-layer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/viewport.js

@@ -0,0 +1,188 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { d as dimensions, p as point, v as vector3, r as ray, e as rectangle } from './bundle.esm.js';
+
+/**
+ * A `Viewport` represents the drawing area in the viewer.
+ *
+ * When a frame is received from the rendering pipeline, it might not be the
+ * same dimensions of the viewport because of an interactive frame or because of
+ * bandwidth limitations or other performance reasons.
+ *
+ * The viewport contains methods to scale an image to the viewport, as well as
+ * translate 2D coordinates between the viewport and the frame.
+ */
+class Viewport {
+  constructor(
+  /**
+   * The width of the viewport.
+   */
+  width, 
+  /**
+   * The height of the viewport.
+   */
+  height) {
+    this.width = width;
+    this.height = height;
+    this.center = dimensions.center(this.dimensions);
+  }
+  /**
+   * Returns a new viewport with the given dimensions.
+   * @param dimensions The dimensions of the viewport
+   * @returns A new viewport.
+   */
+  static fromDimensions(dimensions) {
+    return new Viewport(dimensions.width, dimensions.height);
+  }
+  /**
+   * Transforms a normalized device coordinate to a 2D point within the
+   * viewport.
+   *
+   * @param ndc A 2D point in NDC.
+   * @returns A 2D point in the coordinate space of the viewport.
+   */
+  transformNdcPointToViewport(ndc) {
+    return point.create(ndc.x * this.center.x + this.center.x, -ndc.y * this.center.y + this.center.y);
+  }
+  /**
+   * Transforms a normalized device coordinate to a 2D point within the
+   * viewport.
+   *
+   * @param ndc A 3D point in NDC.
+   * @returns A 2D point in the coordinate space of the viewport.
+   */
+  transformVectorToViewport(ndc) {
+    return this.transformNdcPointToViewport(ndc);
+  }
+  /**
+   * Transforms a world point to 2D point in viewport space.
+   *
+   * @param worldPt The world point to transform.
+   * @param projectionViewMatrix The projection matrix to transform a 3D point to 2D point.
+   * @returns A point in viewport space.
+   */
+  transformWorldToViewport(worldPt, projectionViewMatrix) {
+    const ndc = vector3.transformMatrix(worldPt, projectionViewMatrix);
+    return this.transformVectorToViewport(ndc);
+  }
+  transformPointToViewport(pt, image) {
+    const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);
+    return point.scale(pt, 1 * scaleX, 1 * scaleY);
+  }
+  /**
+   * Transforms a point in viewport coordinate space to a point in a frame's
+   * coordinate space.
+   *
+   * @param pt A point in viewport coordinate space.
+   * @param image An image of a frame.
+   * @returns A point in the coordinate space of the frame.
+   */
+  transformPointToFrame(pt, image) {
+    const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);
+    return point.scale(pt, 1 / scaleX, 1 / scaleY);
+  }
+  /**
+   * Transforms a point in viewport coordinates to a point in perspective world space
+   * coordinates. This method expects a depth buffer in order to compute a value
+   * for the Z axis.
+   *
+   * @param pt A point in viewport coordinates.
+   * @param depthBuffer A depth buffer for computing the Z axis.
+   * @param fallbackNormalizedDepth A fallback value if the depth is the max
+   *   depth value, or cannot be determined.
+   * @returns
+   */
+  transformPointToWorldSpace(pt, depthBuffer, fallbackNormalizedDepth) {
+    const depthPt = this.transformPointToFrame(pt, depthBuffer);
+    const ray = this.transformPointToRay(pt, depthBuffer, depthBuffer.camera);
+    return depthBuffer.getWorldPoint(depthPt, ray, fallbackNormalizedDepth);
+  }
+  /**
+   * Transforms a point in viewport coordinates to a point in orthographic world space
+   * coordinates. This method expects a depth buffer in order to compute a value
+   * for the Z axis.
+   *
+   * @param pt A point in viewport coordinates.
+   * @param depthBuffer A depth buffer for computing the Z axis.
+   * @param fallbackNormalizedDepth A fallback value if the depth is the max
+   *   depth value, or cannot be determined.
+   */
+  transformPointToOrthographicWorldSpace(pt, depthBuffer, fallbackNormalizedDepth) {
+    const depthPt = this.transformPointToFrame(pt, depthBuffer);
+    const ray = this.transformPointToOrthographicRay(pt, depthBuffer, depthBuffer.camera);
+    return depthBuffer.getOrthographicWorldPoint(depthPt, ray, fallbackNormalizedDepth);
+  }
+  /**
+   * Transforms a point in viewport coordinates to a ray. The returned ray will
+   * have an origin that is at the position of the camera with a direction that
+   * is pointing into world space away from the camera.
+   *
+   * @param pt A point in viewport coordinates.
+   * @param image An image of a frame.
+   * @param camera A camera used to determine orientation of the scene.
+   * @returns
+   */
+  transformPointToRay(pt, image, camera) {
+    const ndc = this.transformScreenPointToNdc(pt, image);
+    const origin = vector3.fromMatrixPosition(camera.worldMatrix);
+    const world = vector3.transformNdcToWorldSpace(vector3.create(ndc.x, ndc.y, 0.5), camera.worldMatrix, camera.projectionMatrixInverse);
+    const direction = vector3.normalize(vector3.subtract(world, origin));
+    return ray.create({ origin, direction });
+  }
+  /**
+   * Transforms a point in viewport coordinates to a ray. The returned ray will
+   * have an origin that is at the world point of viewport coordinate with a direction that
+   * is pointing into world space away from the camera.
+   *
+   * @param pt A point in viewport coordinates.
+   * @param image An image of a frame.
+   * @param camera A camera used to determine orientation of the scene.
+   */
+  transformPointToOrthographicRay(pt, image, camera) {
+    const ndc = this.transformScreenPointToNdc(pt, image);
+    const origin = vector3.transformNdcToWorldSpace(vector3.create(ndc.x, ndc.y, 0), camera.worldMatrix, camera.projectionMatrixInverse);
+    return ray.create({
+      origin,
+      direction: vector3.normalize(camera.viewVector),
+    });
+  }
+  /**
+   * Maps a screen point to normalized device coordinates (NDC). A screen point
+   * at 0,0 represents the top-left of the viewport.
+   *
+   * @param screenPt A screen point.
+   */
+  transformScreenPointToNdc(screenPt, image) {
+    const framePt = this.transformPointToFrame(screenPt, image);
+    return point.create((framePt.x / image.imageAttr.frameDimensions.width) * 2 - 1, -(framePt.y / image.imageAttr.frameDimensions.height) * 2 + 1);
+  }
+  /**
+   * Computes a rectangle that is scaled correctly to be drawn within the
+   * viewport.
+   *
+   * @param image The image to be drawn.
+   * @param imageDimensions The dimensions of the received image.
+   * @returns A rectangle.
+   */
+  calculateDrawRect(image) {
+    const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);
+    return rectangle.scale(image.imageAttr.imageRect, scaleX, scaleY);
+  }
+  calculateFrameScale(image) {
+    const { frameDimensions: dimensions } = image.imageAttr;
+    const imageRect = rectangle.fromDimensions(dimensions);
+    const viewport = rectangle.fromDimensions(this.dimensions);
+    const fit = rectangle.containFit(viewport, imageRect);
+    const scaleX = fit.width / imageRect.width;
+    const scaleY = fit.height / imageRect.height;
+    return point.create(scaleX, scaleY);
+  }
+  get dimensions() {
+    return dimensions.create(this.width, this.height);
+  }
+}
+
+export { Viewport as V };
+
+//# sourceMappingURL=viewport.js.map

package/dist/components/viewport.js.map

@@ -0,0 +1 @@
+{"file":"viewport.js","mappings":"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","names":["Dimensions","Point","Vector3","Ray","Rectangle"],"sources":["./src/lib/types/viewport.ts"],"sourcesContent":["import {\n  Dimensions,\n  Matrix4,\n  Point,\n  Ray,\n  Rectangle,\n  Vector3,\n} from '@vertexvis/geometry';\n\nimport { DepthBuffer } from './depthBuffer';\nimport type { FrameCameraWithMatrices, FrameImageLike } from './frame';\n\n/**\n * A `Viewport` represents the drawing area in the viewer.\n *\n * When a frame is received from the rendering pipeline, it might not be the\n * same dimensions of the viewport because of an interactive frame or because of\n * bandwidth limitations or other performance reasons.\n *\n * The viewport contains methods to scale an image to the viewport, as well as\n * translate 2D coordinates between the viewport and the frame.\n */\nexport class Viewport implements Dimensions.Dimensions {\n  /**\n   * The center point of the viewport.\n   */\n  public readonly center: Point.Point;\n\n  public constructor(\n    /**\n     * The width of the viewport.\n     */\n    public readonly width: number,\n\n    /**\n     * The height of the viewport.\n     */\n    public readonly height: number\n  ) {\n    this.center = Dimensions.center(this.dimensions);\n  }\n\n  /**\n   * Returns a new viewport with the given dimensions.\n   * @param dimensions The dimensions of the viewport\n   * @returns A new viewport.\n   */\n  public static fromDimensions(dimensions: Dimensions.Dimensions): Viewport {\n    return new Viewport(dimensions.width, dimensions.height);\n  }\n\n  /**\n   * Transforms a normalized device coordinate to a 2D point within the\n   * viewport.\n   *\n   * @param ndc A 2D point in NDC.\n   * @returns A 2D point in the coordinate space of the viewport.\n   */\n  public transformNdcPointToViewport(ndc: Point.Point): Point.Point {\n    return Point.create(\n      ndc.x * this.center.x + this.center.x,\n      -ndc.y * this.center.y + this.center.y\n    );\n  }\n\n  /**\n   * Transforms a normalized device coordinate to a 2D point within the\n   * viewport.\n   *\n   * @param ndc A 3D point in NDC.\n   * @returns A 2D point in the coordinate space of the viewport.\n   */\n  public transformVectorToViewport(ndc: Vector3.Vector3): Point.Point {\n    return this.transformNdcPointToViewport(ndc);\n  }\n\n  /**\n   * Transforms a world point to 2D point in viewport space.\n   *\n   * @param worldPt The world point to transform.\n   * @param projectionViewMatrix The projection matrix to transform a 3D point to 2D point.\n   * @returns A point in viewport space.\n   */\n  public transformWorldToViewport(\n    worldPt: Vector3.Vector3,\n    projectionViewMatrix: Matrix4.Matrix4\n  ): Point.Point {\n    const ndc = Vector3.transformMatrix(worldPt, projectionViewMatrix);\n    return this.transformVectorToViewport(ndc);\n  }\n\n  public transformPointToViewport(\n    pt: Point.Point,\n    image: FrameImageLike\n  ): Point.Point {\n    const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n    return Point.scale(pt, 1 * scaleX, 1 * scaleY);\n  }\n\n  /**\n   * Transforms a point in viewport coordinate space to a point in a frame's\n   * coordinate space.\n   *\n   * @param pt A point in viewport coordinate space.\n   * @param image An image of a frame.\n   * @returns A point in the coordinate space of the frame.\n   */\n  public transformPointToFrame(\n    pt: Point.Point,\n    image: FrameImageLike\n  ): Point.Point {\n    const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n    return Point.scale(pt, 1 / scaleX, 1 / scaleY);\n  }\n\n  /**\n   * Transforms a point in viewport coordinates to a point in perspective world space\n   * coordinates. This method expects a depth buffer in order to compute a value\n   * for the Z axis.\n   *\n   * @param pt A point in viewport coordinates.\n   * @param depthBuffer A depth buffer for computing the Z axis.\n   * @param fallbackNormalizedDepth A fallback value if the depth is the max\n   *   depth value, or cannot be determined.\n   * @returns\n   */\n  public transformPointToWorldSpace(\n    pt: Point.Point,\n    depthBuffer: DepthBuffer,\n    fallbackNormalizedDepth?: number\n  ): Vector3.Vector3 {\n    const depthPt = this.transformPointToFrame(pt, depthBuffer);\n    const ray = this.transformPointToRay(pt, depthBuffer, depthBuffer.camera);\n    return depthBuffer.getWorldPoint(depthPt, ray, fallbackNormalizedDepth);\n  }\n\n  /**\n   * Transforms a point in viewport coordinates to a point in orthographic world space\n   * coordinates. This method expects a depth buffer in order to compute a value\n   * for the Z axis.\n   *\n   * @param pt A point in viewport coordinates.\n   * @param depthBuffer A depth buffer for computing the Z axis.\n   * @param fallbackNormalizedDepth A fallback value if the depth is the max\n   *   depth value, or cannot be determined.\n   */\n  public transformPointToOrthographicWorldSpace(\n    pt: Point.Point,\n    depthBuffer: DepthBuffer,\n    fallbackNormalizedDepth?: number\n  ): Vector3.Vector3 {\n    const depthPt = this.transformPointToFrame(pt, depthBuffer);\n    const ray = this.transformPointToOrthographicRay(\n      pt,\n      depthBuffer,\n      depthBuffer.camera\n    );\n    return depthBuffer.getOrthographicWorldPoint(\n      depthPt,\n      ray,\n      fallbackNormalizedDepth\n    );\n  }\n\n  /**\n   * Transforms a point in viewport coordinates to a ray. The returned ray will\n   * have an origin that is at the position of the camera with a direction that\n   * is pointing into world space away from the camera.\n   *\n   * @param pt A point in viewport coordinates.\n   * @param image An image of a frame.\n   * @param camera A camera used to determine orientation of the scene.\n   * @returns\n   */\n  public transformPointToRay(\n    pt: Point.Point,\n    image: FrameImageLike,\n    camera: FrameCameraWithMatrices\n  ): Ray.Ray {\n    const ndc = this.transformScreenPointToNdc(pt, image);\n    const origin = Vector3.fromMatrixPosition(camera.worldMatrix);\n    const world = Vector3.transformNdcToWorldSpace(\n      Vector3.create(ndc.x, ndc.y, 0.5),\n      camera.worldMatrix,\n      camera.projectionMatrixInverse\n    );\n    const direction = Vector3.normalize(Vector3.subtract(world, origin));\n    return Ray.create({ origin, direction });\n  }\n\n  /**\n   * Transforms a point in viewport coordinates to a ray. The returned ray will\n   * have an origin that is at the world point of viewport coordinate with a direction that\n   * is pointing into world space away from the camera.\n   *\n   * @param pt A point in viewport coordinates.\n   * @param image An image of a frame.\n   * @param camera A camera used to determine orientation of the scene.\n   */\n  public transformPointToOrthographicRay(\n    pt: Point.Point,\n    image: FrameImageLike,\n    camera: FrameCameraWithMatrices\n  ): Ray.Ray {\n    const ndc = this.transformScreenPointToNdc(pt, image);\n    const origin = Vector3.transformNdcToWorldSpace(\n      Vector3.create(ndc.x, ndc.y, 0),\n      camera.worldMatrix,\n      camera.projectionMatrixInverse\n    );\n    return Ray.create({\n      origin,\n      direction: Vector3.normalize(camera.viewVector),\n    });\n  }\n\n  /**\n   * Maps a screen point to normalized device coordinates (NDC). A screen point\n   * at 0,0 represents the top-left of the viewport.\n   *\n   * @param screenPt A screen point.\n   */\n  public transformScreenPointToNdc(\n    screenPt: Point.Point,\n    image: FrameImageLike\n  ): Point.Point {\n    const framePt = this.transformPointToFrame(screenPt, image);\n    return Point.create(\n      (framePt.x / image.imageAttr.frameDimensions.width) * 2 - 1,\n      -(framePt.y / image.imageAttr.frameDimensions.height) * 2 + 1\n    );\n  }\n\n  /**\n   * Computes a rectangle that is scaled correctly to be drawn within the\n   * viewport.\n   *\n   * @param image The image to be drawn.\n   * @param imageDimensions The dimensions of the received image.\n   * @returns A rectangle.\n   */\n  public calculateDrawRect(image: FrameImageLike): Rectangle.Rectangle {\n    const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);\n    return Rectangle.scale(image.imageAttr.imageRect, scaleX, scaleY);\n  }\n\n  private calculateFrameScale(image: FrameImageLike): Point.Point {\n    const { frameDimensions: dimensions } = image.imageAttr;\n\n    const imageRect = Rectangle.fromDimensions(dimensions);\n    const viewport = Rectangle.fromDimensions(this.dimensions);\n    const fit = Rectangle.containFit(viewport, imageRect);\n\n    const scaleX = fit.width / imageRect.width;\n    const scaleY = fit.height / imageRect.height;\n\n    return Point.create(scaleX, scaleY);\n  }\n\n  public get dimensions(): Dimensions.Dimensions {\n    return Dimensions.create(this.width, this.height);\n  }\n}\n"],"version":3}