@ue-too/board 0.9.5 → 0.11.0

package/input-interpretation/raw-input-publisher/raw-input-publisher.d.ts

@@ -1,68 +1,90 @@
 import type { Point } from "@ue-too/math";
-import { CameraMux } from "../../camera/camera-mux";
-import { ObservableBoardCamera } from "../../camera/interface";
 /**
- * @description The unsubscribe to user raw input.
+ * Function to unsubscribe from raw user input events.
  *
- * @category Event Parser
+ * @remarks
+ * Calling this function removes the subscriber from the event stream.
+ *
+ * @category Raw Input Publisher
  */
 export type UnsubscribeToUserRawInput = () => void;
 /**
- * @description The raw user pan input event payload.
+ * Payload for pan input events.
+ *
+ * @property diff - The pan delta in viewport pixels
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
 export type RawUserPanInputEventPayload = {
     diff: Point;
 };
 /**
- * @description The raw user pan input event.
- * Use type to discriminate between pan, zoom, and rotate events.
+ * Pan input event with discriminated type.
  *
- * @category Event Parser
+ * @remarks
+ * The `type` property allows TypeScript discriminated unions to distinguish
+ * between different event types when subscribing to the "all" event stream.
+ *
+ * @category Raw Input Publisher
  */
 export type RawUserPanInputEvent = {
     type: "pan";
 } & RawUserPanInputEventPayload;
 /**
- * @description The raw user zoom input event payload.
+ * Payload for zoom input events.
+ *
+ * @property deltaZoomAmount - The zoom delta (scale change)
+ * @property anchorPoint - The zoom anchor point in viewport coordinates
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
 export type RawUserZoomInputEventPayload = {
     deltaZoomAmount: number;
     anchorPoint: Point;
 };
 /**
- * @description The raw user zoom input event.
- * Use type to discriminate between pan, zoom, and rotate events.
+ * Zoom input event with discriminated type.
  *
- * @category Event Parser
+ * @remarks
+ * The `type` property allows TypeScript discriminated unions to distinguish
+ * between different event types when subscribing to the "all" event stream.
+ *
+ * @category Raw Input Publisher
  */
 export type RawUserZoomInputEvent = {
     type: "zoom";
 } & RawUserZoomInputEventPayload;
 /**
- * @description The raw user rotate input event payload.
+ * Payload for rotate input events.
+ *
+ * @property deltaRotation - The rotation delta in radians
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
 export type RawUserRotateInputEventPayload = {
     deltaRotation: number;
 };
 /**
- * @description The raw user rotate input event.
- * Use type to discriminate between pan, zoom, and rotate events.
+ * Rotate input event with discriminated type.
+ *
+ * @remarks
+ * The `type` property allows TypeScript discriminated unions to distinguish
+ * between different event types when subscribing to the "all" event stream.
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
 export type RawUserRotateInputEvent = {
     type: "rotate";
 } & RawUserRotateInputEventPayload;
 /**
- * @description The raw user input event map.
+ * Mapping of event names to their payload types.
  *
- * @category Event Parser
+ * @remarks
+ * This type enables type-safe event subscription:
+ * - Subscribe to specific events ("pan", "zoom", "rotate") to receive only those payloads
+ * - Subscribe to "all" to receive all events with discriminated type property
+ *
+ * @category Raw Input Publisher
  */
 export type RawUserInputEventMap = {
     "pan": RawUserPanInputEventPayload;
@@ -71,51 +93,125 @@ export type RawUserInputEventMap = {
     "all": RawUserInputEvent;
 };
 /**
- * @description The raw user input event.
- * Use type to discriminate between pan, zoom, and rotate events.
+ * Union type of all raw user input events.
+ *
+ * @remarks
+ * Use the `type` discriminator property to determine which event variant you have.
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
 export type RawUserInputEvent = RawUserPanInputEvent | RawUserZoomInputEvent | RawUserRotateInputEvent;
 /**
- * @description The raw user input callback.
- * This is the function type of callbacks for raw user input events.
+ * Callback function type for raw user input events.
+ *
+ * @typeParam K - The event name key from RawUserInputEventMap
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
 export type RawUserInputCallback<K extends keyof RawUserInputEventMap> = (event: RawUserInputEventMap[K]) => void;
+/**
+ * Interface for publishing raw user input events to observers.
+ *
+ * @remarks
+ * This interface defines the contract for broadcasting user input events
+ * to external subscribers. Implementations provide the observable pattern
+ * for input event distribution.
+ *
+ * @category Raw Input Publisher
+ */
 export interface UserInputPublisher {
+    /** Notifies subscribers of a pan gesture */
     notifyPan(diff: Point): void;
+    /** Notifies subscribers of a zoom gesture */
     notifyZoom(deltaZoomAmount: number, anchorPoint: Point): void;
+    /** Notifies subscribers of a rotate gesture */
     notifyRotate(deltaRotation: number): void;
+    /** Subscribes to input events */
     on<K extends keyof RawUserInputEventMap>(eventName: K, callback: (event: RawUserInputEventMap[K]) => void): UnsubscribeToUserRawInput;
 }
 /**
- * @description The raw user input publisher.
- * Publishs raw user input events to the input flow control, and subscribers.
+ * Publisher for broadcasting raw user input events to observers.
+ *
+ * @remarks
+ * This class implements the observable pattern to distribute user input events
+ * to external subscribers. It operates in parallel to camera control - the
+ * orchestrator both sends events to this publisher AND controls the camera.
+ *
+ * **Architecture**:
+ * ```
+ * Orchestrator → Publisher → Observers (UI, analytics, etc.)
+ *             ↓
+ *          CameraMux → CameraRig
+ * ```
+ *
+ * **Event Streams**:
+ * - **Specific streams**: Subscribe to "pan", "zoom", or "rotate" for typed events
+ * - **Unified stream**: Subscribe to "all" for all events with type discriminator
+ *
+ * **Use Cases**:
+ * - Update UI elements based on user interactions
+ * - Log analytics about user gestures
+ * - Synchronize secondary views or previews
+ * - Implement custom gesture reactions independent of camera
+ *
+ * **Observable Implementation**:
+ * Uses AsyncObservable for asynchronous event delivery, preventing observers
+ * from blocking the input processing pipeline.
  *
- * @category Event Parser
+ * @category Raw Input Publisher
+ *
+ * @example
+ * ```typescript
+ * const publisher = new RawUserInputPublisher();
+ *
+ * // Subscribe to pan events
+ * const unsubscribe = publisher.on("pan", (event) => {
+ *   console.log("User panned by:", event.diff);
+ *   updateMinimap(event.diff);
+ * });
+ *
+ * // Subscribe to all events
+ * publisher.on("all", (event) => {
+ *   switch (event.type) {
+ *     case "pan":
+ *       analytics.log("pan", event.diff);
+ *       break;
+ *     case "zoom":
+ *       analytics.log("zoom", event.deltaZoomAmount, event.anchorPoint);
+ *       break;
+ *     case "rotate":
+ *       analytics.log("rotate", event.deltaRotation);
+ *       break;
+ *   }
+ * });
+ *
+ * // Later, unsubscribe
+ * unsubscribe();
+ * ```
  */
 export declare class RawUserInputPublisher implements UserInputPublisher {
     private pan;
     private zoom;
     private rotate;
     private all;
-    private _cameraMux;
-    constructor(cameraMux: CameraMux);
+    constructor();
     notifyPan(diff: Point): void;
     notifyZoom(deltaZoomAmount: number, anchorPoint: Point): void;
     notifyRotate(deltaRotation: number): void;
     on<K extends keyof RawUserInputEventMap>(eventName: K, callback: (event: RawUserInputEventMap[K]) => void): UnsubscribeToUserRawInput;
-    get cameraMux(): CameraMux;
-    set cameraMux(cameraMux: CameraMux);
 }
 /**
- * @description Creates a default raw user input publisher.
+ * Creates a default raw user input publisher.
+ *
+ * @returns A new RawUserInputPublisher instance
+ *
+ * @remarks
+ * Factory function for creating a standard publisher. Useful for dependency injection
+ * and testing scenarios where you want to swap implementations.
  *
- * @category Event Parser
+ * @category Raw Input Publisher
  */
-export declare function createDefaultRawUserInputPublisher(camera: ObservableBoardCamera): RawUserInputPublisher;
+export declare function createDefaultRawUserInputPublisher(): RawUserInputPublisher;
 export declare class RawUserInputPublisherWithWebWorkerRelay implements UserInputPublisher {
     private pan;
     private zoom;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ue-too/board",
   "type": "module",
-  "version": "0.9.5",
+  "version": "0.11.0",
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -14,8 +14,8 @@
   "types": "./index.d.ts",
   "module": "./index.js",
   "dependencies": {
-    "@ue-too/being": "^0.9.5",
-    "@ue-too/math": "^0.9.5"
+    "@ue-too/being": "^0.11.0",
+    "@ue-too/math": "^0.11.0"
   },
   "repository": {
     "type": "git",

package/utils/canvas-position-dimension.d.ts

@@ -1,5 +1,140 @@
 import { Observer, SubscriptionOptions } from "../utils/observable";
-export type CanvasUpdateObserver = (rect: DOMRect) => void;
+/**
+ * Monitors and publishes position and dimension changes for SVG elements.
+ *
+ * @remarks
+ * This class tracks SVG element position and dimensions using multiple browser APIs
+ * to ensure comprehensive detection of all changes:
+ * - ResizeObserver: Detects size changes
+ * - IntersectionObserver: Detects visibility and position changes
+ * - MutationObserver: Detects attribute changes (width, height, style)
+ * - Window scroll/resize events: Detects changes from page layout
+ *
+ * The reported DOMRect excludes padding and borders to provide the actual
+ * content dimensions using {@link getTrueRect}.
+ *
+ * Position and dimension changes are published synchronously to all subscribers,
+ * ensuring immediate updates for coordinate transformations and rendering logic.
+ *
+ * @example
+ * ```typescript
+ * const svg = document.querySelector('svg');
+ * const publisher = new SvgPositionDimensionPublisher(svg);
+ *
+ * // Subscribe to position/dimension updates
+ * publisher.onPositionUpdate((rect) => {
+ *   console.log(`SVG at (${rect.x}, ${rect.y}) with size ${rect.width}x${rect.height}`);
+ * });
+ *
+ * // Clean up when done
+ * publisher.dispose();
+ * ```
+ *
+ * @category Canvas Position
+ */
+export declare class SvgPositionDimensionPublisher {
+    private lastRect?;
+    private resizeObserver;
+    private intersectionObserver;
+    private mutationObserver;
+    private scrollHandler?;
+    private resizeHandler?;
+    private _observers;
+    /**
+     * Creates a new SVG position/dimension publisher.
+     *
+     * @param canvas - Optional SVG element to immediately attach to
+     *
+     * @remarks
+     * If a canvas is provided, observers are immediately attached and monitoring begins.
+     * Otherwise, call {@link attach} later to begin monitoring.
+     */
+    constructor(canvas?: SVGSVGElement);
+    /**
+     * Cleans up all observers and event listeners.
+     *
+     * @remarks
+     * Disconnects all observers (ResizeObserver, IntersectionObserver, MutationObserver)
+     * and removes window event listeners (scroll, resize). Always call this method
+     * when the publisher is no longer needed to prevent memory leaks.
+     */
+    dispose(): void;
+    /**
+     * Attaches observers to an SVG element and begins monitoring.
+     *
+     * @param canvas - The SVG element to monitor
+     *
+     * @remarks
+     * Automatically calls {@link dispose} first to clean up any previous attachments.
+     * Sets up all observers and records the initial position/dimensions.
+     *
+     * The initial rect is calculated immediately and stored, but no notification
+     * is sent to observers for this initial state.
+     */
+    attach(canvas: SVGSVGElement): void;
+    private publishPositionUpdate;
+    /**
+     * Subscribes to position and dimension updates.
+     *
+     * @param observer - Callback function that receives the updated DOMRect
+     * @param options - Optional subscription options (e.g., AbortSignal for cleanup)
+     * @returns Unsubscribe function to remove this observer
+     *
+     * @remarks
+     * The observer is called synchronously whenever the SVG's position or dimensions change.
+     * The DOMRect parameter represents the actual content area (excluding padding and borders).
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = publisher.onPositionUpdate((rect) => {
+     *   console.log(`Position: ${rect.x}, ${rect.y}`);
+     *   console.log(`Size: ${rect.width}x${rect.height}`);
+     * });
+     *
+     * // Later, when done:
+     * unsubscribe();
+     * ```
+     */
+    onPositionUpdate(observer: Observer<[DOMRect]>, options?: SubscriptionOptions): () => void;
+    private attributeCallBack;
+}
+/**
+ * Monitors and publishes position and dimension changes for HTML Canvas elements.
+ *
+ * @remarks
+ * Similar to {@link SvgPositionDimensionPublisher} but specifically for HTMLCanvasElement.
+ * Automatically handles device pixel ratio adjustments to maintain crisp rendering
+ * at different screen densities.
+ *
+ * Key differences from SVG version:
+ * - Automatically adjusts canvas.width/height attributes based on devicePixelRatio
+ * - Synchronizes CSS dimensions (style.width/height) with canvas buffer size
+ * - Ensures canvas maintains proper resolution on high-DPI displays
+ *
+ * The class uses multiple browser APIs for comprehensive change detection:
+ * - ResizeObserver: Detects size changes
+ * - IntersectionObserver: Detects visibility and position changes
+ * - MutationObserver: Detects attribute changes and synchronizes dimensions
+ * - Window scroll/resize events: Detects changes from page layout
+ *
+ * @example
+ * ```typescript
+ * const canvas = document.querySelector('canvas');
+ * const publisher = new CanvasPositionDimensionPublisher(canvas);
+ *
+ * // Subscribe to updates
+ * publisher.onPositionUpdate((rect) => {
+ *   // Canvas dimensions automatically adjusted for devicePixelRatio
+ *   console.log(`Canvas at (${rect.x}, ${rect.y})`);
+ *   console.log(`Display size: ${rect.width}x${rect.height}`);
+ * });
+ *
+ * publisher.dispose();
+ * ```
+ *
+ * @category Canvas Position
+ * @see {@link SvgPositionDimensionPublisher} for SVG elements
+ */
 export declare class CanvasPositionDimensionPublisher {
     private lastRect?;
     private resizeObserver;
@@ -8,13 +143,159 @@ export declare class CanvasPositionDimensionPublisher {
     private scrollHandler?;
     private resizeHandler?;
     private _observers;
+    /**
+     * Creates a new Canvas position/dimension publisher.
+     *
+     * @param canvas - Optional canvas element to immediately attach to
+     *
+     * @remarks
+     * If a canvas is provided, observers are immediately attached and monitoring begins.
+     * The canvas dimensions are automatically adjusted for devicePixelRatio.
+     */
     constructor(canvas?: HTMLCanvasElement);
+    /**
+     * Cleans up all observers and event listeners.
+     *
+     * @remarks
+     * Disconnects all observers and removes window event listeners.
+     * Always call this method when the publisher is no longer needed to prevent memory leaks.
+     */
     dispose(): void;
+    /**
+     * Attaches observers to a canvas element and begins monitoring.
+     *
+     * @param canvas - The canvas element to monitor
+     *
+     * @remarks
+     * Automatically calls {@link dispose} first to clean up any previous attachments.
+     * Sets up all observers, adjusts canvas dimensions for devicePixelRatio,
+     * and records the initial position/dimensions.
+     */
     attach(canvas: HTMLCanvasElement): void;
     private publishPositionUpdate;
+    /**
+     * Subscribes to position and dimension updates.
+     *
+     * @param observer - Callback function that receives the updated DOMRect
+     * @param options - Optional subscription options (e.g., AbortSignal for cleanup)
+     * @returns Unsubscribe function to remove this observer
+     *
+     * @remarks
+     * The observer is called synchronously whenever the canvas position or dimensions change.
+     * The DOMRect represents the actual content area (excluding padding and borders).
+     * Canvas buffer dimensions are automatically adjusted for devicePixelRatio.
+     */
     onPositionUpdate(observer: Observer<[DOMRect]>, options?: SubscriptionOptions): () => void;
+    /**
+     * Handles attribute mutations on the canvas element.
+     *
+     * @param mutationsList - List of mutations detected
+     * @param observer - The MutationObserver instance
+     *
+     * @remarks
+     * This callback synchronizes canvas buffer size with CSS dimensions:
+     * - When width/height attributes change: Updates CSS dimensions based on devicePixelRatio
+     * - When style changes: Updates buffer size to match CSS dimensions
+     *
+     * This ensures the canvas maintains proper resolution on all displays.
+     */
     private attributeCallBack;
 }
+/**
+ * Calculates the actual content rectangle excluding padding and borders.
+ *
+ * @param rect - The element's bounding client rectangle
+ * @param computedStyle - The computed CSS styles for the element
+ * @returns DOMRect representing the content area only
+ *
+ * @remarks
+ * Browser's getBoundingClientRect() includes padding and borders, but for
+ * coordinate transformations we need the actual drawable content area.
+ *
+ * This function subtracts padding and border from all four sides to get
+ * the "true" content rectangle. This is essential for accurate coordinate
+ * conversions between window and canvas space.
+ *
+ * @example
+ * ```typescript
+ * const canvas = document.querySelector('canvas');
+ * const rect = canvas.getBoundingClientRect();
+ * const style = window.getComputedStyle(canvas);
+ * const contentRect = getTrueRect(rect, style);
+ *
+ * // contentRect.width is less than rect.width if padding/borders exist
+ * console.log(`Full size: ${rect.width}x${rect.height}`);
+ * console.log(`Content size: ${contentRect.width}x${contentRect.height}`);
+ * ```
+ *
+ * @category Canvas Position
+ */
 export declare function getTrueRect(rect: DOMRect, computedStyle: CSSStyleDeclaration): DOMRect;
+/**
+ * Creates a proxy that automatically flips y-coordinates for canvas context methods.
+ *
+ * @param context - The canvas 2D rendering context to wrap
+ * @returns Proxied context that handles y-axis reversal automatically
+ *
+ * @remarks
+ * Standard HTML canvas uses a top-left origin with y-axis pointing down.
+ * This proxy inverts the y-axis to create a mathematical coordinate system
+ * with y-axis pointing up.
+ *
+ * The proxy intercepts drawing methods (fillRect, strokeRect, moveTo, lineTo, etc.)
+ * and automatically negates y-coordinates and height values. This allows you to
+ * work in mathematical coordinates while still rendering correctly.
+ *
+ * Special handling for complex methods:
+ * - drawImage with 9 args: Properly inverts source and destination rectangles
+ * - drawImage with 5 args: Adjusts for image height
+ * - All methods in {@link methodsToFlip}: Y-coordinates negated automatically
+ *
+ * @example
+ * ```typescript
+ * const canvas = document.querySelector('canvas');
+ * const ctx = canvas.getContext('2d');
+ * const flippedCtx = reverseYAxis(ctx);
+ *
+ * // Draw with mathematical coordinates (y-up)
+ * flippedCtx.fillRect(0, 0, 100, 100);  // Square in first quadrant
+ * flippedCtx.moveTo(0, 0);
+ * flippedCtx.lineTo(50, 100);           // Line going upward
+ * ```
+ *
+ * @category Canvas Position
+ * @see {@link methodsToFlip} for list of intercepted methods
+ * @see {@link invertYAxisForDrawImageWith9Args} for drawImage special handling
+ */
 export declare function reverseYAxis(context: CanvasRenderingContext2D): CanvasRenderingContext2D;
+/**
+ * Inverts y-coordinates for the 9-argument variant of drawImage.
+ *
+ * @param args - The arguments array for drawImage
+ * @returns Modified arguments with inverted y-coordinates
+ *
+ * @remarks
+ * The 9-argument drawImage signature is:
+ * drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+ *
+ * When inverting y-axis, we need to adjust:
+ * - sy (source y): Flip relative to image height
+ * - sHeight: Negate (height becomes negative in flipped space)
+ * - dy (destination y): Negate
+ * - dy offset: Subtract destination height
+ *
+ * This ensures images render correctly when the canvas y-axis is flipped.
+ *
+ * @example
+ * ```typescript
+ * // Original call (top-left origin):
+ * ctx.drawImage(img, 0, 0, 100, 100, 50, 50, 200, 200);
+ *
+ * // With flipped y-axis, this becomes:
+ * // sy = imageHeight - 0, sHeight = -100, dy = -50 - 200, dHeight = -200
+ * ```
+ *
+ * @category Canvas Position
+ * @see {@link reverseYAxis} for the main y-axis flipping proxy
+ */
 export declare function invertYAxisForDrawImageWith9Args(args: any[]): typeof args;

package/utils/coordinate-conversions/canvas-viewport.d.ts

@@ -0,0 +1,79 @@
+import { Point } from "@ue-too/math";
+/**
+ * Converts a point from canvas space to viewport space.
+ *
+ * @param pointInCanvas - The point in canvas coordinates to convert
+ * @param viewportOriginInCanvasSpace - The viewport's origin position in canvas coordinates (default: {0, 0})
+ * @param viewportHasFlippedYAxis - Whether viewport uses inverted y-axis (default: false)
+ * @returns The point in viewport coordinates
+ *
+ * @remarks
+ * Canvas and viewport coordinate systems can differ in two ways:
+ * 1. Origin position: Viewport origin may not be at canvas top-left (0,0)
+ * 2. Y-axis direction: Viewport may use mathematical coordinates (y-up) vs canvas (y-down)
+ *
+ * The conversion process:
+ * 1. Translate: Subtract viewport origin from point (shifts coordinate system)
+ * 2. Flip Y (if needed): Negate y-coordinate for mathematical coordinate system
+ *
+ * Common use case: Converting mouse click positions (canvas space) to positions
+ * relative to a centered viewport that uses mathematical coordinates.
+ *
+ * @example
+ * ```typescript
+ * // Canvas with centered viewport using mathematical coordinates
+ * const canvasPoint = { x: 400, y: 300 };  // Click near center
+ * const viewportOrigin = { x: 400, y: 300 }; // Viewport centered in 800x600 canvas
+ *
+ * // Convert to viewport space with flipped y-axis
+ * const viewportPoint = convertFromCanvas2ViewPort(
+ *   canvasPoint,
+ *   viewportOrigin,
+ *   true  // viewport has y-up
+ * );
+ * // Result: { x: 0, y: 0 } (center of viewport)
+ * ```
+ *
+ * @category Coordinate Conversion
+ * @see {@link convertFromViewPort2Canvas} for inverse conversion
+ */
+export declare function convertFromCanvas2ViewPort(pointInCanvas: Point, viewportOriginInCanvasSpace?: Point, viewportHasFlippedYAxis?: boolean): Point;
+/**
+ * Converts a point from viewport space to canvas space.
+ *
+ * @param pointInViewPort - The point in viewport coordinates to convert
+ * @param viewportOriginInCanvasSpace - The viewport's origin position in canvas coordinates (default: {0, 0})
+ * @param viewportHasFlippedYAxis - Whether viewport uses inverted y-axis (default: false)
+ * @returns The point in canvas coordinates
+ *
+ * @remarks
+ * This is the inverse of {@link convertFromCanvas2ViewPort}. It transforms points
+ * from viewport-relative coordinates back to absolute canvas coordinates.
+ *
+ * The conversion process:
+ * 1. Flip Y (if needed): Negate y-coordinate to convert from mathematical to canvas system
+ * 2. Translate: Add viewport origin to convert from relative to absolute position
+ *
+ * This is essential for rendering viewport-space objects (like shapes drawn by user)
+ * onto the actual canvas element.
+ *
+ * @example
+ * ```typescript
+ * // Viewport space point (centered viewport with y-up)
+ * const viewportPoint = { x: 100, y: 50 };  // 100 right, 50 up from viewport center
+ * const viewportOrigin = { x: 400, y: 300 }; // Viewport centered in canvas
+ *
+ * // Convert to canvas coordinates
+ * const canvasPoint = convertFromViewPort2Canvas(
+ *   viewportPoint,
+ *   viewportOrigin,
+ *   true  // viewport has y-up
+ * );
+ * // Result: { x: 500, y: 250 }
+ * // (400 + 100 = 500 in x, 300 - 50 = 250 in y due to flip)
+ * ```
+ *
+ * @category Coordinate Conversion
+ * @see {@link convertFromCanvas2ViewPort} for inverse conversion
+ */
+export declare function convertFromViewPort2Canvas(pointInViewPort: Point, viewportOriginInCanvasSpace?: Point, viewportHasFlippedYAxis?: boolean): Point;