@nightshadeui/canvas 2.11.0

package/dist/CanvasBoxSelect.d.ts

@@ -0,0 +1,25 @@
+import { Box } from '@nightshadeui/util';
+export declare class CanvasBoxSelect {
+    private config;
+    private inputState;
+    private objectRegistry;
+    private selection;
+    private space;
+    private selectionOriginPos;
+    private initialSelectionIds;
+    private objectBoxes;
+    isSelecting(): boolean;
+    onUiDragStart(ev: MouseEvent): void;
+    onUiDragMove(ev: MouseEvent): void;
+    onUiDragEnd(ev: MouseEvent): void;
+    getSelectionBox(): Box | null;
+    getSelectionStyle(): {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+    } | null;
+    private stopSelecting;
+    private captureObjectBoxes;
+    private updateSelection;
+}

package/dist/CanvasConfig.d.ts

@@ -0,0 +1,9 @@
+export interface CanvasConfigSpec {
+    autoCenter?: boolean;
+    allowMultiSelect?: boolean;
+}
+export declare class CanvasConfig {
+    autoCenter: boolean;
+    allowMultiSelect: boolean;
+    set(config: Partial<CanvasConfigSpec>): void;
+}

package/dist/CanvasController.d.ts

@@ -0,0 +1,29 @@
+import { Mesh } from 'mesh-ioc';
+import { CanvasBoxSelect } from './CanvasBoxSelect.js';
+import { CanvasConfig, CanvasConfigSpec } from './CanvasConfig.js';
+import { CanvasEvents } from './CanvasEvents.js';
+import { CanvasInputState } from './CanvasInputState.js';
+import { CanvasObjectRegistry } from './CanvasObjectRegistry.js';
+import { CanvasPan } from './CanvasPan.js';
+import { CanvasSelection } from './CanvasSelection.js';
+import { CanvasSpace } from './CanvasSpace.js';
+import { CanvasUiEvents } from './CanvasUiEvents.js';
+import { CanvasViewport } from './CanvasViewport.js';
+import { CanvasZoom } from './CanvasZoom.js';
+export declare class CanvasController {
+    mesh: Mesh;
+    boxSelect: CanvasBoxSelect;
+    config: CanvasConfig;
+    space: CanvasSpace;
+    viewport: CanvasViewport;
+    pan: CanvasPan;
+    events: CanvasEvents;
+    inputState: CanvasInputState;
+    objectRegistry: CanvasObjectRegistry;
+    selection: CanvasSelection;
+    uiEvents: CanvasUiEvents;
+    zoom: CanvasZoom;
+    constructor(config?: CanvasConfigSpec);
+    mount(viewportEl: HTMLElement): void;
+    unmount(): void;
+}

package/dist/CanvasEvents.d.ts

@@ -0,0 +1,13 @@
+import { Event } from 'nanoevent';
+import { CanvasObjectPos } from './CanvasObjectController.js';
+export declare class CanvasEvents {
+    mounted: Event<void>;
+    unmounted: Event<void>;
+    selectionChanged: Event<string[]>;
+    dragMove: Event<MouseEvent>;
+    dragEnd: Event<MouseEvent>;
+    objectPosUpdated: Event<{
+        objectId: string;
+        pos: CanvasObjectPos;
+    }>;
+}

package/dist/CanvasInputState.d.ts

@@ -0,0 +1,23 @@
+export declare class CanvasInputState {
+    lastMousePos: {
+        x: number;
+        y: number;
+    };
+    lmbPressed: boolean;
+    mmbPressed: boolean;
+    rmbPressed: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    private events;
+    private windowEvents;
+    init(): void;
+    get ctrlOrMetaKey(): boolean;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onKeyDown;
+    private onKeyUp;
+    private updateModifiers;
+}

package/dist/CanvasMove.d.ts

@@ -0,0 +1,13 @@
+export declare class CanvasMove {
+    private events;
+    private selection;
+    private objectRegistry;
+    private space;
+    private movingIds;
+    private moveOriginPos;
+    init(): void;
+    isMoving(objectId: string): boolean;
+    startMovingSelection(ev: MouseEvent): void;
+    private onDragMove;
+    stopMovingSelection(): void;
+}

