neogestify-ui-components 1.2.21 → 2.0.1

package/src/components/VenueMapEditor/hooks/useHistory.ts

@@ -0,0 +1,74 @@
+import { useState, useCallback } from 'react';
+import type { VenueMap } from '../types';
+
+const MAX_HISTORY = 50;
+
+interface HistoryState {
+  past: VenueMap[];
+  present: VenueMap;
+  future: VenueMap[];
+}
+
+/**
+ * Undo/redo stack for VenueMap snapshots.
+ *
+ * - `push(next)`  : commit a new state (clears redo stack)
+ * - `undo()`      : step back one snapshot
+ * - `redo()`      : step forward one snapshot
+ * - `replace(next)`: update present WITHOUT pushing to history (e.g. live-drag)
+ */
+export function useHistory(initial: VenueMap) {
+  const [history, setHistory] = useState<HistoryState>({
+    past: [],
+    present: initial,
+    future: [],
+  });
+
+  /** Commit a new state — adds present to `past`, clears `future`. */
+  const push = useCallback((next: VenueMap) => {
+    setHistory(h => ({
+      past: [...h.past.slice(-(MAX_HISTORY - 1)), h.present],
+      present: next,
+      future: [],
+    }));
+  }, []);
+
+  /** Update present WITHOUT touching the undo stack (for live dragging). */
+  const replace = useCallback((next: VenueMap) => {
+    setHistory(h => ({ ...h, present: next }));
+  }, []);
+
+  const undo = useCallback(() => {
+    setHistory(h => {
+      if (h.past.length === 0) return h;
+      const previous = h.past[h.past.length - 1];
+      return {
+        past: h.past.slice(0, -1),
+        present: previous,
+        future: [h.present, ...h.future],
+      };
+    });
+  }, []);
+
+  const redo = useCallback(() => {
+    setHistory(h => {
+      if (h.future.length === 0) return h;
+      const next = h.future[0];
+      return {
+        past: [...h.past, h.present],
+        present: next,
+        future: h.future.slice(1),
+      };
+    });
+  }, []);
+
+  return {
+    map: history.present,
+    canUndo: history.past.length > 0,
+    canRedo: history.future.length > 0,
+    push,
+    replace,
+    undo,
+    redo,
+  };
+}

package/src/components/VenueMapEditor/hooks/usePanZoom.ts

