neogestify-ui-components 1.2.21 → 2.0.1

package/src/components/VenueMapEditor/components/PropertiesPanel.tsx

@@ -0,0 +1,198 @@
+import { useCallback } from 'react';
+import type { ChangeEvent } from 'react';
+import type { MapElement, ElementTypeDef } from '../types';
+
+interface PropertiesPanelProps {
+  elements: MapElement[];
+  typeDefs: Map<string, ElementTypeDef>;
+  onChangeLabel: (id: string, label: string) => void;
+  onChangeGeometry: (id: string, x: number, y: number, w: number, h: number, r: number) => void;
+  onDelete: (ids: string[]) => void;
+  onDuplicate: (ids: string[]) => void;
+}
+
+// ─── Small numeric field ──────────────────────────────────────────────────────
+
+interface NumFieldProps {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+  step?: number;
+}
+
+function NumField({ label, value, onChange, step = 1 }: NumFieldProps) {
+  return (
+    <label className="flex flex-col gap-0.5">
+      <span className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">
+        {label}
+      </span>
+      <input
+        type="number"
+        value={Math.round(value)}
+        step={step}
+        onChange={e => onChange(Number(e.target.value))}
+        className="w-full border border-slate-200 rounded px-1.5 py-1 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-400 bg-white"
+      />
+    </label>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function PropertiesPanel({
+  elements,
+  typeDefs,
+  onChangeLabel,
+  onChangeGeometry,
+  onDelete,
+  onDuplicate,
+}: PropertiesPanelProps) {
+  const count = elements.length;
+
+  const handleLabelChange = useCallback(
+    (id: string, e: ChangeEvent<HTMLInputElement>) => onChangeLabel(id, e.target.value),
+    [onChangeLabel],
+  );
+
+  if (count === 0) return null;
+
+  // ── Multi-selection ───────────────────────────────────────────────────────
+  if (count > 1) {
+    const ids = elements.map(el => el.id);
+    return (
+      <div className="w-56 shrink-0 border-l border-slate-200 bg-white flex flex-col">
+        <div className="px-3 py-2 border-b border-slate-100 text-xs font-semibold text-slate-500 uppercase tracking-wide">
+          Propiedades
+        </div>
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 p-4 text-center">
+          <span className="text-2xl font-bold text-slate-700">{count}</span>
+          <span className="text-xs text-slate-400">elementos seleccionados</span>
+        </div>
+        <div className="px-3 pb-3 flex flex-col gap-2">
+          <button
+            onClick={() => onDuplicate(ids)}
+            className="w-full text-xs px-3 py-1.5 rounded border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors"
+          >
+            Duplicar selección
+          </button>
+          <button
+            onClick={() => onDelete(ids)}
+            className="w-full text-xs px-3 py-1.5 rounded bg-red-50 border border-red-200 text-red-600 hover:bg-red-100 transition-colors"
+          >
+            Eliminar selección
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Single selection ──────────────────────────────────────────────────────
+  const el = elements[0];
+  const typeDef = typeDefs.get(el.type);
+
+  const setGeom = (patch: Partial<{ x: number; y: number; w: number; h: number; r: number }>) => {
+    onChangeGeometry(
+      el.id,
+      patch.x ?? el.x,
+      patch.y ?? el.y,
+      patch.w ?? el.width,
+      patch.h ?? el.height,
+      patch.r ?? el.rotation,
+    );
+  };
+
+  return (
+    <div className="w-56 shrink-0 border-l border-slate-200 bg-white flex flex-col overflow-y-auto">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-slate-100 text-xs font-semibold text-slate-500 uppercase tracking-wide">
+        Propiedades
+      </div>
+
+      <div className="flex-1 flex flex-col gap-4 p-3">
+        {/* Type badge */}
+        {typeDef && (
+          <div className="flex items-center gap-2">
+            <span
+              className="w-3.5 h-3.5 rounded-sm shrink-0 border"
+              style={{ background: typeDef.color, borderColor: typeDef.strokeColor }}
+            />
+            <span className="text-xs font-medium text-slate-700 truncate">{typeDef.label}</span>
+          </div>
+        )}
+
+        {/* Label */}
+        <label className="flex flex-col gap-0.5">
+          <span className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">
+            Etiqueta
+          </span>
+          <input
+            type="text"
+            value={el.label ?? ''}
+            placeholder={typeDef?.label ?? ''}
+            onChange={e => handleLabelChange(el.id, e)}
+            className="w-full border border-slate-200 rounded px-1.5 py-1 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-400 bg-white"
+          />
+        </label>
+
+        {/* Position */}
+        <div className="grid grid-cols-2 gap-2">
+          <NumField label="X" value={el.x} onChange={v => setGeom({ x: v })} />
+          <NumField label="Y" value={el.y} onChange={v => setGeom({ y: v })} />
+        </div>
+
+        {/* Size */}
+        <div className="grid grid-cols-2 gap-2">
+          <NumField label="Ancho" value={el.width}  onChange={v => setGeom({ w: Math.max(1, v) })} />
+          <NumField label="Alto"  value={el.height} onChange={v => setGeom({ h: Math.max(1, v) })} />
+        </div>
+
+        {/* Rotation */}
+        <div className="grid grid-cols-2 gap-2">
+          <NumField label="Rotación °" value={el.rotation} onChange={v => setGeom({ r: v })} step={15} />
+          <label className="flex flex-col gap-0.5">
+            <span className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">
+              &nbsp;
+            </span>
+            <button
+              onClick={() => setGeom({ r: 0 })}
+              className="border border-slate-200 rounded px-1.5 py-1 text-xs text-slate-500 hover:bg-slate-50 transition-colors"
+            >
+              Resetear
+            </button>
+          </label>
+        </div>
+
+        {/* Metadata (read-only key/value list) */}
+        {el.metadata && Object.keys(el.metadata).length > 0 && (
+          <div className="flex flex-col gap-1">
+            <span className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">
+              Metadata
+            </span>
+            {Object.entries(el.metadata).map(([k, v]) => (
+              <div key={k} className="flex justify-between text-xs text-slate-500">
+                <span className="truncate">{k}</span>
+                <span className="ml-2 text-slate-400 truncate">{String(v)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="px-3 pb-3 flex flex-col gap-2 border-t border-slate-100 pt-3">
+        <button
+          onClick={() => onDuplicate([el.id])}
+          className="w-full text-xs px-3 py-1.5 rounded border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors"
+        >
+          Duplicar (Ctrl+D)
+        </button>
+        <button
+          onClick={() => onDelete([el.id])}
+          className="w-full text-xs px-3 py-1.5 rounded bg-red-50 border border-red-200 text-red-600 hover:bg-red-100 transition-colors"
+        >
+          Eliminar
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/VenueMapEditor/components/Toolbar.tsx

@@ -0,0 +1,254 @@
+import type { ReactNode } from 'react';
+import {
+  IconCursor, IconGrid, IconHand, IconReset, IconZoomIn, IconZoomOut,
+  IconUndo, IconRedo, IconPlace, IconErase, IconWall,
+  IconDownload, IconUpload, IconLayers,
+} from '../../icons';
+import type { ToolMode, ElementTypeDef, AreaShape } from '../types';
+
+// ─── ToolButton ───────────────────────────────────────────────────────────────
+
+interface ToolButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  title: string;
+  onClick: () => void;
+  children: ReactNode;
+}
+
+function ToolButton({ active, disabled, title, onClick, children }: ToolButtonProps) {
+  return (
+    <button
+      title={title}
+      onClick={onClick}
+      disabled={disabled}
+      className={[
+        'flex items-center justify-center w-8 h-8 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed',
+        active
+          ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-400'
+          : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800',
+      ].join(' ')}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Sep() {
+  return <div className="w-px h-6 bg-slate-200 mx-1" />;
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+export interface PaletteGroup {
+  id: string;
+  name: string;
+  /** True for the built-in domain config group; false for imported library groups. */
+  isBase?: boolean;
+  types: ElementTypeDef[];
+}
+
+interface ToolbarProps {
+  tool: ToolMode;
+  onToolChange: (tool: ToolMode) => void;
+  showGrid: boolean;
+  onToggleGrid: () => void;
+  zoom: number;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetView: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  onUndo: () => void;
+  onRedo: () => void;
+  /** All element groups: base config group + any imported library groups. */
+  paletteGroups: PaletteGroup[];
+  activePlaceTypeId: string | null;
+  onActivePlaceTypeChange: (id: string) => void;
+  areaShape?: AreaShape;
+  onToggleAreaShape?: () => void;
+  onExportMap?: () => void;
+  onImportMap?: () => void;
+  onLoadLibrary?: () => void;
+  onRemoveLibraryGroup?: (groupId: string) => void;
+}
+
+// ─── TypeChip ─────────────────────────────────────────────────────────────────
+
+interface TypeChipProps {
+  typeDef: ElementTypeDef;
+  active: boolean;
+  onClick: () => void;
+}
+
+function TypeChip({ typeDef, active, onClick }: TypeChipProps) {
+  return (
+    <button
+      title={typeDef.label}
+      onClick={onClick}
+      className={[
+        'flex items-center gap-1.5 px-2 py-1 rounded border text-xs whitespace-nowrap transition-colors',
+        active
+          ? 'border-blue-400 bg-blue-50 text-blue-700 font-medium'
+          : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50',
+      ].join(' ')}
+    >
+      <span
+        className="w-2.5 h-2.5 rounded-sm shrink-0"
+        style={{ background: typeDef.color, border: `1px solid ${typeDef.strokeColor}` }}
+      />
+      {typeDef.label}
+    </button>
+  );
+}
+
+// ─── Toolbar ─────────────────────────────────────────────────────────────────
+
+export function Toolbar({
+  tool,
+  onToolChange,
+  showGrid,
+  onToggleGrid,
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onResetView,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  paletteGroups,
+  activePlaceTypeId,
+  onActivePlaceTypeChange,
+  areaShape,
+  onToggleAreaShape,
+  onExportMap,
+  onImportMap,
+  onLoadLibrary,
+  onRemoveLibraryGroup,
+}: ToolbarProps) {
+  return (
+    <div className="flex flex-col bg-white border-b border-slate-200 shadow-sm shrink-0">
+      {/* ── Main row ── */}
+      <div className="flex items-center gap-0.5 px-2 py-1.5">
+        {/* Selection tools */}
+        <ToolButton title="Seleccionar (V)" active={tool === 'SELECT'} onClick={() => onToolChange('SELECT')}>
+          <IconCursor className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Desplazar (H)" active={tool === 'PAN'} onClick={() => onToolChange('PAN')}>
+          <IconHand className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Dibujar pared (W)" active={tool === 'WALL'} onClick={() => onToolChange('WALL')}>
+          <IconWall className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Colocar elemento (P)" active={tool === 'PLACE'} onClick={() => onToolChange('PLACE')}>
+          <IconPlace className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Borrar (E)" active={tool === 'ERASE'} onClick={() => onToolChange('ERASE')}>
+          <IconErase className="w-4 h-4" />
+        </ToolButton>
+
+        <Sep />
+
+        {/* History */}
+        <ToolButton title="Deshacer (Ctrl+Z)" disabled={!canUndo} onClick={onUndo}>
+          <IconUndo className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Rehacer (Ctrl+Y)" disabled={!canRedo} onClick={onRedo}>
+          <IconRedo className="w-4 h-4" />
+        </ToolButton>
+
+        <Sep />
+
+        {/* View */}
+        <ToolButton
+          title={showGrid ? 'Ocultar cuadrícula' : 'Mostrar cuadrícula'}
+          active={showGrid}
+          onClick={onToggleGrid}
+        >
+          <IconGrid className="w-4 h-4" />
+        </ToolButton>
+
+        <Sep />
+
+        {/* Zoom */}
+        <ToolButton title="Acercar (+)" onClick={onZoomIn}>
+          <IconZoomIn className="w-4 h-4" />
+        </ToolButton>
+        <span className="text-xs text-slate-500 w-10 text-center tabular-nums select-none">
+          {Math.round(zoom * 100)}%
+        </span>
+        <ToolButton title="Alejar (-)" onClick={onZoomOut}>
+          <IconZoomOut className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Restablecer vista" onClick={onResetView}>
+          <IconReset className="w-4 h-4" />
+        </ToolButton>
+
+        <Sep />
+
+        {/* Map export / import */}
+        <ToolButton title="Exportar mapa JSON" onClick={() => onExportMap?.()}>
+          <IconDownload className="w-4 h-4" />
+        </ToolButton>
+        <ToolButton title="Importar mapa JSON" onClick={() => onImportMap?.()}>
+          <IconUpload className="w-4 h-4" />
+        </ToolButton>
+
+        {/* Element library import */}
+        <ToolButton title="Cargar librería de elementos (.json)" onClick={() => onLoadLibrary?.()}>
+          <IconLayers className="w-4 h-4" />
+        </ToolButton>
+
+        {areaShape !== undefined && (
+          <>
+            <Sep />
+            <ToolButton title={areaShape === 'polygon' ? 'Cambiar a rectángulo' : 'Cambiar a polígono'} onClick={() => onToggleAreaShape?.()}>
+              <span className="text-xs font-medium">{areaShape === 'polygon' ? 'Poly' : 'Rect'}</span>
+            </ToolButton>
+          </>
+        )}
+      </div>
+
+      {/* ── Element palette (only when PLACE is active) ── */}
+      {tool === 'PLACE' && (
+        <div className="flex items-stretch gap-0 border-t border-slate-100 bg-slate-50 overflow-x-auto">
+          {paletteGroups.map((group, gi) => (
+            <div key={group.id} className="flex items-center shrink-0">
+              {/* Group divider (not before the first group) */}
+              {gi > 0 && (
+                <div className="w-px self-stretch bg-slate-200 mx-1" />
+              )}
+              {/* Group label + optional remove button */}
+              <div className="flex items-center gap-0.5 px-1.5 shrink-0">
+                <span className="text-[10px] text-slate-400 font-medium whitespace-nowrap select-none">
+                  {group.name}
+                </span>
+                {!group.isBase && onRemoveLibraryGroup && (
+                  <button
+                    title={`Eliminar grupo "${group.name}"`}
+                    onClick={() => onRemoveLibraryGroup(group.id)}
+                    className="text-slate-300 hover:text-red-400 leading-none text-xs ml-0.5 transition-colors"
+                  >
+                    ×
+                  </button>
+                )}
+              </div>
+              {/* Chips */}
+              <div className="flex items-center gap-1 px-1 py-1.5">
+                {group.types.map(typeDef => (
+                  <TypeChip
+                    key={typeDef.id}
+                    typeDef={typeDef}
+                    active={activePlaceTypeId === typeDef.id}
+                    onClick={() => onActivePlaceTypeChange(typeDef.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/VenueMapEditor/components/WallLayer.tsx

@@ -0,0 +1,117 @@
+import type { WallNode, Wall, ToolMode } from '../types';
+import { wallSegmentPath } from '../utils/wallGeometry';
+import type { Vec2 } from '../utils/wallGeometry';
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface WallLayerProps {
+  nodes: WallNode[];
+  walls: Wall[];
+  zoom: number;
+  tool: ToolMode;
+  onDeleteWall?: (id: string) => void;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function vecNorm(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 };
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function WallLayer({ nodes, walls, zoom, tool, onDeleteWall }: WallLayerProps) {
+  if (walls.length === 0 && nodes.length === 0) return null;
+
+  // ── Build lookup maps ──────────────────────────────────────────────────────
+  const nodeMap = new Map<string, WallNode>(nodes.map(n => [n.id, n]));
+
+  // nodeId → list of walls that touch it
+  const nodeWalls = new Map<string, Wall[]>();
+  for (const n of nodes) nodeWalls.set(n.id, []);
+  for (const wall of walls) {
+    nodeWalls.get(wall.nodeAId)?.push(wall);
+    nodeWalls.get(wall.nodeBId)?.push(wall);
+  }
+
+  // ── Compute per-wall paths with miter ─────────────────────────────────────
+  const sw    = 0.75 / zoom;
+  const isErase = tool === 'ERASE';
+
+  const items = walls.map(wall => {
+    const nodeA = nodeMap.get(wall.nodeAId);
+    const nodeB = nodeMap.get(wall.nodeBId);
+    if (!nodeA || !nodeB) return null;
+
+    // Adjacent-wall direction at nodeA (only when exactly 1 other wall present)
+    const wallsAtA = (nodeWalls.get(wall.nodeAId) ?? []).filter(w => w.id !== wall.id);
+    let adjDirAtA: Vec2 | null = null;
+    if (wallsAtA.length === 1) {
+      const w2 = wallsAtA[0];
+      const otherId = w2.nodeAId === wall.nodeAId ? w2.nodeBId : w2.nodeAId;
+      const other = nodeMap.get(otherId);
+      if (other) adjDirAtA = vecNorm({ x: other.x - nodeA.x, y: other.y - nodeA.y });
+    }
+
+    // Adjacent-wall direction at nodeB
+    const wallsAtB = (nodeWalls.get(wall.nodeBId) ?? []).filter(w => w.id !== wall.id);
+    let adjDirAtB: Vec2 | null = null;
+    if (wallsAtB.length === 1) {
+      const w2 = wallsAtB[0];
+      const otherId = w2.nodeAId === wall.nodeBId ? w2.nodeBId : w2.nodeAId;
+      const other = nodeMap.get(otherId);
+      if (other) adjDirAtB = vecNorm({ x: other.x - nodeB.x, y: other.y - nodeB.y });
+    }
+
+    const path = wallSegmentPath(
+      nodeA.x, nodeA.y, nodeB.x, nodeB.y,
+      wall.thickness, adjDirAtA, adjDirAtB,
+    );
+    return { wall, path };
+  }).filter((x): x is NonNullable<typeof x> => x !== null);
+
+  return (
+    <g>
+      {/* ── Wall fills ── */}
+      {items.map(({ wall, path }) => (
+        <g key={wall.id}>
+          {/* Visible fill */}
+          <path
+            d={path}
+            fill="#475569"
+            stroke="#1e293b"
+            strokeWidth={sw}
+            strokeLinejoin="miter"
+            style={{ pointerEvents: 'none' }}
+          />
+          {/* Wide invisible hit area for erasing */}
+          {isErase && (
+            <path
+              d={path}
+              fill="transparent"
+              stroke="transparent"
+              strokeWidth={Math.max(wall.thickness, 16) / zoom}
+              style={{ cursor: 'crosshair', pointerEvents: 'all' }}
+              onClick={() => onDeleteWall?.(wall.id)}
+            />
+          )}
+        </g>
+      ))}
+
+      {/* ── Node dots (visible in WALL mode to show the graph) ── */}
+      {tool === 'WALL' && nodes.map(node => (
+        <circle
+          key={node.id}
+          cx={node.x}
+          cy={node.y}
+          r={4 / zoom}
+          fill="#3b82f6"
+          stroke="white"
+          strokeWidth={1.5 / zoom}
+          style={{ pointerEvents: 'none' }}
+        />
+      ))}
+    </g>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { useRef, useCallback } from 'react';
+import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import type { PanZoomState } from './usePanZoom';
+
+/** A ref whose current value is always a live PanZoomState (never null). */
+type PanZoomRef = { current: PanZoomState };
+
+export interface DragCallbacks {
+  onDragStart?: (canvasX: number, canvasY: number) => void;
+  onDragMove: (dx: number, dy: number, canvasX: number, canvasY: number) => void;
+  onDragEnd?: (canvasX: number, canvasY: number) => void;
+}
+
+/**
+ * Generic SVG drag hook.
+ *
+ * Converts raw clientX/Y into canvas coordinates using the current pan/zoom,
+ * then fires `onDragMove` with the delta since the last frame.
+ *
+ * Uses window-level listeners so that the drag continues even when the cursor
+ * leaves the SVG element.
+ */
+export function useDrag(
+  svgRef: RefObject<SVGSVGElement | null>,
+  panZoomRef: PanZoomRef,
+  callbacks: DragCallbacks,
+) {
+  // Keep callbacks in a ref so window listeners always call the latest version.
+  const cbRef = useRef(callbacks);
+  cbRef.current = callbacks;
+
+  const lastCanvas = useRef({ x: 0, y: 0 });
+
+  /** Convert a screen position (clientX, clientY) to canvas coordinates. */
+  const toCanvas = useCallback(
+    (clientX: number, clientY: number): { x: number; y: number } => {
+      const rect = svgRef.current?.getBoundingClientRect() ?? { left: 0, top: 0 };
+      const { panX, panY, zoom } = panZoomRef.current;
+      return {
+        x: (clientX - rect.left - panX) / zoom,
+        y: (clientY - rect.top - panY) / zoom,
+      };
+    },
+    [svgRef, panZoomRef],
+  );
+
+  const handleMouseDown = useCallback(
+    (e: ReactMouseEvent) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      e.preventDefault();
+
+      const canvas = toCanvas(e.clientX, e.clientY);
+      lastCanvas.current = canvas;
+      cbRef.current.onDragStart?.(canvas.x, canvas.y);
+
+      const onMove = (ev: MouseEvent) => {
+        const c = toCanvas(ev.clientX, ev.clientY);
+        const dx = c.x - lastCanvas.current.x;
+        const dy = c.y - lastCanvas.current.y;
+        lastCanvas.current = c;
+        cbRef.current.onDragMove(dx, dy, c.x, c.y);
+      };
+
+      const onUp = (ev: MouseEvent) => {
+        const c = toCanvas(ev.clientX, ev.clientY);
+        cbRef.current.onDragEnd?.(c.x, c.y);
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    },
+    [toCanvas],
+  );
+
+  return { handleMouseDown };
+}