fix: added scaleToBottom feature

Author: sjhoeksma

src/GEOComp.tsx

@@ -164,11 +164,12 @@ var GEOComp = (function () {
     buttons: withDefault(JSONObjectControl, "{menu:false,north:false,save:false}"),
     features: withDefault(
       JSONObjectControl,
-      "{draw:true,swipe:false,tracker:false,timeline:false,gpsCentered:true,largeButtons:false}"
+      "{draw:true,swipe:false,tracker:false,timeline:false,gpsCentered:true,largeButtons:false,scaleToBottom:false}"
     ),
     onEvent: eventHandlerControl(eventDefintions),
   };
 
+
   //The Builder function creating the real component
   return new UICompBuilder(childrenMap, (props: {
     onEvent: any;
@@ -192,11 +193,35 @@ var GEOComp = (function () {
     event: any;
     feature: any
   }) => {
-    const doDebug = function () { return props.defaults && props.defaults.debug === true }
-    //Cache for all events
-    var _events = {}
+    const doDebug = function () {
+      return props.defaults && props.defaults.debug === true
+    }
     //Default size of component
     const [dimensions, setDimensions] = useState({ width: 650, height: 400 });
+    //Catch the resizing of component
+    const { width, height, ref: conRef } = useResizeDetector({
+      onResize: () => {
+        const container = conRef.current;
+        if (!container || !width || !height) return;
+
+        if (props.autoHeight) {
+          setDimensions({
+            width,
+            height: dimensions.height,
+          })
+
+          return;
+        }
+
+        setDimensions({
+          width,
+          height: height,
+        })
+      }
+    });
+
+    //Cache for all events
+    var _events = {}
     //The event handler will also sent the event value to use
     const handleEvent = function (name: string, eventObj: any) {
       return new Promise((resolve) => {
@@ -218,6 +243,12 @@ var GEOComp = (function () {
           case 'click:feature':
             props.feature.onChange(eventObj)
             break;
+          case 'window:resize':
+            if (props.features && props.features.scaleToBottom == true) {
+              var div = eventObj.window.height - eventObj.element.bottom - 1
+              setDimensions({ width: dimensions.width, height: dimensions.height + div })
+            }
+            break
           default:
             switch (eventName) {
               case 'bbox':
@@ -234,28 +265,6 @@ var GEOComp = (function () {
       })
     }
 
-    //Catch the resizing of component
-    const { width, height, ref: conRef } = useResizeDetector({
-      onResize: () => {
-        const container = conRef.current;
-        if (!container || !width || !height) return;
-
-        if (props.autoHeight) {
-          setDimensions({
-            width,
-            height: dimensions.height,
-          })
-
-          return;
-        }
-
-        setDimensions({
-          width,
-          height: height,
-        })
-      }
-    });
-
     //Create the container for the component
     return (
       <div className={styles.wrapper}

src/vendors/Geo.jsx

@@ -12,17 +12,14 @@ import { RingLoader } from 'react-spinners'
 //The real GEO OpenLayers packages
 import { Map, View } from 'ol/index';
 import { Vector as VectorLayer } from 'ol/layer';
-import { TileWMS, Vector as VectorSource } from 'ol/source';
-import TileLayer from 'ol/layer/WebGLTile.js';
+import { Vector as VectorSource } from 'ol/source';
 import { LineString, Polygon } from 'ol/geom';
 import { fromLonLat, transformExtent } from 'ol/proj';
 import { FullScreen, Zoom } from 'ol/control';
-import { GeoJSON } from 'ol/format';
 import { Draw, Snap, Select } from 'ol/interaction'
 
 //Openlayer Extend imports
 import GeolocationBar from 'ol-ext/control/GeolocationBar'
-import GeolocationButton from 'ol-ext/control/GeolocationButton'
 import CanvasScaleLine from 'ol-ext/control/CanvasScaleLine'
 import Notification from 'ol-ext/control/Notification'
 import Bar from 'ol-ext/control/Bar'
@@ -38,13 +35,14 @@ import LayerSwitcher from 'ol-ext/control/LayerSwitcher'
 ///Local import
 import RotateNorthControl from './RotateNorthControl'
 import { createLayer } from './helpers/Layers'
-import { animate, geoJsonStyleFunction } from './helpers'
+import { animate, geoJsonStyleFunction, useScreenSize } from './helpers'
 
 function Geo(props) {
   const [geoRef, setGeoRef] = useState();
   const [geoLoc, setGeoLoc] = useState();
   const [map, setMap] = useState();
   const [geoId] = useState(Math.random().toString(16).slice(2));
+
   //Global notification item
   const [notification] = useState(new Notification({}))
   // Vector layer for drawing
@@ -59,16 +57,12 @@ function Geo(props) {
     source: new VectorSource(),
   }))
 
-  //Function to check if updating of a variable is allowed
-  const allowUpdate = function (name) {
-    return !(props.ignoreUpdate && props.ignoreUpdate(name))
-  }
-
   //Function to check if updating of a variable is allowed
   const featureEnabled = function (name) {
     return !((props.features && props.features[name] === false))
   }
 
+  //Fire and event to controling ReactComponent
   const fireEvent = function (name, eventObject) {
     if (props.onEvent) {
       props.onEvent(name, eventObject || {})
@@ -665,6 +659,14 @@ function Geo(props) {
     }
   }, [elementRef]);
 
+
+  var windowSize = useScreenSize()
+  useEffect(() => {
+    var el = document.getElementById('GEO_' + geoId)
+    fireEvent('window:resize', { window: windowSize, element: el ? el.getBoundingClientRect() : null })
+  }, [windowSize])
+
+
   return (
     <div
       ref={elementRef}

src/vendors/helpers/index.js

@@ -3,3 +3,4 @@ export * from "./Layers";
 export * from "./Popup";
 export * from "./Styles";
 export * from "./Animate";
+export * from "./useScreenSize";

src/vendors/helpers/useScreenSize.js

@@ -0,0 +1,32 @@
+// useScreenSize.js
+import { useState, useEffect } from 'react';
+
+export function useScreenSize() {
+    const [screenSize, setScreenSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            const rec = {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            }
+            clearTimeout(window.resizedFinished);
+            window.resizedFinished = setTimeout(function () {
+                setScreenSize(rec);
+            }, 250);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+
+        // Clean up the event listener when the component unmounts
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    return screenSize;
+};