{"version":3,"file":"react.cjs","names":[],"sources":["../src/lib/core/VectorControlReact.tsx","../src/lib/hooks/useVectorState.ts"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, type Ref } from \"react\";\nimport { VectorControl } from \"./VectorControl\";\nimport type { VectorControlReactProps } from \"./types\";\n\n/**\n * Props for the React wrapper, extending the control props with an\n * optional ref exposing the underlying VectorControl instance.\n */\nexport interface VectorControlReactComponentProps extends VectorControlReactProps {\n  /**\n   * Ref receiving the VectorControl instance for programmatic use\n   * (e.g. `controlRef.current?.addData(url)`)\n   */\n  controlRef?: Ref<VectorControl | null>;\n}\n\n/**\n * React wrapper component for VectorControl.\n *\n * This component manages the lifecycle of a VectorControl instance,\n * adding it to the map on mount and removing it on unmount.\n *\n * @example\n * ```tsx\n * import { VectorControlReact } from 'maplibre-gl-vector/react';\n *\n * function MyMap() {\n *   const [map, setMap] = useState<Map | null>(null);\n *   const controlRef = useRef<VectorControl | null>(null);\n *\n *   return (\n *     <>\n *       <div ref={mapContainer} />\n *       {map && (\n *         <VectorControlReact\n *           map={map}\n *           collapsed={false}\n *           controlRef={controlRef}\n *           onLayerAdded={(layer) => console.log('added', layer.name)}\n *         />\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @param props - Component props including map instance and control options\n * @returns null - This component renders nothing directly\n */\nexport function VectorControlReact({\n  map,\n  onStateChange,\n  onLayerAdded,\n  onLayerRemoved,\n  onError,\n  controlRef: externalRef,\n  ...options\n}: VectorControlReactComponentProps): null {\n  const controlRef = useRef<VectorControl | null>(null);\n\n  // Hold the latest handler props in refs so the handlers registered on\n  // mount never go stale when the parent passes new functions.\n  const handlersRef = useRef({ onStateChange, onLayerAdded, onLayerRemoved, onError });\n  useEffect(() => {\n    handlersRef.current = { onStateChange, onLayerAdded, onLayerRemoved, onError };\n  });\n\n  useImperativeHandle<VectorControl | null, VectorControl | null>(\n    externalRef,\n    () => controlRef.current,\n    [map],\n  );\n\n  useEffect(() => {\n    if (!map) return;\n\n    // Create the control instance\n    const control = new VectorControl(options);\n    controlRef.current = control;\n\n    // Register event handlers calling through the refs\n    control.on(\"statechange\", (event) => {\n      handlersRef.current.onStateChange?.(event.state);\n    });\n    control.on(\"layeradded\", (event) => {\n      if (event.layer) handlersRef.current.onLayerAdded?.(event.layer);\n    });\n    control.on(\"layerremoved\", (event) => {\n      if (event.layer) handlersRef.current.onLayerRemoved?.(event.layer);\n    });\n    control.on(\"error\", (event) => {\n      if (event.error) handlersRef.current.onError?.(event.error);\n    });\n\n    // Add control to map\n    map.addControl(control, options.position || \"top-right\");\n\n    // Cleanup on unmount\n    return () => {\n      if (map.hasControl(control)) {\n        map.removeControl(control);\n      }\n      controlRef.current = null;\n    };\n  }, [map]);\n\n  // Update options when they change\n  useEffect(() => {\n    if (controlRef.current) {\n      // Handle collapsed state changes\n      const currentState = controlRef.current.getState();\n      if (\n        options.collapsed !== undefined &&\n        options.collapsed !== currentState.collapsed\n      ) {\n        if (options.collapsed) {\n          controlRef.current.collapse();\n        } else {\n          controlRef.current.expand();\n        }\n      }\n    }\n  }, [options.collapsed]);\n\n  return null;\n}\n","import { useState, useCallback } from 'react';\nimport type { VectorState } from '../core/types';\n\n/**\n * Default initial state for the vector control\n */\nconst DEFAULT_STATE: VectorState = {\n  collapsed: true,\n  panelWidth: 320,\n  layers: [],\n  data: {},\n};\n\n/**\n * Custom hook for managing vector control state in React applications.\n *\n * This hook provides a simple way to track and update the state\n * of a VectorControl from React components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { state, setState, setCollapsed } = useVectorState();\n *\n *   return (\n *     <div>\n *       <button onClick={() => setCollapsed(!state.collapsed)}>\n *         {state.collapsed ? 'Expand' : 'Collapse'}\n *       </button>\n *       <VectorControlReact\n *         map={map}\n *         collapsed={state.collapsed}\n *         onStateChange={(newState) => setState(newState)}\n *       />\n *     </div>\n *   );\n * }\n * ```\n *\n * @param initialState - Optional initial state values\n * @returns Object containing state and update functions\n */\nexport function useVectorState(initialState?: Partial<VectorState>) {\n  const [state, setState] = useState<VectorState>({\n    ...DEFAULT_STATE,\n    ...initialState,\n  });\n\n  /**\n   * Sets the collapsed state\n   */\n  const setCollapsed = useCallback((collapsed: boolean) => {\n    setState((prev) => ({ ...prev, collapsed }));\n  }, []);\n\n  /**\n   * Sets the panel width\n   */\n  const setPanelWidth = useCallback((panelWidth: number) => {\n    setState((prev) => ({ ...prev, panelWidth }));\n  }, []);\n\n  /**\n   * Sets custom data in the state\n   */\n  const setData = useCallback((data: Record<string, unknown>) => {\n    setState((prev) => ({ ...prev, data: { ...prev.data, ...data } }));\n  }, []);\n\n  /**\n   * Resets the state to default values\n   */\n  const reset = useCallback(() => {\n    setState({ ...DEFAULT_STATE, ...initialState });\n  }, [initialState]);\n\n  /**\n   * Toggles the collapsed state\n   */\n  const toggle = useCallback(() => {\n    setState((prev) => ({ ...prev, collapsed: !prev.collapsed }));\n  }, []);\n\n  return {\n    state,\n    setState,\n    setCollapsed,\n    setPanelWidth,\n    setData,\n    reset,\n    toggle,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,mBAAmB,EACjC,KACA,eACA,cACA,gBACA,SACA,YAAY,aACZ,GAAG,WACsC;CACzC,MAAM,cAAA,GAAA,MAAA,QAA0C,IAAI;CAIpD,MAAM,eAAA,GAAA,MAAA,QAAqB;EAAE;EAAe;EAAc;EAAgB;CAAQ,CAAC;CACnF,CAAA,GAAA,MAAA,iBAAgB;EACd,YAAY,UAAU;GAAE;GAAe;GAAc;GAAgB;EAAQ;CAC/E,CAAC;CAED,CAAA,GAAA,MAAA,qBACE,mBACM,WAAW,SACjB,CAAC,GAAG,CACN;CAEA,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,KAAK;EAGV,MAAM,UAAU,IAAI,sBAAA,cAAc,OAAO;EACzC,WAAW,UAAU;EAGrB,QAAQ,GAAG,gBAAgB,UAAU;GACnC,YAAY,QAAQ,gBAAgB,MAAM,KAAK;EACjD,CAAC;EACD,QAAQ,GAAG,eAAe,UAAU;GAClC,IAAI,MAAM,OAAO,YAAY,QAAQ,eAAe,MAAM,KAAK;EACjE,CAAC;EACD,QAAQ,GAAG,iBAAiB,UAAU;GACpC,IAAI,MAAM,OAAO,YAAY,QAAQ,iBAAiB,MAAM,KAAK;EACnE,CAAC;EACD,QAAQ,GAAG,UAAU,UAAU;GAC7B,IAAI,MAAM,OAAO,YAAY,QAAQ,UAAU,MAAM,KAAK;EAC5D,CAAC;EAGD,IAAI,WAAW,SAAS,QAAQ,YAAY,WAAW;EAGvD,aAAa;GACX,IAAI,IAAI,WAAW,OAAO,GACxB,IAAI,cAAc,OAAO;GAE3B,WAAW,UAAU;EACvB;CACF,GAAG,CAAC,GAAG,CAAC;CAGR,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,WAAW,SAAS;GAEtB,MAAM,eAAe,WAAW,QAAQ,SAAS;GACjD,IACE,QAAQ,cAAc,KAAA,KACtB,QAAQ,cAAc,aAAa,WAEnC,IAAI,QAAQ,WACV,WAAW,QAAQ,SAAS;QAE5B,WAAW,QAAQ,OAAO;EAGhC;CACF,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,OAAO;AACT;;;;;;ACvHA,IAAM,gBAA6B;CACjC,WAAW;CACX,YAAY;CACZ,QAAQ,CAAC;CACT,MAAM,CAAC;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,eAAe,cAAqC;CAClE,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAkC;EAC9C,GAAG;EACH,GAAG;CACL,CAAC;CAqCD,OAAO;EACL;EACA;EACA,eAAA,GAAA,MAAA,cAnCgC,cAAuB;GACvD,UAAU,UAAU;IAAE,GAAG;IAAM;GAAU,EAAE;EAC7C,GAAG,CAAC,CAiCF;EACA,gBAAA,GAAA,MAAA,cA7BiC,eAAuB;GACxD,UAAU,UAAU;IAAE,GAAG;IAAM;GAAW,EAAE;EAC9C,GAAG,CAAC,CA2BF;EACA,UAAA,GAAA,MAAA,cAvB2B,SAAkC;GAC7D,UAAU,UAAU;IAAE,GAAG;IAAM,MAAM;KAAE,GAAG,KAAK;KAAM,GAAG;IAAK;GAAE,EAAE;EACnE,GAAG,CAAC,CAqBF;EACA,QAAA,GAAA,MAAA,mBAjB8B;GAC9B,SAAS;IAAE,GAAG;IAAe,GAAG;GAAa,CAAC;EAChD,GAAG,CAAC,YAAY,CAed;EACA,SAAA,GAAA,MAAA,mBAX+B;GAC/B,UAAU,UAAU;IAAE,GAAG;IAAM,WAAW,CAAC,KAAK;GAAU,EAAE;EAC9D,GAAG,CAAC,CASF;CACF;AACF"}