maplibre-gl-raster 0.1.0

package/dist/react.mjs

@@ -0,0 +1,145 @@
+import { t as RasterControl } from "./RasterControl-B7XdXYSu.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/lib/core/RasterControlReact.tsx
+/**
+* React wrapper component for RasterControl.
+*
+* This component manages the lifecycle of a RasterControl instance,
+* adding it to the map on mount and removing it on unmount.
+*
+* @example
+* ```tsx
+* import { RasterControlReact } from 'maplibre-gl-raster/react';
+*
+* function MyMap() {
+*   const [map, setMap] = useState<Map | null>(null);
+*
+*   return (
+*     <>
+*       <div ref={mapContainer} />
+*       {map && (
+*         <RasterControlReact
+*           map={map}
+*           collapsed={false}
+*           onReady={(control) => control.addRaster('https://example.com/cog.tif')}
+*         />
+*       )}
+*     </>
+*   );
+* }
+* ```
+*
+* @param props - Component props including map instance and control options
+* @returns null - This component renders nothing directly
+*/
+function RasterControlReact({ map, onStateChange, onReady, ...options }) {
+	const controlRef = useRef(null);
+	useEffect(() => {
+		if (!map) return;
+		const control = new RasterControl(options);
+		controlRef.current = control;
+		if (onStateChange) control.on("statechange", (event) => {
+			onStateChange(event.state);
+		});
+		map.addControl(control, options.position || "top-right");
+		onReady?.(control);
+		return () => {
+			if (map.hasControl(control)) map.removeControl(control);
+			controlRef.current = null;
+		};
+	}, [map]);
+	useEffect(() => {
+		if (controlRef.current) {
+			const currentState = controlRef.current.getState();
+			if (options.collapsed !== void 0 && options.collapsed !== currentState.collapsed) if (options.collapsed) controlRef.current.collapse();
+			else controlRef.current.expand();
+		}
+	}, [options.collapsed]);
+	return null;
+}
+//#endregion
+//#region src/lib/hooks/useRasterState.ts
+/**
+* Default initial state for the plugin
+*/
+var DEFAULT_STATE = {
+	collapsed: true,
+	panelWidth: 360,
+	data: {}
+};
+/**
+* Custom hook for managing plugin state in React applications.
+*
+* This hook provides a simple way to track and update the state
+* of a RasterControl from React components.
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { state, setCollapsed, setData, reset } = useRasterState();
+*
+*   return (
+*     <div>
+*       <button onClick={() => setCollapsed(!state.collapsed)}>
+*         {state.collapsed ? 'Expand' : 'Collapse'}
+*       </button>
+*       <RasterControlReact
+*         map={map}
+*         collapsed={state.collapsed}
+*         onStateChange={(newState) => setState(newState)}
+*       />
+*     </div>
+*   );
+* }
+* ```
+*
+* @param initialState - Optional initial state values
+* @returns Object containing state and update functions
+*/
+function useRasterState(initialState) {
+	const [state, setState] = useState({
+		...DEFAULT_STATE,
+		...initialState
+	});
+	return {
+		state,
+		setState,
+		setCollapsed: useCallback((collapsed) => {
+			setState((prev) => ({
+				...prev,
+				collapsed
+			}));
+		}, []),
+		setPanelWidth: useCallback((panelWidth) => {
+			setState((prev) => ({
+				...prev,
+				panelWidth
+			}));
+		}, []),
+		setData: useCallback((data) => {
+			setState((prev) => ({
+				...prev,
+				data: {
+					...prev.data,
+					...data
+				}
+			}));
+		}, []),
+		reset: useCallback(() => {
+			setState({
+				...DEFAULT_STATE,
+				...initialState
+			});
+		}, [initialState]),
+		toggle: useCallback(() => {
+			setState((prev) => ({
+				...prev,
+				collapsed: !prev.collapsed
+			}));
+		}, [])
+	};
+}
+//#endregion
+export { RasterControl, RasterControlReact, useRasterState };
+
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","names":[],"sources":["../src/lib/core/RasterControlReact.tsx","../src/lib/hooks/useRasterState.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { RasterControl } from \"./RasterControl\";\nimport type { RasterControlReactProps } from \"./types\";\n\n/**\n * React wrapper component for RasterControl.\n *\n * This component manages the lifecycle of a RasterControl instance,\n * adding it to the map on mount and removing it on unmount.\n *\n * @example\n * ```tsx\n * import { RasterControlReact } from 'maplibre-gl-raster/react';\n *\n * function MyMap() {\n *   const [map, setMap] = useState<Map | null>(null);\n *\n *   return (\n *     <>\n *       <div ref={mapContainer} />\n *       {map && (\n *         <RasterControlReact\n *           map={map}\n *           collapsed={false}\n *           onReady={(control) => control.addRaster('https://example.com/cog.tif')}\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 RasterControlReact({\n  map,\n  onStateChange,\n  onReady,\n  ...options\n}: RasterControlReactProps): null {\n  const controlRef = useRef<RasterControl | null>(null);\n\n  useEffect(() => {\n    if (!map) return;\n\n    // Create the control instance\n    const control = new RasterControl(options);\n    controlRef.current = control;\n\n    // Register state change handler if provided\n    if (onStateChange) {\n      control.on(\"statechange\", (event) => {\n        onStateChange(event.state);\n      });\n    }\n\n    // Add control to map\n    map.addControl(control, options.position || \"top-right\");\n\n    // Hand the instance to the host for imperative calls (addRaster, etc.)\n    onReady?.(control);\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 { RasterControlState } from '../core/types';\n\n/**\n * Default initial state for the plugin\n */\nconst DEFAULT_STATE: RasterControlState = {\n  collapsed: true,\n  panelWidth: 360,\n  data: {},\n};\n\n/**\n * Custom hook for managing plugin state in React applications.\n *\n * This hook provides a simple way to track and update the state\n * of a RasterControl from React components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { state, setCollapsed, setData, reset } = useRasterState();\n *\n *   return (\n *     <div>\n *       <button onClick={() => setCollapsed(!state.collapsed)}>\n *         {state.collapsed ? 'Expand' : 'Collapse'}\n *       </button>\n *       <RasterControlReact\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 useRasterState(initialState?: Partial<RasterControlState>) {\n  const [state, setState] = useState<RasterControlState>({\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,mBAAmB,EACjC,KACA,eACA,SACA,GAAG,WAC6B;CAChC,MAAM,aAAa,OAA6B,IAAI;CAEpD,gBAAgB;EACd,IAAI,CAAC,KAAK;EAGV,MAAM,UAAU,IAAI,cAAc,OAAO;EACzC,WAAW,UAAU;EAGrB,IAAI,eACF,QAAQ,GAAG,gBAAgB,UAAU;GACnC,cAAc,MAAM,KAAK;EAC3B,CAAC;EAIH,IAAI,WAAW,SAAS,QAAQ,YAAY,WAAW;EAGvD,UAAU,OAAO;EAGjB,aAAa;GACX,IAAI,IAAI,WAAW,OAAO,GACxB,IAAI,cAAc,OAAO;GAE3B,WAAW,UAAU;EACvB;CACF,GAAG,CAAC,GAAG,CAAC;CAGR,gBAAgB;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;;;;;;ACrFA,IAAM,gBAAoC;CACxC,WAAW;CACX,YAAY;CACZ,MAAM,CAAC;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,eAAe,cAA4C;CACzE,MAAM,CAAC,OAAO,YAAY,SAA6B;EACrD,GAAG;EACH,GAAG;CACL,CAAC;CAqCD,OAAO;EACL;EACA;EACA,cAnCmB,aAAa,cAAuB;GACvD,UAAU,UAAU;IAAE,GAAG;IAAM;GAAU,EAAE;EAC7C,GAAG,CAAC,CAiCF;EACA,eA7BoB,aAAa,eAAuB;GACxD,UAAU,UAAU;IAAE,GAAG;IAAM;GAAW,EAAE;EAC9C,GAAG,CAAC,CA2BF;EACA,SAvBc,aAAa,SAAkC;GAC7D,UAAU,UAAU;IAAE,GAAG;IAAM,MAAM;KAAE,GAAG,KAAK;KAAM,GAAG;IAAK;GAAE,EAAE;EACnE,GAAG,CAAC,CAqBF;EACA,OAjBY,kBAAkB;GAC9B,SAAS;IAAE,GAAG;IAAe,GAAG;GAAa,CAAC;EAChD,GAAG,CAAC,YAAY,CAed;EACA,QAXa,kBAAkB;GAC/B,UAAU,UAAU;IAAE,GAAG;IAAM,WAAW,CAAC,KAAK;GAAU,EAAE;EAC9D,GAAG,CAAC,CASF;CACF;AACF"}