@iweather-js/iweather-react 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # iweather-react
 
+## 0.0.7
+
+### Patch Changes
+
+- test
+- Updated dependencies
+  - @iweather-js/iweather-lib@0.0.6
+  - @iweather-js/iweather-gl@0.0.7
+
+## 0.0.6
+
+### Patch Changes
+
+- test
+- Updated dependencies
+  - @iweather-js/iweather-lib@0.0.5
+  - @iweather-js/iweather-gl@0.0.6
+
 ## 0.0.5
 
 ### Patch Changes

package/build.ts

@@ -0,0 +1,26 @@
+export async function build() {
+  const pkg = require('./package.json');
+  const packageName = pkg.name;
+
+  const result = await Bun.build({
+    entrypoints: ['./src/index.ts'],
+    outdir: './dist',
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+    sourcemap: 'external',
+    external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+  });
+
+  if (!result.success) {
+    console.error(`❌ Build failed : ${packageName}`);
+    for (const message of result.logs) {
+      console.error(message);
+    }
+    process.exit(1);
+  }
+
+  console.log(`✅ Build success : ${packageName}`);
+}
+
+build();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iweather-js/iweather-react",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "工具函数包",
   "license": "MIT",
   "type": "module",
@@ -13,8 +13,8 @@
     "./css": "./dist/index.css"
   },
   "dependencies": {
-    "@iweather-js/iweather-gl": "workspace:*",
-    "@iweather-js/iweather-lib": "workspace:*",
+    "@iweather-js/iweather-gl": "^0.0.7",
+    "@iweather-js/iweather-lib": "^0.0.6",
     "@types/react": "^19.2.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/content/GisConfigProvider.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { createConfigStore, IConfigStore, IReadOnlyConfigStoreValue } from '@iweather-js/iweather-gl';
+
+export const ConfigContext = React.createContext<IConfigStore | null>(null);
+
+export function GisConfigProvider<LayerT = object, ProductTypeT = string, ModelTypeT = string, DataReqT = object>(
+  props: React.PropsWithChildren<{
+    initConfigState: IReadOnlyConfigStoreValue<LayerT, ProductTypeT, ModelTypeT, DataReqT>;
+  }>,
+) {
+  const store = useMemo(() => {
+    const configStore = createConfigStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>(props.initConfigState);
+
+    configStore.getState().initCtx();
+
+    return configStore;
+  }, []);
+
+  return <ConfigContext.Provider value={store as any}>{props.children}</ConfigContext.Provider>;
+}

package/src/content/GisLayerProvider.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { LayerMgrHub, TimeMgrHub } from '@iweather-js/iweather-gl';
+import { useStore } from 'zustand';
+import { useStores } from '../hooks/useStores';
+
+export function GisLayerProvider(props: React.PropsWithChildren) {
+  const stores = useStores();
+
+  const mapIsLoaded = useStore(stores.gisStore, state => state.mapIsLoaded);
+
+  useEffect(() => {
+    let layerMgrHub: LayerMgrHub | undefined = undefined;
+    let timeMgrHub: TimeMgrHub | undefined = undefined;
+
+    if (mapIsLoaded) {
+      layerMgrHub = new LayerMgrHub();
+      timeMgrHub = new TimeMgrHub(layerMgrHub);
+      layerMgrHub.mount(stores);
+      timeMgrHub.mount(stores);
+    }
+
+    return () => {
+      layerMgrHub?.onUnmount();
+      timeMgrHub?.onUnmount();
+    };
+  }, [mapIsLoaded]);
+
+  return <>{props.children}</>;
+}

package/src/content/GisStoreProvider.tsx

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { createGisStore, IGisStore, IGisValue } from '@iweather-js/iweather-gl';
+import { useConfigStore } from '../hooks/useConfigStore';
+
+export const GisStoreContent = React.createContext<IGisStore | null>(null);
+
+export function GisStoreProvider<LayerT = object, ProductTypeT = string>(
+  props: React.PropsWithChildren<{ initGisState?: Partial<IGisValue<LayerT, ProductTypeT>> }>,
+) {
+  const configStore = useConfigStore<LayerT, ProductTypeT>();
+
+  const gisStore = useMemo(() => {
+    return createGisStore(configStore, props.initGisState);
+  }, []);
+
+  return <GisStoreContent.Provider value={gisStore as any}>{props.children}</GisStoreContent.Provider>;
+}

package/src/content/MultiMapStatusStoreProvider.tsx

@@ -0,0 +1,11 @@
+import React, { useMemo } from 'react';
+import { createMultiMapStatusStore } from '@iweather-js/iweather-gl';
+import { MultiMapStatusStoreContext } from './context';
+
+export function MultiMapStatusStoreProvider(props: React.PropsWithChildren) {
+  const statusStore = useMemo(() => {
+    return createMultiMapStatusStore();
+  }, []);
+
+  return <MultiMapStatusStoreContext.Provider value={statusStore}>{props.children}</MultiMapStatusStoreContext.Provider>;
+}

package/src/content/context.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IMultiMapStatusStore } from '@iweather-js/iweather-gl';
+
+export const MultiMapStatusStoreContext = React.createContext<IMultiMapStatusStore | null>(null);

