Grid layer.

doc/usecases/done/gridlayer.md

@@ -0,0 +1,21 @@
+# Use Case: Grid Layer
+
+## Summary
+
+- **Scope:** Grid Layer
+- **Level:** User Goal
+- **Actors:** App User
+- **Brief:** The app will display a fixed scale coordinate grid.
+- **Status:** Done
+- **Assignee:** Moritz
+
+## Scenarios
+
+- **Precondition:**
+    - User has opened the map.
+- **Main success scenario:**
+    - The user sees a fixed scale coordinate grid with 10 centimeter spacing.
+    - Lines that are a whole number of meters away from the origin are drawn boldly.
+- **Non-functional Constraints:**
+    - Support for changing viewport (zoom, position, etc.)
+    - The grid layer is only available in the frontend.

frontend/src/features/map_planning/components/BaseStage.tsx

@@ -37,6 +37,8 @@ export const BaseStage = ({
   selectable = true,
   draggable = true,
 }: BaseStageProps) => {
+  const updateMapBounds = useMapStore((store) => store.updateMapBounds);
+
   // Represents the state of the stage
   const [stage, setStage] = useState({
     scale: 1,
@@ -79,21 +81,30 @@ export const BaseStage = ({
   const onStageWheel = (e: KonvaEventObject<WheelEvent>) => {
     e.evt.preventDefault();
 
-    const stage = e.target.getStage();
-    if (stage === null) return;
+    const targetStage = e.target.getStage();
+    if (targetStage === null) return;
 
-    const pointerVector = stage.getPointerPosition();
+    const pointerVector = targetStage.getPointerPosition();
     if (pointerVector === null) return;
 
     if (e.evt.ctrlKey) {
       if (zoomable) {
-        handleZoom(pointerVector, e.evt.deltaY, stage, setStage);
+        handleZoom(pointerVector, e.evt.deltaY, targetStage, setStage);
       }
     } else {
       if (scrollable) {
-        handleScroll(e.evt.deltaX, e.evt.deltaY, stage);
+        handleScroll(e.evt.deltaX, e.evt.deltaY, targetStage);
       }
     }
+
+    if (stageRef.current === null) return;
+
+    updateMapBounds({
+      x: Math.floor(stageRef.current.getAbsolutePosition().x / stage.scale),
+      y: Math.floor(stageRef.current.getAbsolutePosition().y / stage.scale),
+      width: Math.floor(window.innerWidth / stage.scale),
+      height: Math.floor(window.innerHeight / stage.scale),
+    });
   };
 
   // Event listener responsible for allowing dragging of the stage only with the wheel mouse button
@@ -117,6 +128,20 @@ export const BaseStage = ({
     }
   };
 
+  const onStageDragEnd = (e: KonvaEventObject<DragEvent>) => {
+    if (e.evt === null || e.evt === undefined) return;
+    e.evt.preventDefault();
+
+    if (stageRef.current === null) return;
+
+    updateMapBounds({
+      x: Math.floor(stageRef.current.getAbsolutePosition().x / stage.scale),
+      y: Math.floor(stageRef.current.getAbsolutePosition().y / stage.scale),
+      width: Math.floor(window.innerWidth / stage.scale),
+      height: Math.floor(window.innerHeight / stage.scale),
+    });
+  };
+
   // Event listener responsible for updating the selection rectangle
   const onMouseMove = (e: KonvaEventObject<MouseEvent>) => {
     e.evt.preventDefault();
@@ -180,6 +205,7 @@ export const BaseStage = ({
         width={window.innerWidth}
         height={window.innerHeight}
         onWheel={onStageWheel}
+        onDragEnd={onStageDragEnd}
         onDragStart={onStageDragStart}
         onMouseDown={onStageMouseDown}
         onMouseMove={onMouseMove}

frontend/src/features/map_planning/components/Map.tsx

@@ -9,6 +9,7 @@ import { Layers } from './toolbar/Layers';
 import { Toolbar } from './toolbar/Toolbar';
 import { LayerDto, LayerType } from '@/bindings/definitions';
 import IconButton from '@/components/Button/IconButton';
+import { GridLayer } from '@/features/map_planning/layers/_frontend_only/grid/GridLayer';
 import { ReactComponent as ArrowIcon } from '@/icons/arrow.svg';
 import { ReactComponent as MoveIcon } from '@/icons/move.svg';
 import { ReactComponent as PlantIcon } from '@/icons/plant.svg';
@@ -155,6 +156,7 @@ export const Map = ({ layers }: MapProps) => {
           opacity={untrackedState.layers.plants.opacity}
           listening={selectedLayer.type_ === LayerType.Plants}
         ></PlantsLayer>
+        <GridLayer opacity={1} visible={true}></GridLayer>
       </BaseStage>
       <section className="min-h-full bg-neutral-100 dark:bg-neutral-200-dark">
         <Toolbar

frontend/src/features/map_planning/layers/_frontend_only/grid/GridLayer.tsx

@@ -0,0 +1,74 @@
+import useMapStore from '@/features/map_planning/store/MapStore';
+import Konva from 'konva/cmj';
+import { Layer, Group, Line, Text } from 'react-konva';
+
+export const GridLayer = (props: Konva.LayerConfig) => {
+  const mapBounds = useMapStore((state) => state.untrackedState.editorBounds);
+
+  return (
+    <Layer listening={false} visible={props.visible} opacity={props.opacity}>
+      <Grid x={mapBounds.x} y={mapBounds.y} width={mapBounds.width} height={mapBounds.height} />
+      <YardStick
+        x={mapBounds.x}
+        y={mapBounds.y}
+        width={mapBounds.width}
+        height={mapBounds.height}
+      />
+    </Layer>
+  );
+};
+
+interface GridProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const Grid = (rect: GridProps) => {
+  let step = 10;
+  let dynamicStrokeWidth = rect.width / 1000;
+  if (rect.width > 10000) {
+    step = 1000;
+  } else if (rect.width > 1000) {
+    step = 100;
+  }
+
+  const startX = -rect.x - rect.width - ((-rect.x - rect.width) % step);
+  const startY = -rect.y - rect.height - ((-rect.y - rect.height) % step);
+
+  const endX = -rect.x + rect.width;
+  const endY = -rect.y + rect.height;
+
+  const lines = [];
+  for (let y = startY; y < endY; y += step) {
+    lines.push(
+      <Line strokeWidth={dynamicStrokeWidth}
+            stroke={'red'}
+            points={[startX, y, endX, y]}
+            dash={[dynamicStrokeWidth, step - dynamicStrokeWidth]}></Line>,
+    );
+  }
+
+  return (
+    <Group>
+      {lines}
+    </Group>
+  );
+};
+
+const YardStick = (rect: GridProps) => {
+  const dynamicStrokeWidth = rect.width / 1000;
+
+  const startX = -rect.x + rect.width / 20;
+  const endX = -rect.x + rect.width / 20 + 100;
+
+  const y = -rect.y + rect.width / 30;
+
+  return (
+    <Group>
+      <Line strokeWidth={dynamicStrokeWidth} stroke={'#D0D0D0'} points={[startX, y, endX, y]} />
+      <Text x={startX} y={y * 0.995} fill={'#D0D0D0'} text={'1m'} fontSize={dynamicStrokeWidth * 10} />
+    </Group>
+  );
+};

frontend/src/features/map_planning/layers/_frontend_only/index.ts

@@ -0,0 +1,3 @@
+export enum FrontendOnlyLayerType {
+  Grid = 'grid',
+}

frontend/src/features/map_planning/store/MapStoreTypes.ts

@@ -1,7 +1,14 @@
 import { LayerDto, LayerType, PlantingDto, PlantsSummaryDto } from '@/bindings/definitions';
+import { FrontendOnlyLayerType } from '@/features/map_planning/layers/_frontend_only';
 import Konva from 'konva';
 import { Node } from 'konva/lib/Node';
 
+/**
+ * This type combines layers that are only available in the frontend
+ * with layers that are also reflected in the backend.
+ */
+export type CombinedLayerType = LayerType | FrontendOnlyLayerType;
+
 /**
  * An action is a change to the map state, initiated by the user.
  * It knows how to apply itself to the map state, how to reverse itself, and how to execute itself.
@@ -102,14 +109,22 @@ export type History = Array<Action<unknown, unknown>>;
 export interface UntrackedMapSlice {
   untrackedState: UntrackedMapState;
   stageRef: React.RefObject<Konva.Stage>;
+  updateMapBounds: (bounds: BoundsRect) => void;
   updateSelectedLayer: (selectedLayer: LayerDto) => void;
-  updateLayerVisible: (layerName: LayerType, visible: UntrackedLayerState['visible']) => void;
-  updateLayerOpacity: (layerName: LayerType, opacity: UntrackedLayerState['opacity']) => void;
+  updateLayerVisible: (
+    layerName: CombinedLayerType,
+    visible: UntrackedLayerState['visible'],
+  ) => void;
+  updateLayerOpacity: (
+    layerName: CombinedLayerType,
+    opacity: UntrackedLayerState['opacity'],
+  ) => void;
   selectPlantForPlanting: (plant: PlantsSummaryDto | null) => void;
   selectPlanting: (planting: PlantingDto | null) => void;
 }
 
 const LAYER_TYPES = Object.values(LayerType);
+const COMBINED_LAYER_TYPES = [...Object.values(LayerType), ...Object.values(FrontendOnlyLayerType)];
 
 export const TRACKED_DEFAULT_STATE: TrackedMapState = {
   layers: LAYER_TYPES.reduce(
@@ -133,14 +148,15 @@ export const TRACKED_DEFAULT_STATE: TrackedMapState = {
 
 export const UNTRACKED_DEFAULT_STATE: UntrackedMapState = {
   mapId: -1,
+  editorBounds: { x: 0, y: 0, width: 0, height: 0 },
   selectedLayer: {
     id: -1,
     is_alternative: false,
     name: 'none',
     type_: LayerType.Base,
     map_id: -1,
   },
-  layers: LAYER_TYPES.reduce(
+  layers: COMBINED_LAYER_TYPES.reduce(
     (acc, layerName) => ({
       ...acc,
       [layerName]: {
@@ -214,7 +230,7 @@ export type TrackedBaseLayerState = {
  * The state of the layers of the map.
  */
 export type UntrackedLayers = {
-  [key in Exclude<LayerType, LayerType.Plants>]: UntrackedLayerState;
+  [key in Exclude<CombinedLayerType, LayerType.Plants>]: UntrackedLayerState;
 } & {
   [LayerType.Plants]: UntrackedPlantLayerState;
 };
@@ -236,6 +252,17 @@ export type TrackedMapState = {
  */
 export type UntrackedMapState = {
   mapId: number;
+  editorBounds: BoundsRect;
   selectedLayer: LayerDto;
   layers: UntrackedLayers;
 };
+
+/**
+ * Represents a simple rectangle with width, height and position.
+ */
+export type BoundsRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};

frontend/src/features/map_planning/store/UntrackedMapStore.ts

@@ -1,4 +1,9 @@
-import { TrackedMapSlice, UNTRACKED_DEFAULT_STATE, UntrackedMapSlice } from './MapStoreTypes';
+import {
+  BoundsRect,
+  TrackedMapSlice,
+  UNTRACKED_DEFAULT_STATE,
+  UntrackedMapSlice,
+} from './MapStoreTypes';
 import Konva from 'konva';
 import { createRef } from 'react';
 import { StateCreator } from 'zustand';
@@ -11,6 +16,15 @@ export const createUntrackedMapSlice: StateCreator<
 > = (set, get) => ({
   untrackedState: UNTRACKED_DEFAULT_STATE,
   stageRef: createRef<Konva.Stage>(),
+  updateMapBounds(bounds: BoundsRect) {
+    set((state) => ({
+      ...state,
+      untrackedState: {
+        ...state.untrackedState,
+        editorBounds: bounds,
+      },
+    }));
+  },
   updateSelectedLayer(selectedLayer) {
     // Clear the transformer's nodes.
     get().transformer.current?.nodes([]);