feat(lib): add Fullscreen Control to UtopiaMap Component (#408)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: antontranelis <31516529+antontranelis@users.noreply.github.com>
Co-authored-by: Anton Tranelis <mail@antontranelis.de>

app/src/pages/MapContainer.tsx

@@ -86,6 +86,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         expandLayerControl={map.expand_layer_control}
         tileServerUrl={map.tile_server_url}
         tileServerAttribution={map.tile_server_attribution}
+        showFullscreenControl={map.show_fullscreen_control}
       >
         {layers &&
           apis &&

backend/directus-config/development/snapshot/fields/maps/Controls.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 12,
+    "sort": 11,
     "special": [
       "alias",
       "no-data",

backend/directus-config/development/snapshot/fields/maps/Presets.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 15,
+    "sort": 14,
     "special": [
       "alias",
       "no-data",

backend/directus-config/development/snapshot/fields/maps/custom_text.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 13,
+    "sort": 12,
     "special": null,
     "translations": null,
     "validation": null,

backend/directus-config/development/snapshot/fields/maps/default_theme.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 10,
+    "sort": 9,
     "special": [
       "m2o"
     ],

backend/directus-config/development/snapshot/fields/maps/donation_widget.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 11,
+    "sort": 10,
     "special": [
       "cast-boolean"
     ],

backend/directus-config/development/snapshot/fields/maps/geo.json

@@ -26,7 +26,7 @@
     },
     "readonly": false,
     "required": false,
-    "sort": 14,
+    "sort": 13,
     "special": [
       "cast-json"
     ],

backend/directus-config/development/snapshot/fields/maps/hide_signup.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 17,
+    "sort": 16,
     "special": [
       "cast-boolean"
     ],

backend/directus-config/development/snapshot/fields/maps/show_fullscreen_control.json

@@ -0,0 +1,45 @@
+{
+  "collection": "maps",
+  "field": "show_fullscreen_control",
+  "type": "boolean",
+  "meta": {
+    "collection": "maps",
+    "conditions": null,
+    "display": null,
+    "display_options": null,
+    "field": "show_fullscreen_control",
+    "group": "Controls",
+    "hidden": false,
+    "interface": "boolean",
+    "note": null,
+    "options": null,
+    "readonly": false,
+    "required": false,
+    "sort": 6,
+    "special": [
+      "cast-boolean"
+    ],
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "half"
+  },
+  "schema": {
+    "name": "show_fullscreen_control",
+    "table": "maps",
+    "data_type": "boolean",
+    "default_value": false,
+    "max_length": null,
+    "numeric_precision": null,
+    "numeric_scale": null,
+    "is_nullable": true,
+    "is_unique": false,
+    "is_indexed": false,
+    "is_primary_key": false,
+    "is_generated": false,
+    "generation_expression": null,
+    "has_auto_increment": false,
+    "foreign_key_table": null,
+    "foreign_key_column": null
+  }
+}

backend/directus-config/development/snapshot/fields/maps/show_request_password.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 18,
+    "sort": 17,
     "special": [
       "cast-boolean"
     ],

backend/directus-config/development/snapshot/fields/maps/tile_server.json

@@ -17,7 +17,7 @@
     },
     "readonly": false,
     "required": false,
-    "sort": 16,
+    "sort": 15,
     "special": [
       "alias",
       "no-data",

lib/src/Components/Map/Subcomponents/Controls/FullscreenControl.tsx

@@ -0,0 +1,41 @@
+import ArrowsPointingInIcon from '@heroicons/react/24/outline/ArrowsPointingInIcon'
+import ArrowsPointingOutIcon from '@heroicons/react/24/outline/ArrowsPointingOutIcon'
+import { useEffect, useState } from 'react'
+
+export const FullscreenControl = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement != null)
+    }
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange)
+    }
+  }, [])
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      void document.documentElement.requestFullscreen()
+    } else {
+      void document.exitFullscreen()
+    }
+  }
+
+  return (
+    <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
+      <div
+        className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
+        onClick={toggleFullscreen}
+      >
+        {isFullscreen ? (
+          <ArrowsPointingInIcon className='tw:stroke-[2.5]' />
+        ) : (
+          <ArrowsPointingOutIcon className='tw:stroke-[2.5]' />
+        )}
+      </div>
+    </div>
+  )
+}

lib/src/Components/Map/UtopiaMap.tsx

@@ -53,6 +53,7 @@ function UtopiaMap({
   showLayerControl = true,
   showZoomControl = false,
   showThemeControl = false,
+  showFullscreenControl = false,
   defaultTheme,
   donationWidget,
   expandLayerControl,
@@ -81,6 +82,8 @@ function UtopiaMap({
   showZoomControl?: boolean
   /** show a widget to switch the theme */
   showThemeControl?: boolean
+  /** show fullscreen control widget (default false) */
+  showFullscreenControl?: boolean
   /** the defaut theme */
   defaultTheme?: string
   /** ask to donate to the Utopia Project OpenCollective campaign (default false) */
@@ -106,6 +109,7 @@ function UtopiaMap({
           showFilterControl={showFilterControl}
           showGratitudeControl={showGratitudeControl}
           showLayerControl={showLayerControl}
+          showFullscreenControl={showFullscreenControl}
           donationWidget={donationWidget}
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -36,6 +36,7 @@ import { useTags } from './hooks/useTags'
 import AddButton from './Subcomponents/AddButton'
 import { Control } from './Subcomponents/Controls/Control'
 import { FilterControl } from './Subcomponents/Controls/FilterControl'
+import { FullscreenControl } from './Subcomponents/Controls/FullscreenControl'
 import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
 import { LayerControl } from './Subcomponents/Controls/LayerControl'
 import { SearchControl } from './Subcomponents/Controls/SearchControl'
@@ -51,6 +52,7 @@ export function UtopiaMapInner({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
+  showFullscreenControl = false,
   showThemeControl = false,
   defaultTheme = '',
   donationWidget,
@@ -63,6 +65,7 @@ export function UtopiaMapInner({
   showFilterControl?: boolean
   showLayerControl?: boolean
   showGratitudeControl?: boolean
+  showFullscreenControl?: boolean
   donationWidget?: boolean
   showThemeControl?: boolean
   defaultTheme?: string
@@ -276,6 +279,7 @@ export function UtopiaMapInner({
         <TagsControl />
       </Control>
       <Control position='bottomLeft' zIndex='999' absolute>
+        {showFullscreenControl && <FullscreenControl />}
         {showFilterControl && <FilterControl />}
         {showLayerControl && <LayerControl expandLayerControl={expandLayerControl ?? false} />}
         {showGratitudeControl && <GratitudeControl />}