neogestify-ui-components 1.2.21 → 2.0.0

package/dist/components/VenueMapEditor/index.d.ts

@@ -0,0 +1,202 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { WheelEvent, MouseEvent } from 'react';
+
+type WallMaterial = 'concrete' | 'brick' | 'glass' | 'drywall' | 'wood';
+type AreaShape = 'rect' | 'polygon';
+type ElementShape = 'rect' | 'circle' | 'arrow' | 'path';
+type ToolMode = 'SELECT' | 'WALL' | 'PLACE' | 'PAN' | 'ERASE';
+interface WallNode {
+    id: string;
+    x: number;
+    y: number;
+}
+interface Wall {
+    id: string;
+    nodeAId: string;
+    nodeBId: string;
+    /** Thickness in canvas px */
+    thickness: number;
+    material: WallMaterial;
+}
+interface MapElement {
+    id: string;
+    /** e.g. 'TABLE_ROUND', 'PARKING_SPOT', 'DOOR' */
+    type: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Rotation in degrees */
+    rotation: number;
+    label?: string;
+    metadata?: Record<string, unknown>;
+}
+interface FloorArea {
+    shape: AreaShape;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    points?: [number, number][];
+}
+interface Floor {
+    id: string;
+    name: string;
+    order: number;
+    area: FloorArea;
+    wallNodes: WallNode[];
+    walls: Wall[];
+    elements: MapElement[];
+}
+interface VenueMap {
+    id: string;
+    name: string;
+    floors: Floor[];
+    /** Custom element libraries imported by the user; persisted with the map. */
+    libraries?: ElementLibrary;
+}
+interface ElementTypeDef {
+    id: string;
+    label: string;
+    shape: ElementShape;
+    defaultWidth: number;
+    defaultHeight: number;
+    /** SVG fill color */
+    color: string;
+    strokeColor: string;
+    /** Emoji or icon name */
+    icon?: string;
+    /**
+     * Raw SVG path `d` attribute for `shape === 'path'`.
+     * Define the path in the coordinate space of `viewBox` (default `"0 0 100 100"`).
+     * It will be automatically scaled to fit the element's `width × height` bounding box.
+     *
+     * @example
+     * // A 5-pointed star in a 100×100 viewBox
+     * svgPath: "M50 5 L61 35 L95 35 L68 57 L79 91 L50 70 L21 91 L32 57 L5 35 L39 35 Z"
+     */
+    svgPath?: string;
+    /**
+     * ViewBox for `svgPath`. Format: `"minX minY width height"`.
+     * Defaults to `"0 0 100 100"` when omitted.
+     */
+    viewBox?: string;
+}
+interface DomainConfig {
+    id: string;
+    name: string;
+    elementTypes: ElementTypeDef[];
+}
+interface ElementGroup {
+    name: string;
+    objects: ElementTypeDef[];
+}
+/** A library JSON file: top-level keys are group IDs. */
+type ElementLibrary = Record<string, ElementGroup>;
+interface ElementStatus {
+    elementId: string;
+    status: 'free' | 'occupied' | 'reserved' | 'disabled';
+    tooltip?: string;
+}
+interface VenueMapEditorProps {
+    /**
+     * Optional built-in element type catalog.
+     * If omitted the palette is empty until the user imports a library JSON.
+     */
+    domainConfig?: DomainConfig;
+    /**
+     * Map to render. When this prop changes (by reference) from outside the
+     * component, the editor resets its history to the new map — allowing the
+     * parent to hydrate the editor from an API or local storage without causing
+     * a render loop (changes made inside the editor that are echoed back via
+     * `onChange` are detected and ignored).
+     */
+    initialMap?: VenueMap;
+    /** Called every time the internal map state changes. */
+    onChange?: (map: VenueMap) => void;
+    width?: string | number;
+    height?: string | number;
+    gridSize?: number;
+    showGrid?: boolean;
+    snapToGrid?: boolean;
+    readOnly?: boolean;
+    /** Viewer-only mode: pan and zoom are allowed but nothing can be edited. */
+    fixed?: boolean;
+    elementStatus?: ElementStatus[];
+    onElementClick?: (element: MapElement) => void;
+    /**
+     * Per-type click handlers active in viewer/fixed mode.
+     * Keys are element type IDs (e.g. `'TABLE_ROUND'`).
+     * When an element is clicked, its type-specific handler fires first;
+     * if none is registered, `onElementClick` is used as fallback.
+     *
+     * @example
+     * ```tsx
+     * <VenueMapViewer
+     *   onElementTypeClick={{
+     *     TABLE_ROUND: (el) => openReservation(el.id),
+     *     CHAIR:       (el) => showInfo(el),
+     *   }}
+     * />
+     * ```
+     */
+    onElementTypeClick?: Record<string, (element: MapElement) => void>;
+}
+type VenueMapViewerProps = VenueMapEditorProps;
+
+declare function VenueMapEditor({ domainConfig, initialMap, onChange, width, height, gridSize, showGrid: showGridProp, snapToGrid: snapEnabled, readOnly, fixed, elementStatus, onElementClick, onElementTypeClick, }: VenueMapEditorProps): react_jsx_runtime.JSX.Element;
+
+declare function VenueMapViewer({ elementStatus, onElementClick, ...rest }: VenueMapViewerProps): react_jsx_runtime.JSX.Element;
+
+interface PaletteGroup {
+    id: string;
+    name: string;
+    /** True for the built-in domain config group; false for imported library groups. */
+    isBase?: boolean;
+    types: ElementTypeDef[];
+}
+
+interface PanZoomState {
+    panX: number;
+    panY: number;
+    zoom: number;
+}
+declare function usePanZoom(initialZoom?: number, leftClickPan?: boolean): {
+    state: PanZoomState;
+    setState: React.Dispatch<React.SetStateAction<PanZoomState>>;
+    isPanning: boolean;
+    handleWheel: (e: WheelEvent<SVGSVGElement>) => void;
+    handleMouseDown: (e: MouseEvent<SVGSVGElement>) => void;
+    handleMouseMove: (e: MouseEvent<SVGSVGElement>) => void;
+    handleMouseUp: (_e: MouseEvent<SVGSVGElement>) => void;
+    handleMouseLeave: () => void;
+    zoomBy: (factor: number, cx?: number, cy?: number) => void;
+    resetView: () => void;
+};
+
+/** Generates a globally-unique id using the Web Crypto API. */
+declare const genId: () => string;
+
+/** Snap a single value to the nearest grid line. */
+declare const snapToGrid: (value: number, gridSize: number) => number;
+/** Snap a 2-D point to the grid if `enabled`, otherwise return it unchanged. */
+declare const snapPoint: (x: number, y: number, gridSize: number, enabled: boolean) => {
+    x: number;
+    y: number;
+};
+/**
+ * Find the closest WallNode within `threshold` canvas units.
+ * Returns the node's id and position, or null when nothing is close enough.
+ */
+declare const findNearestNode: (x: number, y: number, nodes: Array<{
+    id: string;
+    x: number;
+    y: number;
+}>, threshold: number) => {
+    id: string;
+    x: number;
+    y: number;
+} | null;
+
+export { type AreaShape, type DomainConfig, type ElementGroup, type ElementLibrary, type ElementShape, type ElementStatus, type ElementTypeDef, type Floor, type FloorArea, type MapElement, type PaletteGroup, type PanZoomState, type ToolMode, type VenueMap, VenueMapEditor, type VenueMapEditorProps, VenueMapViewer, type VenueMapViewerProps, type Wall, type WallMaterial, type WallNode, findNearestNode, genId, snapPoint, snapToGrid, usePanZoom };