Use Konva groups instead of layers.

doc/changelog.md

@@ -36,7 +36,7 @@ Syntax: `- short text describing the change _(Your Name)_`
 - _()_
 - _()_
 - _()_
-- _()_
+- Use Konva groups instead of Layers _(Moritz)_
 - _()_
 - _()_
 - _()_

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

@@ -19,7 +19,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React, { useEffect, useRef, useState } from 'react';
-import { Layer, Rect, Stage, Transformer } from 'react-konva';
+import { Group, Layer, Rect, Stage, Transformer } from 'react-konva';
 
 export const TEST_IDS = Object.freeze({
   CANVAS: 'base-stage__canvas',
@@ -277,47 +277,49 @@ export const BaseStage = ({
         x={stage.x}
         y={stage.y}
       >
-        {children}
         <Layer>
-          {/* Tooltip */}
-          <MapLabel
-            content={tooltipContent}
-            visible={tooltipContent !== ''}
-            scaleX={2 / stage.scale}
-            scaleY={2 / stage.scale}
-            x={tooltipPosition.x}
-            y={tooltipPosition.y}
-          />
-          <Rect
-            x={selectionRectAttrs.x}
-            y={selectionRectAttrs.y}
-            width={selectionRectAttrs.width}
-            height={selectionRectAttrs.height}
-            fill={'blue'}
-            visible={selectionRectAttrs.isVisible}
-            opacity={0.2}
-            name="selectionRect"
-          />
-          <Transformer
-            listening={!isReadOnly}
-            // We need to manually disable selection when we are transforming
-            onTransformStart={() => {
-              selectable = false;
-            }}
-            onTransformEnd={() => {
-              selectable = true;
-            }}
-            onMouseDown={() => {
-              selectable = false;
-            }}
-            onMouseUp={() => {
-              selectable = true;
-            }}
-            ref={transformerRef}
-            name="transformer"
-            anchorSize={8}
-            enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
-          />
+          {children}
+          <Group>
+            {/* Tooltip */}
+            <MapLabel
+              content={tooltipContent}
+              visible={tooltipContent !== ''}
+              scaleX={2 / stage.scale}
+              scaleY={2 / stage.scale}
+              x={tooltipPosition.x}
+              y={tooltipPosition.y}
+            />
+            <Rect
+              x={selectionRectAttrs.x}
+              y={selectionRectAttrs.y}
+              width={selectionRectAttrs.width}
+              height={selectionRectAttrs.height}
+              fill={'blue'}
+              visible={selectionRectAttrs.isVisible}
+              opacity={0.2}
+              name="selectionRect"
+            />
+            <Transformer
+              listening={!isReadOnly}
+              // We need to manually disable selection when we are transforming
+              onTransformStart={() => {
+                selectable = false;
+              }}
+              onTransformEnd={() => {
+                selectable = true;
+              }}
+              onMouseDown={() => {
+                selectable = false;
+              }}
+              onMouseUp={() => {
+                selectable = true;
+              }}
+              ref={transformerRef}
+              name="transformer"
+              anchorSize={8}
+              enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
+            />
+          </Group>
         </Layer>
       </Stage>
       {/** Panel to display something from different layers */}

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

@@ -2,20 +2,20 @@ import { Grid } from '@/features/map_planning/layers/_frontend_only/grid/groups/
 import { YardStick } from '@/features/map_planning/layers/_frontend_only/grid/groups/YardStick';
 import useMapStore from '@/features/map_planning/store/MapStore';
 import Konva from 'konva/cmj';
-import { Layer } from 'react-konva';
+import { Group } 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}>
+    <Group 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>
+    </Group>
   );
 };

frontend/src/features/map_planning/layers/base/BaseLayer.tsx

@@ -4,7 +4,7 @@ import useMapStore from '@/features/map_planning/store/MapStore';
 import { LayerConfigWithListenerRegister } from '@/features/map_planning/types/layer-config';
 import { COLOR_EDITOR_HIGH_VISIBILITY } from '@/utils/constants';
 import { useCallback, useEffect, useState } from 'react';
-import { Circle, Layer, Line } from 'react-konva';
+import { Circle, Group, Line } from 'react-konva';
 
 type BaseLayerProps = LayerConfigWithListenerRegister;
 
@@ -61,7 +61,7 @@ const BaseLayer = (props: BaseLayerProps) => {
   const scale = MAP_PIXELS_PER_METER / pixelsPerMeter;
 
   return (
-    <Layer {...layerProps} listening={false}>
+    <Group {...layerProps} listening={false}>
       {cleanImagePath && (
         <NextcloudKonvaImage
           path={cleanImagePath}
@@ -93,7 +93,7 @@ const BaseLayer = (props: BaseLayerProps) => {
         strokeWidth={editorLongestSide / 500}
         stroke={COLOR_EDITOR_HIGH_VISIBILITY}
       />
-    </Layer>
+    </Group>
   );
 };
 

frontend/src/features/map_planning/layers/plant/PlantsLayer.tsx

@@ -19,7 +19,7 @@ import { PlantNameFromPlant } from '@/utils/plant-naming';
 import Konva from 'konva';
 import { KonvaEventListener, KonvaEventObject, Node } from 'konva/lib/Node';
 import { useCallback, useEffect, useRef } from 'react';
-import { Layer } from 'react-konva';
+import { Group } from 'react-konva';
 import * as uuid from 'uuid';
 
 // For performance reasons add limit for amount of plants inside a plant field
@@ -276,12 +276,12 @@ function PlantsLayer(props: PlantsLayerProps) {
   return (
     <>
       <PlantLayerRelationsOverlay />
-      <Layer {...props} ref={layerRef} name={`${LayerType.Plants}`}>
+      <Group {...props} ref={layerRef} name={`${LayerType.Plants}`}>
         {plants.map((o) => (
           <PlantingElement planting={o} key={o.id} />
         ))}
         {plants.map((o) => showPlantLabels && <PlantLabel planting={o} key={o.id} />)}
-      </Layer>
+      </Group>
     </>
   );
 }

frontend/src/features/map_planning/layers/plant/components/PlantLayerRelationsOverlay.tsx

@@ -2,7 +2,7 @@ import { useRelations } from '../hooks/useRelations';
 import { LayerType, RelationType } from '@/api_types/definitions';
 import useMapStore from '@/features/map_planning/store/MapStore';
 import { useEffect, useMemo, useState } from 'react';
-import { Layer, Line } from 'react-konva';
+import { Group, Line } from 'react-konva';
 
 const relationColors = {
   [RelationType.Antagonist]: '#f005',
@@ -66,7 +66,7 @@ export function PlantLayerRelationsOverlay() {
   }, [data, layers]);
 
   return (
-    <Layer listening={false}>
+    <Group listening={false}>
       {!isLoading && lineEnd && relatedVisiblePlantings
         ? relatedVisiblePlantings.map((s) => {
             const relation = data?.get(s.attrs.plantId)?.relation;
@@ -82,6 +82,6 @@ export function PlantLayerRelationsOverlay() {
             );
           })
         : null}
-    </Layer>
+    </Group>
   );
 }

frontend/src/features/map_planning/utils/ShapesSelection.ts

@@ -1,9 +1,12 @@
 import { SelectionRectAttrs } from '../types/SelectionRectAttrs';
+import Konva from 'konva';
 import { Shape, ShapeConfig } from 'konva/lib/Shape';
 import { Stage } from 'konva/lib/Stage';
 import { Util } from 'konva/lib/Util';
 import { Transformer } from 'konva/lib/shapes/Transformer';
 
+import Group = Konva.Group;
+
 // Keep track of our previously selected shapes so we can trigger the selection
 // only if we have new shapes in our bounds. This fixes a bug where deselection
 // would happen after you moved a single or a group of selected shapes.
@@ -23,10 +26,12 @@ export const selectIntersectingShapes = (
   if (stageRef.current.children === null) return;
 
   // we don't always have to look for them, we can store them
-  const allShapes = stageRef.current.children
+  const allShapes = stageRef.current.children?.[0].children
     //filter out layers which are not selected
     ?.filter((layer) => layer.attrs.listening)
-    .flatMap((layer) => layer.children)
+    // All PermaplanT layers are displayed as a single Konva layer.
+    // It might be possible to
+    .flatMap((layer) => (layer instanceof Group ? layer.children : layer))
     .filter((shape) => {
       // To exclude Konva's transformer, check if node contains children.
       // 'listening' is explicitly checked for '!== false' because