package/dist/CanvasObjectController.d.ts

@@ -0,0 +1,98 @@
+import { Box, Point } from '@nightshadeui/util';
+import { CanvasResizeDirection, CanvasResizeMode } from './types.js';
+export interface CanvasObjectPos {
+    x: number;
+    y: number;
+    w?: number;
+    h?: number;
+}
+export declare class CanvasObjectController {
+    private config;
+    private events;
+    private selection;
+    private move;
+    private space;
+    objectId: string;
+    element: HTMLElement | null;
+    private selectable;
+    private movable;
+    private snapToGrid;
+    private resizable;
+    private bounds;
+    private pos;
+    private localPos;
+    private prevLocalPos;
+    private resizingDirection;
+    private resizingBounds;
+    constructor(objectId: string);
+    setElement(element: HTMLElement | null): void;
+    getPos(): CanvasObjectPos;
+    setPos(pos: CanvasObjectPos): void;
+    getBounds(): Box;
+    setBounds(bounds: Box): void;
+    isSelectable(): boolean;
+    setSelectable(selectable: boolean): void;
+    isSelected(): boolean;
+    setSelected(isSelected: boolean): void;
+    isMovable(): boolean;
+    setMovable(movable: boolean): void;
+    isSnapToGrid(): boolean;
+    setSnapToGrid(snapToGrid: boolean): void;
+    isResizable(): CanvasResizeMode;
+    setResizable(resizable: CanvasResizeMode): void;
+    getCanvasCoords(): CanvasObjectPos;
+    getStyle(): {
+        position: string;
+        left: string;
+        top: string;
+        width: string | undefined;
+        height: string | undefined;
+    };
+    isMoving(): boolean;
+    isResizing(): boolean;
+    commitNewPos(newPos: CanvasObjectPos): void;
+    /**
+     * Click handles selection
+     * Shift/Ctrl/Meta key allows multi-select, if allowed by canvas config
+     */
+    onUiClick(ev: MouseEvent): void;
+    /**
+     * Dragging starts moving selected objects, if allowed.
+     * If not selected, single selection is performed first, then dragging starts.
+     */
+    onUiDragStart(ev: MouseEvent): void;
+    /**
+     * Drag move is re-emitted to global canvas events, so that each selected object moves.
+     * CanvasMove will call onMoveOffset on objects that are currently moving.
+     */
+    onUiDragMove(ev: MouseEvent): void;
+    /**
+     * Drag end is re-emitted to global canvas events, so that each selected object stops moving.
+     * CanvasMove will call onMoveEnd on objects that are currently moving.
+     */
+    onUiDragEnd(ev: MouseEvent): void;
+    /**
+     * Move start is called by CanvasMove when selected objects starts moving.
+     * It saves the previous local position, so that the offset can be calculated.
+     */
+    onMoveStart(): void;
+    /**
+     * Move offset is called by CanvasMove when selected objects moves.
+     * It calculates the new local position based on the previous local position and the offset.
+     */
+    onMoveOffset(offset: Point): void;
+    /**
+     * Move end is called by CanvasMove when selected objects stops moving.
+     * It commits the new local position to the object.
+     */
+    onMoveEnd(): void;
+    startResizing(direction: CanvasResizeDirection): void;
+    onResizeMove(ev: MouseEvent): void;
+    onResizeEnd(): void;
+    getResizeDirections(): CanvasResizeDirection[];
+    private getObjectBounds;
+    private canResizeInDirection;
+    private recalcLocalPos;
+    private maybeRound;
+    private getResizingUpdates;
+}

package/dist/CanvasObjectRegistry.d.ts

@@ -0,0 +1,8 @@
+import { CanvasObjectController } from './CanvasObjectController.js';
+export declare class CanvasObjectRegistry {
+    private objects;
+    register(controller: CanvasObjectController): void;
+    unregister(objectId: string): void;
+    get(objectId: string): CanvasObjectController | null;
+    getAll(): CanvasObjectController[];
+}