@@ -0,0 +1,114 @@
+import { useState, useCallback, useRef } from 'react';
+import type { WheelEvent as ReactWheelEvent, MouseEvent as ReactMouseEvent } from 'react';
+
+export interface PanZoomState {
+  panX: number;
+  panY: number;
+  zoom: number;
+}
+
+const ZOOM_MIN = 0.1;
+const ZOOM_MAX = 10;
+const ZOOM_FACTOR = 1.1;
+
+export function usePanZoom(initialZoom = 1, leftClickPan = false) {
+  const [state, setState] = useState<PanZoomState>({
+    panX: 80,
+    panY: 80,
+    zoom: initialZoom,
+  });
+
+  /** Track whether a middle-click pan is in progress (ref = no re-render). */
+  const isPanningRef = useRef(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const lastPosRef = useRef({ x: 0, y: 0 });
+
+  // ── Wheel zoom ──────────────────────────────────────────────────────────────
+  const handleWheel = useCallback((e: ReactWheelEvent<SVGSVGElement>) => {
+    // NOTE: e.preventDefault() is intentionally NOT called here.
+    // React registers synthetic wheel events as passive, so calling preventDefault
+    // would throw a warning and be ignored. The non-passive native listener added
+    // in EditorCanvas handles scroll prevention instead.
+    const factor = e.deltaY < 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+
+    // Read all event values NOW — before setState — because e.currentTarget
+    // is nulled out by React after the event handler returns (event pooling).
+    const svgEl = e.currentTarget as SVGSVGElement;
+    const rect = svgEl.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+
+    setState(prev => {
+      const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, prev.zoom * factor));
+      // Keep the canvas point under the cursor fixed.
+      const canvasX = (mouseX - prev.panX) / prev.zoom;
+      const canvasY = (mouseY - prev.panY) / prev.zoom;
+      return {
+        panX: mouseX - canvasX * newZoom,
+        panY: mouseY - canvasY * newZoom,
+        zoom: newZoom,
+      };
+    });
+  }, []);
+
+  // ── Pan (middle-click, or left-click when leftClickPan=true) ────────────────
+  const handleMouseDown = useCallback((e: ReactMouseEvent<SVGSVGElement>) => {
+    const valid = leftClickPan ? (e.button === 0 || e.button === 1) : e.button === 1;
+    if (!valid) return;
+    e.preventDefault();
+    isPanningRef.current = true;
+    setIsPanning(true);
+    lastPosRef.current = { x: e.clientX, y: e.clientY };
+  }, [leftClickPan]);
+
+  const handleMouseMove = useCallback((e: ReactMouseEvent<SVGSVGElement>) => {
+    if (!isPanningRef.current) return;
+    const dx = e.clientX - lastPosRef.current.x;
+    const dy = e.clientY - lastPosRef.current.y;
+    lastPosRef.current = { x: e.clientX, y: e.clientY };
+    setState(prev => ({ ...prev, panX: prev.panX + dx, panY: prev.panY + dy }));
+  }, []);
+
+  const stopPan = useCallback((_e: ReactMouseEvent<SVGSVGElement>) => {
+    if (!isPanningRef.current) return;
+    isPanningRef.current = false;
+    setIsPanning(false);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    if (isPanningRef.current) {
+      isPanningRef.current = false;
+      setIsPanning(false);
+    }
+  }, []);
+
+  // ── Programmatic zoom ───────────────────────────────────────────────────────
+  const zoomBy = useCallback((factor: number, cx?: number, cy?: number) => {
+    setState(prev => {
+      const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, prev.zoom * factor));
+      if (cx !== undefined && cy !== undefined) {
+        const canvasX = (cx - prev.panX) / prev.zoom;
+        const canvasY = (cy - prev.panY) / prev.zoom;
+        return { panX: cx - canvasX * newZoom, panY: cy - canvasY * newZoom, zoom: newZoom };
+      }
+      return { ...prev, zoom: newZoom };
+    });
+  }, []);
+
+  const resetView = useCallback(() => {
+    setState({ panX: 80, panY: 80, zoom: 1 });
+  }, []);
+
+  return {
+    state,
+    setState,
+    isPanning,
+    handleWheel,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp: stopPan,
+    handleMouseLeave,
+    zoomBy,
+    resetView,
+  };
+}

package/src/components/VenueMapEditor/hooks/useSelection.ts

@@ -0,0 +1,42 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Selection state for map elements.
+ *
+ * - `select(id, multi)` : select an element; if `multi`, toggle it
+ * - `selectSet(ids)`    : replace selection with a set of ids
+ * - `clear()`           : deselect everything
+ * - `isSelected(id)`    : check membership
+ */
+export function useSelection() {
+  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
+
+  const select = useCallback((id: string, multi = false) => {
+    setSelectedIds(prev => {
+      if (multi) {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      }
+      // Single select: only switch if not already the sole selection
+      if (prev.size === 1 && prev.has(id)) return prev;
+      return new Set([id]);
+    });
+  }, []);
+
+  const selectSet = useCallback((ids: string[]) => {
+    setSelectedIds(new Set(ids));
+  }, []);
+
+  const clear = useCallback(() => {
+    setSelectedIds(prev => (prev.size === 0 ? prev : new Set()));
+  }, []);
+
+  const isSelected = useCallback(
+    (id: string) => selectedIds.has(id),
+    [selectedIds],
+  );
+
+  return { selectedIds, select, selectSet, clear, isSelected };
+}

package/src/components/VenueMapEditor/index.ts

@@ -0,0 +1,34 @@
+// Main component
+export { VenueMapEditor } from './VenueMapEditor';
+export { VenueMapViewer } from './VenueMapViewer';
+
+// Types
+export type {
+  WallMaterial,
+  AreaShape,
+  ElementShape,
+  ToolMode,
+  WallNode,
+  Wall,
+  MapElement,
+  FloorArea,
+  Floor,
+  VenueMap,
+  ElementTypeDef,
+  DomainConfig,
+  ElementGroup,
+  ElementLibrary,
+  ElementStatus,
+  VenueMapEditorProps,
+  VenueMapViewerProps,
+} from './types';
+
+export type { PaletteGroup } from './components/Toolbar';
+
+// Hooks (for advanced consumers)
+export { usePanZoom } from './hooks/usePanZoom';
+export type { PanZoomState } from './hooks/usePanZoom';
+
+// Utils (for advanced consumers)
+export { genId } from './utils/idGen';
+export { snapToGrid, snapPoint, findNearestNode } from './utils/snapUtils';

