@iweather-js/iweather-react 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iweather-js/iweather-react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "工具函数包",
   "license": "MIT",
   "type": "module",
@@ -12,8 +12,11 @@
     },
     "./css": "./dist/index.css"
   },
+  "files": [
+    "./dist"
+  ],
   "dependencies": {
-    "@iweather-js/iweather-gl": "^0.0.8",
+    "@iweather-js/iweather-gl": "^0.0.9",
     "@iweather-js/iweather-lib": "^0.0.7",
     "@types/react": "^19.2.7",
     "react": "^19.0.0",

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-$ rimraf dist && bun run build:types && bun run build.ts
-$ tsc --emitDeclarationOnly --declaration --outDir dist
-✅ Build success : @iweather-js/iweather-react

package/CHANGELOG.md

@@ -1,95 +0,0 @@
-# iweather-react
-
-## 0.0.8
-
-### Patch Changes
-
-- test
-- Updated dependencies
-  - @iweather-js/iweather-lib@0.0.7
-  - @iweather-js/iweather-gl@0.0.8
-
-## 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
-
-- test
-- Updated dependencies
-  - @iweather-js/iweather-lib@0.0.4
-  - @iweather-js/iweather-gl@0.0.5
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies
-- Updated dependencies
-  - @iweather-js/iweather-gl@0.0.4
-
-## 0.0.3
-
-### Patch Changes
-
-- test
-- Updated dependencies
-  - @iweather-js/iweather-lib@0.0.3
-  - @iweather-js/iweather-gl@0.0.3
-
-## 0.0.2
-
-### Patch Changes
-
-- test
-- Updated dependencies
-  - @iweather-js/iweather-gl@0.0.2
-
-## 0.1.58
-
-### Patch Changes
-
-- test
-- xdsaffadsf
-
-## 0.1.57
-
-### Patch Changes
-
-- test
-- test
-- test
-- test1
-- test
-
-## 0.1.56
-
-### Patch Changes
-
-- test
-- test
-- test
-- test1
-- test
-
-## 0.1.55
-
-### Patch Changes
-
-- new pkg mgr test

package/build.ts

@@ -1,26 +0,0 @@
-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/src/content/GisConfigProvider.tsx

@@ -1,20 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/src/hooks/useCityInfo.ts

@@ -1,23 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/index.ts

@@ -1,18 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,36 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-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

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