package/dist/CanvasPan.d.ts

@@ -0,0 +1,11 @@
+export declare class CanvasPan {
+    private viewport;
+    private events;
+    private windowEvents;
+    private isPanning;
+    init(): void;
+    onMouseDown(ev: MouseEvent): void;
+    stopPanning(): void;
+    private onMouseMove;
+    private onMouseUp;
+}

package/dist/CanvasSelection.d.ts

@@ -0,0 +1,17 @@
+export declare class CanvasSelection {
+    selectedIds: Set<string>;
+    private events;
+    get size(): number;
+    getSelectedIds(): string[];
+    getFirst(): string;
+    isSelected(id: string): boolean;
+    isSingleSelected(id: string): boolean;
+    setSelectedIds(ids: Iterable<string>): void;
+    selectSingle(id: string): void;
+    addToSelection(...ids: string[]): void;
+    removeFromSelection(...ids: string[]): void;
+    toggleSelection(id: string): void;
+    deselectAll(): void;
+    private notifySelectionChanged;
+    setSelected(id: string, isSelected: boolean): void;
+}

package/dist/CanvasSpace.d.ts

@@ -0,0 +1,19 @@
+import { Box, Point } from '@nightshadeui/util';
+export declare class CanvasSpace {
+    zoom: number;
+    cellSize: number;
+    scrollPos: Point;
+    viewportBox: Box;
+    canvasOrigin: Point;
+    canvasSize: Point;
+    localToCanvas(pos: Point): Point;
+    canvasToLocal(pos: Point): Point;
+    viewportToCanvas(pos: Point): Point;
+    canvasToViewport(pos: Point): Point;
+    viewportToLocal(pos: Point): Point;
+    localToViewport(pos: Point): Point;
+    pageToViewport(pos: Point): Point;
+    pageToCanvas(pos: Point): Point;
+    pageToLocal(pos: Point): Point;
+    getViewportCenterInLocal(): Point;
+}

package/dist/CanvasUiEvents.d.ts

@@ -0,0 +1,18 @@
+export declare class CanvasUiEvents {
+    private events;
+    private inputState;
+    private windowEvents;
+    private lastMouseDownPos;
+    private lastMouseDownTarget;
+    private dragTarget;
+    private inClickVicinity;
+    private dragDistance;
+    init(): void;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onKeyDown;
+    private dispatchActivate;
+    private isDragAllowed;
+    private cloneMouseEvent;
+}

package/dist/CanvasViewport.d.ts

@@ -0,0 +1,39 @@
+import { Point } from '@nightshadeui/util';
+/**
+ * Coordinate systems:
+ * - page: MouseEvent pageX/pageY.
+ * - viewport: (0, 0) at viewport element top-left, unscaled.
+ * - canvas: (0, 0) at canvas content top-left, scaled by zoom.
+ * - local: (0, 0) at canvas origin, measured in cell units.
+ */
+export declare class CanvasViewport {
+    viewportEl: HTMLElement | null;
+    private windowEvents;
+    private config;
+    private space;
+    mount(viewportEl: HTMLElement): void;
+    destroy(): void;
+    getCanvasStyle(): {
+        background: string;
+        width: string;
+        height: string;
+        transformOrigin: string;
+        transform: string;
+    };
+    getOriginStyle(): {
+        left: string;
+        top: string;
+    };
+    getSizerStyle(): {
+        width: string;
+        height: string;
+    };
+    onScroll(): void;
+    centerOnOrigin(): void;
+    scrollBy(dx: number, dy: number): void;
+    scrollToLocalPoint(pos: Point): void;
+    private setViewportScroll;
+    private updateViewportBox;
+    private getViewportSize;
+    private recalcCanvasMetrics;
+}

package/dist/CanvasZoom.d.ts

@@ -0,0 +1,11 @@
+import { CanvasSpace } from './CanvasSpace.js';
+import { CanvasViewport } from './CanvasViewport.js';
+export declare class CanvasZoom {
+    viewport: CanvasViewport;
+    space: CanvasSpace;
+    onWheel(ev: WheelEvent): void;
+    setZoom(newZoom: number): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    private getClosestZoomStepIndex;
+}