package/src/components/VenueMapEditor/types.ts

@@ -0,0 +1,173 @@
+// ─── Domain primitives ───────────────────────────────────────────────────────
+
+export type WallMaterial = 'concrete' | 'brick' | 'glass' | 'drywall' | 'wood';
+export type AreaShape = 'rect' | 'polygon';
+export type ElementShape = 'rect' | 'circle' | 'arrow' | 'path';
+export type ToolMode = 'SELECT' | 'WALL' | 'PLACE' | 'PAN' | 'ERASE';
+
+// ─── Wall graph ───────────────────────────────────────────────────────────────
+
+export interface WallNode {
+  id: string;
+  x: number;
+  y: number;
+}
+
+export interface Wall {
+  id: string;
+  nodeAId: string;
+  nodeBId: string;
+  /** Thickness in canvas px */
+  thickness: number;
+  material: WallMaterial;
+}
+
+// ─── Map elements ─────────────────────────────────────────────────────────────
+
+export 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>;
+}
+
+// ─── Floor / Venue ────────────────────────────────────────────────────────────
+
+export interface FloorArea {
+  shape: AreaShape;
+  // rect
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  // polygon
+  points?: [number, number][];
+}
+
+export interface Floor {
+  id: string;
+  name: string;
+  order: number;
+  area: FloorArea;
+  wallNodes: WallNode[];
+  walls: Wall[];
+  elements: MapElement[];
+}
+
+export interface VenueMap {
+  id: string;
+  name: string;
+  floors: Floor[];
+  /** Custom element libraries imported by the user; persisted with the map. */
+  libraries?: ElementLibrary;
+}
+
+// ─── Domain config ────────────────────────────────────────────────────────────
+
+export 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;
+}
+
+export interface DomainConfig {
+  id: string;
+  name: string;
+  elementTypes: ElementTypeDef[];
+}
+
+// ─── Custom element libraries ─────────────────────────────────────────────────
+
+export interface ElementGroup {
+  name: string;
+  objects: ElementTypeDef[];
+}
+
+/** A library JSON file: top-level keys are group IDs. */
+export type ElementLibrary = Record<string, ElementGroup>;
+
+// ─── Viewer status ────────────────────────────────────────────────────────────
+
+export interface ElementStatus {
+  elementId: string;
+  status: 'free' | 'occupied' | 'reserved' | 'disabled';
+  tooltip?: string;
+}
+
+// ─── Editor props ─────────────────────────────────────────────────────────────
+
+export 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>;
+}
+
+export type VenueMapViewerProps = VenueMapEditorProps;

package/src/components/VenueMapEditor/utils/idGen.ts

@@ -0,0 +1,2 @@
+/** Generates a globally-unique id using the Web Crypto API. */
+export const genId = (): string => crypto.randomUUID();

package/src/components/VenueMapEditor/utils/snapUtils.ts

@@ -0,0 +1,38 @@
+/** Snap a single value to the nearest grid line. */
+export const snapToGrid = (value: number, gridSize: number): number =>
+  Math.round(value / gridSize) * gridSize;
+
+/** Snap a 2-D point to the grid if `enabled`, otherwise return it unchanged. */
+export const snapPoint = (
+  x: number,
+  y: number,
+  gridSize: number,
+  enabled: boolean,
+): { x: number; y: number } => ({
+  x: enabled ? snapToGrid(x, gridSize) : x,
+  y: enabled ? snapToGrid(y, gridSize) : y,
+});
+
+/**
+ * Find the closest WallNode within `threshold` canvas units.
+ * Returns the node's id and position, or null when nothing is close enough.
+ */
+export const findNearestNode = (
+  x: number,
+  y: number,
+  nodes: Array<{ id: string; x: number; y: number }>,
+  threshold: number,
+): { id: string; x: number; y: number } | null => {
+  let best: { id: string; x: number; y: number } | null = null;
+  let bestDist = threshold;
+
+  for (const node of nodes) {
+    const dist = Math.hypot(node.x - x, node.y - y);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = node;
+    }
+  }
+
+  return best;
+};