package/src/hooks/useCityInfo.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { toAdcodeInfoVo } from '@iweather-js/iweather-gl';
+import { useStore } from 'zustand';
+import { useConfigStore } from './useConfigStore';
+import { useGisStore } from './useGisStore';
+
+export function useCityInfo() {
+  const gisStore = useGisStore();
+
+  const configStore = useConfigStore();
+
+  const adcodeInfo = useStore(gisStore, state => state.adcodeInfo);
+
+  const { cityConfig } = configStore.getState();
+
+  const adcodeInfoVo = useMemo(() => {
+    return toAdcodeInfoVo(adcodeInfo);
+  }, [adcodeInfo]);
+
+  const cityInfo = cityConfig?.findCityInfo(adcodeInfoVo);
+
+  return { cityInfo, adcodeInfoVo };
+}

package/src/hooks/useConfigStore.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { IConfigStore } from '@iweather-js/iweather-gl';
+import { ConfigContext } from '../content/GisConfigProvider';
+
+export function useConfigStore<LayerT = object, ProductTypeT = string, ModelTypeT = string, DataReqT = object>() {
+  const configStore = useContext(ConfigContext);
+
+  if (!configStore) {
+    throw new Error('GisConfigStore not found');
+  }
+
+  return configStore as unknown as IConfigStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>;
+}

package/src/hooks/useEnabledLayers.ts

@@ -0,0 +1,22 @@
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import { useGisStore } from './useGisStore';
+
+export function useEnabledLayers() {
+  const gisStore = useGisStore();
+
+  const enabledLayerOptopns = useStore(
+    gisStore,
+    useShallow(state => state.query.enabledLayerOptopns()),
+  );
+
+  const enabledLayerMgrs = useStore(
+    gisStore,
+    useShallow(state => state.query.enabledLayerMgrs()),
+  );
+
+  return {
+    enabledLayerOptopns,
+    enabledLayerMgrs,
+  };
+}

package/src/hooks/useGisStore.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { IGisStore } from '@iweather-js/iweather-gl';
+import { GisStoreContent } from '../content/GisStoreProvider';
+
+export function useGisStore<LayerT = object, ProductTypeT = string, ModelTypeT = string, DataReqT = object>() {
+  const gisStore = useContext(GisStoreContent);
+
+  if (!gisStore) throw new Error('gisStore is null');
+
+  return gisStore as unknown as IGisStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>;
+}

package/src/hooks/useMultiMapStatusStore.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { IMultiMapStatusStore } from '@iweather-js/iweather-gl';
+import { MultiMapStatusStoreContext } from '../content/context';
+
+export function useMultiMapStatusStore() {
+  const multiMapStatusStore = useContext(MultiMapStatusStoreContext);
+
+  if (!multiMapStatusStore) throw new Error('multiMapStatusStore is null');
+
+  return multiMapStatusStore as IMultiMapStatusStore;
+}

