Moved notes to be above drawings

src/components/map/Map.js

@@ -411,6 +411,7 @@ function Map({
       onNoteDragEnd={() =>
         setNoteDraggingOptions({ ...noteDraggingOptions, dragging: false })
       }
+      fadeOnHover={selectedToolId === "drawing"}
     />
   );
 
@@ -455,8 +456,8 @@ function Map({
       disabledControls={disabledControls}
     >
       {mapGrid}
-      {mapNotes}
       {mapDrawing}
+      {mapNotes}
       {mapTokens}
       {mapFog}
       {mapPointer}

src/components/map/MapMeasure.js

@@ -10,7 +10,6 @@ import {
   getUpdatedShapeData,
   getStrokeWidth,
 } from "../../helpers/drawing";
-import { getRelativePointerPositionNormalized } from "../../helpers/konva";
 import * as Vector2 from "../../helpers/vector2";
 
 function MapMeasure({ map, selectedToolSettings, active, gridSize }) {

src/components/map/MapNotes.js

@@ -7,7 +7,6 @@ import MapStageContext from "../../contexts/MapStageContext";
 import AuthContext from "../../contexts/AuthContext";
 
 import { getBrushPosition } from "../../helpers/drawing";
-import { getRelativePointerPositionNormalized } from "../../helpers/konva";
 
 import Note from "../note/Note";
 
@@ -24,6 +23,7 @@ function MapNotes({
   draggable,
   onNoteDragStart,
   onNoteDragEnd,
+  fadeOnHover,
 }) {
   const { interactionEmitter } = useContext(MapInteractionContext);
   const { userId } = useContext(AuthContext);
@@ -111,6 +111,7 @@ function MapNotes({
           onNoteChange={onNoteChange}
           onNoteDragStart={onNoteDragStart}
           onNoteDragEnd={onNoteDragEnd}
+          fadeOnHover={fadeOnHover}
         />
       ))}
       <Group ref={creatingNoteRef}>

src/components/note/Note.js

@@ -19,6 +19,7 @@ function Note({
   draggable,
   onNoteDragStart,
   onNoteDragEnd,
+  fadeOnHover,
 }) {
   const { userId } = useContext(AuthContext);
   const { mapWidth, mapHeight, setPreventMapInteraction } = useContext(
@@ -89,6 +90,19 @@ function Note({
     }
   }
 
+  const [noteOpacity, setNoteOpacity] = useState(1);
+  function handlePointerEnter() {
+    if (fadeOnHover) {
+      setNoteOpacity(0.5);
+    }
+  }
+
+  function handlePointerLeave() {
+    if (noteOpacity !== 1.0) {
+      setNoteOpacity(1.0);
+    }
+  }
+
   const [fontSize, setFontSize] = useState(1);
   useEffect(() => {
     const text = textRef.current;
@@ -160,7 +174,9 @@ function Note({
       onMouseUp={handlePointerUp}
       onTouchStart={handlePointerDown}
       onTouchEnd={handlePointerUp}
-      opacity={note.visible ? 1.0 : 0.5}
+      onMouseEnter={handlePointerEnter}
+      onMouseLeave={handlePointerLeave}
+      opacity={note.visible ? noteOpacity : 0.5}
     >
       {!note.textOnly && (
         <Rect