package/src/components/VenueMapEditor/utils/wallGeometry.ts

@@ -0,0 +1,83 @@
+// ─── Vector math ─────────────────────────────────────────────────────────────
+
+type Vec2 = { x: number; y: number };
+
+function norm(v: Vec2): Vec2 {
+  const len = Math.hypot(v.x, v.y);
+  return len < 1e-10 ? { x: 1, y: 0 } : { x: v.x / len, y: v.y / len };
+}
+
+/** 90° CCW rotation (left-normal of a forward direction). */
+function perp(v: Vec2): Vec2 { return { x: -v.y, y: v.x }; }
+
+function add(a: Vec2, b: Vec2): Vec2 { return { x: a.x + b.x, y: a.y + b.y }; }
+
+function scale(v: Vec2, s: number): Vec2 { return { x: v.x * s, y: v.y * s }; }
+
+/**
+ * Intersect two infinite lines:  p1 + s·d1  and  p2 + t·d2.
+ * Returns null when the lines are parallel.
+ */
+function lineIntersect(p1: Vec2, d1: Vec2, p2: Vec2, d2: Vec2): Vec2 | null {
+  const det = d1.x * d2.y - d1.y * d2.x;
+  if (Math.abs(det) < 1e-8) return null;
+  const dx = p2.x - p1.x, dy = p2.y - p1.y;
+  const s = (dx * d2.y - dy * d2.x) / det;
+  return { x: p1.x + s * d1.x, y: p1.y + s * d1.y };
+}
+
+// ─── Wall polygon ─────────────────────────────────────────────────────────────
+
+/**
+ * Compute the closed SVG path for a single wall segment (ax,ay)→(bx,by).
+ *
+ * Miter joints are applied at either end when an adjacent wall direction is
+ * provided (exactly one other wall sharing that node).  With no adjacent wall
+ * the end cap is a flat (square) termination.
+ *
+ * @param adjDirAtA - normalised direction of the OTHER wall leaving nodeA
+ * @param adjDirAtB - normalised direction of the OTHER wall leaving nodeB
+ */
+export function wallSegmentPath(
+  ax: number, ay: number,
+  bx: number, by: number,
+  thickness: number,
+  adjDirAtA: Vec2 | null,
+  adjDirAtB: Vec2 | null,
+): string {
+  const dir = norm({ x: bx - ax, y: by - ay });
+  const n   = perp(dir);
+  const h   = thickness / 2;
+  const A: Vec2 = { x: ax, y: ay };
+  const B: Vec2 = { x: bx, y: by };
+
+  // Default (un-mitered) corners
+  let lA = add(A, scale(n,  h));
+  let rA = add(A, scale(n, -h));
+  let lB = add(B, scale(n,  h));
+  let rB = add(B, scale(n, -h));
+
+  // Miter at A:
+  // Intersect [left-of-W at A going in dir] with [left-of-W2 at A going in adjDirAtA]
+  if (adjDirAtA) {
+    const n2 = perp(adjDirAtA);
+    const mL = lineIntersect(add(A, scale(n,  h)), dir, add(A, scale(n2,  h)), adjDirAtA);
+    const mR = lineIntersect(add(A, scale(n, -h)), dir, add(A, scale(n2, -h)), adjDirAtA);
+    if (mL) lA = mL;
+    if (mR) rA = mR;
+  }
+
+  // Miter at B:
+  // Intersect [left-of-W at B going in dir] with [left-of-W2 at B going in adjDirAtB]
+  if (adjDirAtB) {
+    const n2 = perp(adjDirAtB);
+    const mL = lineIntersect(add(B, scale(n,  h)), dir, add(B, scale(n2,  h)), adjDirAtB);
+    const mR = lineIntersect(add(B, scale(n, -h)), dir, add(B, scale(n2, -h)), adjDirAtB);
+    if (mL) lB = mL;
+    if (mR) rB = mR;
+  }
+
+  return `M ${lA.x} ${lA.y} L ${lB.x} ${lB.y} L ${rB.x} ${rB.y} L ${rA.x} ${rA.y} Z`;
+}
+
+export type { Vec2 };