package/src/hooks/useProduct.ts

@@ -0,0 +1,13 @@
+import { useStore } from 'zustand';
+import { useConfigStore } from './useConfigStore';
+import { useGisStore } from './useGisStore';
+
+export function useProduct<LayerT = object, ProductTypeT = string, ModelTypeT = string, DataReqT = object>() {
+  const configStore = useConfigStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>();
+
+  const gisStore = useGisStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>();
+
+  const productType = useStore(gisStore, state => state.productType);
+
+  return configStore.getState().productConfig.findProduct(productType!);
+}

package/src/hooks/useStores.ts

@@ -0,0 +1,12 @@
+import { useConfigStore } from './useConfigStore';
+import { useGisStore } from './useGisStore';
+
+export function useStores() {
+  const configStore = useConfigStore();
+  const gisStore = useGisStore();
+
+  return {
+    configStore,
+    gisStore,
+  };
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export * from './content/GisStoreProvider';
+export * from './content/GisConfigProvider';
+export * from './content/GisLayerProvider';
+export * from './content/MultiMapStatusStoreProvider';
+
+export * from './plugins/GisRefPlugin';
+export * from './plugins/GisStateChangePlugin';
+export * from './plugins/GisClickPlugin';
+export * from './plugins/GisStateSyncPlugin';
+
+export * from './views/map';
+
+export * from './hooks/useGisStore';
+export * from './hooks/useStores';
+export * from './hooks/useConfigStore';
+export * from './hooks/useProduct';
+export * from './hooks/useCityInfo';
+export * from './hooks/useEnabledLayers';

package/src/plugins/GisClickPlugin.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { IMap } from '@iweather-js/iweather-gl';
+import { isEqual } from 'lodash-es';
+import { LngLat } from 'maplibre-gl';
+import { useGisStore } from '../hooks/useGisStore';
+
+/**
+ * 点击事件
+ * @param props
+ * @returns
+ */
+export function GisClickPlugin(props: { onClick?: (clickPoint: LngLat, map: IMap) => void }) {
+  const gisStore = useGisStore();
+
+  useEffect(() => {
+    const unsubscribeFuns: (() => void)[] = [];
+
+    if (props.onClick) {
+      unsubscribeFuns.push(
+        gisStore.subscribe(
+          state => {
+            return {
+              clickPoint: state.clickPoint,
+              map: state.map,
+            };
+          },
+          ({ clickPoint, map }) => {
+            map && clickPoint && props.onClick?.(clickPoint, map);
+          },
+          { equalityFn: isEqual, fireImmediately: true },
+        ),
+      );
+    }
+
+    return () => {
+      unsubscribeFuns.forEach(e => e?.());
+    };
+  }, []);
+
+  return null;
+}

package/src/plugins/GisRefPlugin.tsx

@@ -0,0 +1,17 @@
+import React, { useImperativeHandle } from 'react';
+import { IGisFns } from '@iweather-js/iweather-gl';
+import { useStore } from 'zustand';
+import { useGisStore } from '../hooks/useGisStore';
+
+/**
+ * 地图ref插件
+ */
+export const GisRefPlugin = React.forwardRef<IGisFns['apply'], any>((props, ref) => {
+  const gisStore = useGisStore();
+
+  const apply = useStore(gisStore, state => state.apply);
+
+  useImperativeHandle(ref, () => apply, []);
+
+  return null;
+});

package/src/plugins/GisStateChangePlugin.tsx

@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { IGisStore, IGisValue, IMapState, toGisValue } from '@iweather-js/iweather-gl';
+import { SubscribeMgr } from '@iweather-js/iweather-lib';
+import { isEqual } from 'lodash-es';
+import { useConfigStore } from '../hooks/useConfigStore';
+import { useGisStore } from '../hooks/useGisStore';
+
+/**
+ * 状态变更插件
+ * @param props
+ * @returns
+ */
+export function GisStateChangePlugin<LayerT = object, ProductTypeT = string, ModelTypeT = string, DataReqT = object>(props: {
+  onChange?: (gisValue: IGisValue<LayerT, ProductTypeT, ModelTypeT, DataReqT>) => void;
+  onMapStateChange?: (mapState: IMapState, gisStore: IGisStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>) => void;
+  onScreenshot?: (screenshot: string) => void;
+  onMapIdle?: () => void;
+}) {
+  const gisStore = useGisStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>();
+  const configStore = useConfigStore<LayerT, ProductTypeT, ModelTypeT, DataReqT>();
+
+  useEffect(() => {
+    const subscribeMgr = SubscribeMgr.create();
+
+    if (props.onChange) {
+      subscribeMgr.add(
+        gisStore.subscribe(state => {
+          props.onChange?.(toGisValue<LayerT, ProductTypeT, ModelTypeT, DataReqT>({ configStore }, state));
+        }),
+      );
+    }
+
+    if (props.onMapStateChange) {
+      subscribeMgr.add(
+        gisStore.subscribe(
+          state => {
+            const { bearing, pitch, bounds, center, zoom } = state;
+            return { bearing, pitch, bounds, center, zoom };
+          },
+          state => {
+            props.onMapStateChange?.(state, gisStore);
+          },
+          { equalityFn: isEqual },
+        ),
+      );
+    }
+
+    if (props.onScreenshot) {
+      subscribeMgr.add(
+        gisStore.subscribe(
+          state => state.screenshot,
+          screenshot => {
+            screenshot && props.onScreenshot?.(screenshot);
+          },
+          { equalityFn: isEqual },
+        ),
+      );
+    }
+
+    if (props.onMapIdle) {
+      const onIdleListener = () => {
+        props.onMapIdle?.();
+      };
+
+      const unsubscribe = gisStore.subscribe(
+        state => state.map,
+        map => {
+          if (!map) return;
+          map?.on('idle', onIdleListener);
+        },
+      );
+
+      subscribeMgr.add(() => {
+        unsubscribe();
+        gisStore.getState().map?.off('idle', onIdleListener);
+      });
+    }
+
+    return () => {
+      subscribeMgr.dispose();
+    };
+  }, []);
+
+  return null;
+}

package/src/plugins/GisStateSyncPlugin.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { getMapState, IGisStore, IGisValue, toGisValue } from '@iweather-js/iweather-gl';
+import { debounce, isEqual } from 'lodash-es';
+import { useStore } from 'zustand';
+import { useConfigStore } from '../hooks/useConfigStore';
+import { useGisStore } from '../hooks/useGisStore';
+import { useMultiMapStatusStore } from '../hooks/useMultiMapStatusStore';
+
+/**
+ * 地图状态同步插件
+ * 支持将一个gisStore的state变更同步到当前gisStore
+ */
+export const GisStateSyncPlugin = (props: {
+  gisStore: IGisStore;
+  transformState?: (state: IGisValue<any>) => IGisValue;
+  enableMapToStoreSync?: boolean;
+}) => {
+  const configStore = useConfigStore();
+  const gisStore = useGisStore();
+  const multiMapStatusStore = useMultiMapStatusStore();
+  const mapIsLoaded = useStore(gisStore, state => state.mapIsLoaded);
+
+  useEffect(() => {
+    const unsubscribeFun = props.gisStore.subscribe(
+      state => toGisValue({ configStore }, state),
+      state => {
+        if (multiMapStatusStore.getState().mapStateToStoreSyncing) return;
+        gisStore.getState().apply({ type: 'changeValue', value: props.transformState?.(state) || state });
+      },
+      {
+        fireImmediately: true,
+        equalityFn: isEqual,
+      },
+    );
+
+    return () => {
+      unsubscribeFun();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!props.enableMapToStoreSync) return;
+    if (!mapIsLoaded) return;
+
+    // const listener = debounce(() => {
+    //   const map = gisStore.getState().map;
+    //   if (!map) return;
+
+    //   multiMapStatusStore.getState().apply({ type: 'changeValue', value: { mapStateToStoreSyncing: true } });
+
+    //   props.gisStore.getState().apply({ type: 'changeValue', value: getMapState(map) });
+
+    //   multiMapStatusStore.getState().apply({ type: 'changeValue', value: { mapStateToStoreSyncing: false } });
+    // }, 100);
+
+    // gisStore.getState().map?.on('idle', listener);
+
+    const { map } = gisStore.getState();
+    if (!map) return;
+
+    // 状态变更事件
+    const onChangeListener = debounce(() => {
+      multiMapStatusStore.getState().apply({ type: 'changeValue', value: { mapStateToStoreSyncing: true } });
+
+      props.gisStore.getState().apply({ type: 'changeValue', value: getMapState(map) });
+
+      multiMapStatusStore.getState().apply({ type: 'changeValue', value: { mapStateToStoreSyncing: false } });
+    }, 500);
+
+    map.on('zoomend', onChangeListener);
+    map.on('moveend', onChangeListener);
+    map.on('pitchend', onChangeListener);
+
+    return () => {
+      map.off('zoomend', onChangeListener);
+      map.off('moveend', onChangeListener);
+      map.off('pitchend', onChangeListener);
+    };
+  }, [mapIsLoaded]);
+
+  return null;
+};

package/src/views/map.css

@@ -0,0 +1,36 @@
+.maplibregl-ctrl {
+  display: none !important;
+}
+
+.mapboxgl-ctrl-attrib-inner {
+  display: none !important;
+}
+
+.mapboxgl-ctrl-bottom-left {
+  display: none !important;
+}
+
+.maplibregl-popup-content {
+  padding: 0px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.maplibregl-popup-tip {
+  display: none !important;
+}
+
+.marker {
+  display: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  width: 50px;
+  height: 50px;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.marker_visible {
+  display: block;
+}

package/src/views/map.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react';
+import {
+  createMap,
+  initMapState,
+  mapAutoRotation,
+  mapScreenshotHandler,
+  mapSyncMoveHandler,
+  mapSyncTimeHandler,
+  syncMapStateToStoreHandler,
+  syncStoreStateToMapHandler,
+} from '@iweather-js/iweather-gl';
+import { useStores } from '../hooks/useStores';
+import './map.css';
+
+// import 'maplibre-gl/dist/maplibre-gl.css';
+
+export function GisMap() {
+  const mapRef = useRef<HTMLDivElement>(null);
+
+  const stores = useStores();
+
+  useEffect(() => {
+    const mapContainer = mapRef.current;
+
+    if (!mapContainer) return;
+
+    const map = createMap(mapContainer, stores);
+
+    stores.gisStore.getState().apply({ type: 'changeValue', value: { map } });
+
+    map.keyboard.disable();
+
+    const unmountFuns: ((() => void) | undefined)[] = [];
+
+    map.once('style.load', () => {
+      initMapState(map, stores);
+      stores.gisStore.getState().apply({ type: 'changeValue', value: { mapIsLoaded: true } });
+      unmountFuns.push(mapSyncMoveHandler(stores));
+      unmountFuns.push(mapSyncTimeHandler(stores));
+      mapScreenshotHandler(stores);
+      syncStoreStateToMapHandler(stores);
+      syncMapStateToStoreHandler(stores);
+      mapAutoRotation(stores);
+    });
+
+    map.on('click', e => {
+      stores.gisStore.getState().apply({ type: 'changeValue', value: { clickPoint: e.lngLat.wrap() } });
+    });
+
+    return () => {
+      unmountFuns.forEach(e => e?.());
+      map.remove();
+      stores.gisStore.getState().apply({ type: 'changeValue', value: { map: undefined, mapIsLoaded: false } });
+    };
+  }, []);
+
+  return <div className='relative h-full w-full' ref={mapRef}></div>;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}