@orioro/react-maplibre-util 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @orioro/react-maplibre-util
 
+## 0.4.0
+
+### Minor Changes
+
+- implement proof-of-concept of hover interaction on legend
+
+### Patch Changes
+
+- Updated dependencies
+  - @orioro/react-chart-util@0.2.0
+
 ## 0.3.2
 
 ### Patch Changes

package/dist/LayeredMap/LayeredMap.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { MapInstance } from 'react-map-gl/maplibre';
 import { LayeredMapProps } from '../types';
 import { augmentFeature, getSrcLayer, getSrcViewByLayerId } from './parseMapViews';
+export declare function useLayeredMap(): null;
 export declare const LayeredMap: React.ForwardRefExoticComponent<Omit<LayeredMapProps, "ref"> & React.RefAttributes<{
     map: MapInstance;
     augmentFeature: (feature: Parameters<typeof augmentFeature>[1]) => ReturnType<typeof augmentFeature>;

package/dist/LayeredMap/parseMapViews.d.ts

@@ -41,5 +41,6 @@ export declare function augmentFeature(parsed: MapViewsParseResult, feature: Geo
     properties: import("geojson").GeoJsonProperties;
     bbox?: import("geojson").BBox | undefined;
 };
+export declare function fmtLayerAbsoluteId(viewId: string, layerRelativeId: string): string;
 export declare function parseMapViews(orderedViews: MapView[], { existingLayers }?: ParseMapViewsOptions): MapViewsParseResult;
 export {};

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { __assign, __spreadArray, __rest, __makeTemplateObject } from 'tslib';
-import React, { forwardRef, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
+import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
 import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
 import { isPlainObject, uniq, uniqBy, pick, omit } from 'lodash-es';
 import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui-core';
@@ -53,7 +53,9 @@ function sortLayers(layers, _a) {
   }).map(function (layer, index, sortedLayers) {
     if (index === sortedLayers.length - 1) {
       // is last layer
-      return layer;
+      return __assign(__assign({}, layer), {
+        beforeId: null
+      });
     } else {
       var beforeId = sortedLayers[index + 1].id;
       //
@@ -99,6 +101,9 @@ function augmentFeature(parsed, feature) {
     mapView: mapView
   });
 }
+function fmtLayerAbsoluteId(viewId, layerRelativeId) {
+  return "".concat(viewId, "__").concat(layerRelativeId);
+}
 function parseMapViews(orderedViews, _a) {
   var _b = _a === void 0 ? {} : _a,
     existingLayers = _b.existingLayers;
@@ -120,7 +125,8 @@ function parseMapViews(orderedViews, _a) {
         if (!layer) {
           return acc;
         }
-        var layerId = layer.absoluteId ? layer.absoluteId : "".concat(viewId, "__").concat(layerRelativeId);
+        var layerId = layer.absoluteId ? layer.absoluteId : fmtLayerAbsoluteId(viewId, layerRelativeId);
+        // : `${viewId}__${layerRelativeId}`
         return {
           interactiveLayerIds: layer.interactive ? __spreadArray(__spreadArray([], acc.interactiveLayerIds, true), [layerId], false) : acc.interactiveLayerIds,
           _layers: __spreadArray(__spreadArray([], acc._layers, true), [__assign(__assign({}, layer), {
@@ -173,6 +179,10 @@ var VIEW_AUGMENTED_EVENT_HANDLERS = ['onMouseDown', 'onMouseUp', 'onMouseOver',
 // 'onMouseEnter',
 // 'onMouseLeave',
 'onMouseMove', 'onMouseOut', 'onClick', 'onDblClick', 'onContextMenu'];
+var LayeredMapContext = /*#__PURE__*/createContext(null);
+function useLayeredMap() {
+  return useContext(LayeredMapContext);
+}
 function useViewAugmentedEventHandlers(props, parsedMapViews) {
   var handlers = Object.fromEntries(VIEW_AUGMENTED_EVENT_HANDLERS.map(function (handlerName) {
     return typeof props[handlerName] === 'function' ? [handlerName, function (evt) {
@@ -209,7 +219,7 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
     };
   }, [views, mapRef.current]);
   var evtHandlers = useViewAugmentedEventHandlers(mapProps, parsed);
-  useImperativeHandle(layeredMapRef, function () {
+  var imperativeHandle = useMemo(function () {
     return {
       map: mapRef.current,
       augmentFeature: augmentFeature.bind(null, parsed),
@@ -217,10 +227,15 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
       getSrcLayer: getSrcLayer.bind(null, parsed)
     };
   }, [mapRef.current, parsed]);
+  useImperativeHandle(layeredMapRef, function () {
+    return imperativeHandle;
+  }, [imperativeHandle]);
   return /*#__PURE__*/React.createElement(Map, __assign({
     ref: mapRef,
     interactiveLayerIds: __spreadArray(__spreadArray([], interactiveLayerIdsInput, true), parsed.interactiveLayerIds, true)
-  }, mapProps, evtHandlers), children, parsed.sources.map(function (_a) {
+  }, mapProps, evtHandlers), /*#__PURE__*/React.createElement(LayeredMapContext.Provider, {
+    value: imperativeHandle
+  }, children, parsed.sources.map(function (_a) {
     var id = _a.id;
       _a.viewId;
       var source = __rest(_a, ["id", "viewId"]);
@@ -235,7 +250,7 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
       key: id,
       id: id
     }, layer));
-  }));
+  })));
 });
 
 var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 16px;\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  border: 1px solid rgba(0, 0, 0, 0.3);\n\n  // background-color: black;\n  color: white;\n  border-radius: 5px;\n  font-size: 0.9rem;\n\n  max-width: 300px;\n\n  hyphens: auto;\n  word-break: break-word; /* Avoids overflow */\n  overflow-wrap: break-word; /* Ensures long words break */\n  white-space: normal;\n"], ["\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 16px;\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  border: 1px solid rgba(0, 0, 0, 0.3);\n\n  // background-color: black;\n  color: white;\n  border-radius: 5px;\n  font-size: 0.9rem;\n\n  max-width: 300px;\n\n  hyphens: auto;\n  word-break: break-word; /* Avoids overflow */\n  overflow-wrap: break-word; /* Ensures long words break */\n  white-space: normal;\n"])));
@@ -1361,4 +1376,4 @@ function InspectControl(props) {
   return null;
 }
 
-export { $naturalBreaks, ControlContainer, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useClientRect, useHover, withHover };
+export { $naturalBreaks, ControlContainer, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useClientRect, useHover, useLayeredMap, withHover };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioro/react-maplibre-util",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/index.mjs",
@@ -50,7 +50,7 @@
     "@maplibre/maplibre-gl-inspect": "^1.7.1",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@orioro/react-chart-util": "^0.1.0",
+    "@orioro/react-chart-util": "^0.2.0",
     "@orioro/react-select": "^3.0.2",
     "@orioro/react-ui-core": "^0.0.6",
     "@orioro/resolve": "^0.1.2",