feat: display meter grid in map when uploading floor plan image

Refs: #14

workspaces/frontend/src/components/FloorPlanPaneSideBar.spec.ts

@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import type { ImageDimensions } from '../ts/ImageDimensions';
+import { viewport } from '../ts/ViewportSingleton';
+import FloorPlanPaneSideBar from './FloorPlanPaneSideBar.svelte';
+
+describe('FloorPlanPaneSideBar', () => {
+  it('should be initialized', async () => {
+    render(FloorPlanPaneSideBar);
+
+    expect(screen.getByTestId('floorPlanPane')).toBeInTheDocument();
+    expect(screen.getByTestId('floorPlanPane-form')).toBeInTheDocument();
+  });
+
+  describe('initialized with a marker', () => {
+    beforeEach(async () => {
+      viewport.getImageDimensions = vi.fn(() => {
+        return { width: 100, height: 200 } as ImageDimensions;
+      });
+
+      render(FloorPlanPaneSideBar);
+
+      fireEvent(document, new CustomEvent('floorplan', { detail: { action: 'open' } }));
+    });
+
+    it('should display image dimensions', async () => {
+      expect(screen.getByTestId('floorPlanPane-dimensions')).toBeInTheDocument();
+      expect(screen.getByTestId('floorPlanPane-dimensions').textContent).toEqual('100 x 200');
+    });
+  });
+});

workspaces/frontend/src/components/FloorPlanPaneSideBar.svelte

@@ -17,11 +17,12 @@
   let originalImageDimensions: ImageDimensions;
 
   document.addEventListener('floorplan', (e: CustomEvent) => {
-    if (e.detail['action'] === 'upload') {
+    if (e.detail['action'] === 'open') {
       open = true;
       originalImage = viewport.getImageUrl();
       imageDimensions = viewport.getImageDimensions();
       originalImageDimensions = structuredClone(imageDimensions);
+      viewport.showGrid();
     }
   });
 
@@ -52,6 +53,7 @@
       open = false;
       imageFileInput = undefined;
       files = undefined;
+      viewport.hideGrid();
     }
   };
 
@@ -63,6 +65,7 @@
     imageManipulation.scaleY = 100;
     imageFileInput.value = '';
     await viewport.updateImage(originalImageDimensions, originalImage);
+    viewport.hideGrid();
   };
 </script>
 