package/dist/canvas.css

@@ -0,0 +1 @@
+@layer nightshade-components{.CanvasBoxSelect[data-v-9e8905e1]{--CanvasBoxSelect-color:var(--canvas-box-select-color,var(--color-primary-500));--CanvasBoxSelect-opacity:var(--canvas-box-select-opacity,.1);z-index:20;pointer-events:none;position:absolute;inset:0}.Box[data-v-9e8905e1]{border:1px solid var(--CanvasBoxSelect-color);position:absolute}.Box[data-v-9e8905e1]:before{content:"";background:var(--CanvasBoxSelect-color);opacity:var(--CanvasBoxSelect-opacity);position:absolute;inset:0}.ResizeHandle[data-v-c83350e5]{--canvas-resize-handle-size:var(--sp2);--canvas-resize-handle-offset:calc(-.5 * var(--canvas-resize-handle-size));z-index:3;position:absolute}.ResizeHandle-n[data-v-c83350e5]{top:var(--canvas-resize-handle-offset);left:var(--canvas-resize-handle-offset);right:var(--canvas-resize-handle-offset);height:var(--canvas-resize-handle-size);cursor:ns-resize}.ResizeHandle-ne[data-v-c83350e5]{top:var(--canvas-resize-handle-offset);right:var(--canvas-resize-handle-offset);width:var(--canvas-resize-handle-size);height:var(--canvas-resize-handle-size);cursor:nesw-resize;z-index:4}.ResizeHandle-e[data-v-c83350e5]{top:var(--canvas-resize-handle-offset);bottom:var(--canvas-resize-handle-offset);right:var(--canvas-resize-handle-offset);width:var(--canvas-resize-handle-size);cursor:ew-resize}.ResizeHandle-se[data-v-c83350e5]{bottom:var(--canvas-resize-handle-offset);right:var(--canvas-resize-handle-offset);width:var(--canvas-resize-handle-size);height:var(--canvas-resize-handle-size);cursor:nwse-resize;z-index:4}.ResizeHandle-s[data-v-c83350e5]{bottom:var(--canvas-resize-handle-offset);left:var(--canvas-resize-handle-offset);right:var(--canvas-resize-handle-offset);height:var(--canvas-resize-handle-size);cursor:ns-resize}.ResizeHandle-sw[data-v-c83350e5]{bottom:var(--canvas-resize-handle-offset);left:var(--canvas-resize-handle-offset);width:var(--canvas-resize-handle-size);height:var(--canvas-resize-handle-size);cursor:nesw-resize;z-index:4}.ResizeHandle-w[data-v-c83350e5]{top:var(--canvas-resize-handle-offset);bottom:var(--canvas-resize-handle-offset);left:var(--canvas-resize-handle-offset);width:var(--canvas-resize-handle-size);cursor:ew-resize}.ResizeHandle-nw[data-v-c83350e5]{top:var(--canvas-resize-handle-offset);left:var(--canvas-resize-handle-offset);width:var(--canvas-resize-handle-size);height:var(--canvas-resize-handle-size);cursor:nwse-resize;z-index:4}.CanvasView[data-v-52407cb1]{-webkit-user-select:none;user-select:none;display:flex;position:relative}.Viewport[data-v-52407cb1]{z-index:1;cursor:crosshair;flex:1;position:relative;overflow:auto}.Sizer[data-v-52407cb1]{z-index:0;position:relative}.Canvas[data-v-52407cb1]{position:absolute;top:0;left:0;overflow:hidden}.Origin[data-v-52407cb1]{position:absolute;transform:translate(-50%,-50%)}.DebugCoords[data-v-54d4bb42]{z-index:10;margin:var(--sp);padding:var(--sp);pointer-events:none;font-family:var(--font-monospace);font-size:var(--font-size-s);border:var(--input-border-size) solid var(--color-base-200);border-radius:var(--border-radius);background:var(--color-base-0);position:absolute;top:0;left:0}.Row[data-v-54d4bb42]{white-space:nowrap}}