@@ -93,7 +96,7 @@
         {#if imageDimensions}
           <p>
             <b>{$_(`location.sidebar.dimensions`)}</b>
-            {imageDimensions.width} x {imageDimensions.height}
+            <span data-testid="floorPlanPane-dimensions">{imageDimensions.width} x {imageDimensions.height}</span>
           </p>
         {/if}
       </div>

workspaces/frontend/src/components/FloorPlanUploadButton.svelte

@@ -7,7 +7,7 @@
   let title = $_('location.upload');
 
   const openSidebar = () => {
-    document.dispatchEvent(new CustomEvent('floorplan', { detail: { action: 'upload', imageOverlay: targetImageOverlay } }));
+    document.dispatchEvent(new CustomEvent('floorplan', { detail: { action: 'open', imageOverlay: targetImageOverlay } }));
   };
 </script>
 

workspaces/frontend/src/mocks/mockViewportSingleton.ts

@@ -1,6 +1,6 @@
 import { beforeEach, vi } from 'vitest';
 import type { LatLng, Layer, Map, PointExpression } from 'leaflet';
-import { point, latLng, Renderer } from 'leaflet';
+import {point, latLng, Renderer, latLngBounds} from 'leaflet';
 import { setViewport, Viewport } from '../ts/ViewportSingleton';
 import type { ImageDimensions } from '../ts/ImageDimensions';
 
@@ -17,6 +17,9 @@ const mockMap = {
   layerPointToLatLng: () => latLng(1, 2),
   getZoomScale: () => 2,
   getSize: () => point(10, 10),
+  getBounds: () => latLngBounds([1, 2], [3, 4]),
+  getZoom: () => 1,
+  addLayer: vi.fn(),
   project: () => point(10, 10),
   on: () => vi.fn(),
   off: () => vi.fn(),
@@ -33,6 +36,9 @@ const _mockViewport = {
 
   updateImage: (_: ImageDimensions, __?: string) => vi.fn(),
 
+  showGrid: vi.fn(),
+  hideGrid: vi.fn(),
+
   reset: vi.fn(),
 
   flyTo: vi.fn(),

workspaces/frontend/src/stores/markerTypes.json

@@ -11,8 +11,8 @@
       {
         "name": "table",
         "mapIcon": "square",
-        "mapWidth": 100,
-        "mapHeight": 60
+        "mapWidth": 150,
+        "mapHeight": 80
       }
     ],
     "allowedAttributes": [
@@ -34,8 +34,8 @@
       {
         "name": "person",
         "mapIcon": "person",
-        "mapWidth": 80,
-        "mapHeight": 80
+        "mapWidth": 70,
+        "mapHeight": 70
       }
     ],
     "allowedAttributes": [
@@ -138,38 +138,38 @@
       {
         "name": "unisex",
         "mapIcon": "wc",
-        "mapWidth": 100,
-        "mapHeight": 100
+        "mapWidth": 50,
+        "mapHeight": 50
       },
       {
         "name": "ladies",
         "mapIcon": "woman",
-        "mapWidth": 100,
-        "mapHeight": 100
+        "mapWidth": 50,
+        "mapHeight": 50
       },
       {
         "name": "gentlemens",
         "mapIcon": "man",
-        "mapWidth": 100,
-        "mapHeight": 100
+        "mapWidth": 50,
+        "mapHeight": 50
       },
       {
-        "name": "accessable",
-        "mapIcon": "accessable",
-        "mapWidth": 100,
-        "mapHeight": 100
+        "name": "accessible",
+        "mapIcon": "accessible",
+        "mapWidth": 50,
+        "mapHeight": 50
       },
       {
         "name": "baby",
         "mapIcon": "baby-changing-station",
-        "mapWidth": 100,
-        "mapHeight": 100
+        "mapWidth": 50,
+        "mapHeight": 50
       },
       {
         "name": "bathroom",
         "mapIcon": "bathroom",
-        "mapWidth": 100,
-        "mapHeight": 100
+        "mapWidth": 50,
+        "mapHeight": 50
       }
     ],
     "allowedAttributes": [
@@ -226,44 +226,44 @@
       {
         "name": "other",
         "mapIcon": "widgets",
-        "mapWidth": 50,
-        "mapHeight": 50
+        "mapWidth": 40,
+        "mapHeight": 40
       },
       {
         "name": "printer",
         "mapIcon": "print",
-        "mapWidth": 50,
-        "mapHeight": 50
+        "mapWidth": 40,
+        "mapHeight": 40
       },
       {
         "name": "fridge",
         "mapIcon": "kitchen",
-        "mapWidth": 50,
-        "mapHeight": 70
+        "mapWidth": 40,
+        "mapHeight": 40
       },
       {
         "name": "coffee",
         "mapIcon": "coffee",
-        "mapWidth": 50,
-        "mapHeight": 50
+        "mapWidth": 40,
+        "mapHeight": 40
       },
       {
         "name": "shelf",
         "mapIcon": "shelves",
-        "mapWidth": 50,
-        "mapHeight": 50
+        "mapWidth": 40,
+        "mapHeight": 40
       },
       {
         "name": "water",
         "mapIcon": "water-full",
-        "mapWidth": 50,
-        "mapHeight": 50
+        "mapWidth": 40,
+        "mapHeight": 40
       },
       {
         "name": "play",
         "mapIcon": "videogame-asset",
-        "mapWidth": 50,
-        "mapHeight": 50
+        "mapWidth": 40,
+        "mapHeight": 40
       }
     ],
     "allowedAttributes": [

workspaces/frontend/src/ts/Grid.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { viewport } from './ViewportSingleton';
 import { Grid } from './Grid';
 
@@ -7,6 +7,11 @@ describe('Grid', () => {
   const showOriginLabel = false;
   const redrawEvent = 'moveend resize';
   const hidden = false;
+  const zoomSpacing = [
+    { startZoomLevel: -3, endZoomLevel: -2, spacing: 200 },
+    { startZoomLevel: -1, endZoomLevel: 0, spacing: 100 },
+    { startZoomLevel: 0, endZoomLevel: 4, spacing: 50 },
+  ];
   let grid;
 
   beforeEach(async () => {
@@ -15,23 +20,47 @@ describe('Grid', () => {
       showOriginLabel: showOriginLabel,
       redrawEvent: redrawEvent,
       hidden: hidden,
-      zoomSpacing: [
-        { startZoomLevel: -3, endZoomLevel: -2, spacing: 200 },
-        { startZoomLevel: -1, endZoomLevel: 0, spacing: 100 },
-        { startZoomLevel: 0, endZoomLevel: 4, spacing: 50 },
-      ],
+      zoomSpacing: zoomSpacing,
     });
     grid.onAdd(viewport.getLeafletMap());
   });
 
-  // it('should be initialized with default values', () => {
-  //   const defaultGrid = new Grid();
-  //   defaultGrid.onAdd(viewport.getLeafletMap());
-  //
-  //   expect(defaultGrid.options.labelSteps).toBe(100);
-  //   expect(defaultGrid.options.showOriginLabel).toBe(true);
-  //   expect(defaultGrid.options.redrawEvent).toBe('moveend');
-  //   expect(defaultGrid.options.hidden).toBe(false);
-  //   expect(defaultGrid.options.zoomSpacing).toEqual([]);
-  // });
+  it('should be initialized with default values', () => {
+    const defaultGrid = new Grid();
+    defaultGrid.onAdd(viewport.getLeafletMap());
+
+    expect(defaultGrid.options.labelSteps).toBe(100);
+    expect(defaultGrid.options.showOriginLabel).toBe(true);
+    expect(defaultGrid.options.redrawEvent).toBe('moveend');
+    expect(defaultGrid.options.hidden).toBe(false);
+    expect(defaultGrid.options.zoomSpacing).toEqual([]);
+  });
+
+  it('should show a hidden grid', () => {
+    const hiddenGrid = new Grid({
+      hidden: true,
+      zoomSpacing: zoomSpacing,
+    });
+    hiddenGrid.onAdd(viewport.getLeafletMap());
+
+    expect(hiddenGrid.options.hidden).toBe(true);
+
+    hiddenGrid.show();
+
+    expect(hiddenGrid.options.hidden).toBe(false);
+  });
+
+  it('should hide a visible grid', () => {
+    const visibleGrid = new Grid({
+      hidden: false,
+      zoomSpacing: zoomSpacing,
+    });
+    visibleGrid.onAdd(viewport.getLeafletMap());
+
+    expect(visibleGrid.options.hidden).toBe(false);
+
+    visibleGrid.hide();
+
+    expect(visibleGrid.options.hidden).toBe(true);
+  });
 });