Added note text only mode

src/components/map/MapNotes.js

@@ -57,6 +57,7 @@ function MapNotes({
         visible: true,
         locked: false,
         color: "yellow",
+        textOnly: false,
       });
       setIsBrushDown(true);
     }

src/components/note/Note.js

@@ -149,7 +149,7 @@ function Note({
       onClick={handleClick}
       onTap={handleClick}
       width={noteWidth}
-      height={noteHeight}
+      height={note.textOnly ? undefined : noteHeight}
       offsetX={noteWidth / 2}
       offsetY={noteHeight / 2}
       draggable={draggable}
@@ -162,19 +162,23 @@ function Note({
       onTouchEnd={handlePointerUp}
       opacity={note.visible ? 1.0 : 0.5}
     >
-      <Rect
+      {!note.textOnly && (
-        width={noteWidth}
+        <Rect
-        height={noteHeight}
+          width={noteWidth}
-        shadowColor="rgba(0, 0, 0, 0.16)"
+          height={noteHeight}
-        shadowOffset={{ x: 0, y: 3 }}
+          shadowColor="rgba(0, 0, 0, 0.16)"
-        shadowBlur={6}
+          shadowOffset={{ x: 0, y: 3 }}
-        cornerRadius={0.25}
+          shadowBlur={6}
-        fill={colors[note.color]}
+          cornerRadius={0.25}
-      />
+          fill={colors[note.color]}
+        />
+      )}
       <Text
         text={note.text}
         fill={
-          note.color === "black" || note.color === "darkGray"
+          note.textOnly
+            ? colors[note.color]
+            : note.color === "black" || note.color === "darkGray"
             ? "white"
             : "black"
         }
@@ -184,7 +188,7 @@ function Note({
         fontSize={fontSize}
         wrap="word"
         width={noteWidth}
-        height={noteHeight}
+        height={note.textOnly ? undefined : noteHeight}
       />
       {/* Use an invisible text block to work out text sizing */}
       <Text visible={false} ref={textRef} text={note.text} wrap="none" />

src/components/note/NoteMenu.js

@@ -13,6 +13,8 @@ import LockIcon from "../../icons/TokenLockIcon";
 import UnlockIcon from "../../icons/TokenUnlockIcon";
 import ShowIcon from "../../icons/TokenShowIcon";
 import HideIcon from "../../icons/TokenHideIcon";
+import NoteIcon from "../../icons/NoteToolIcon";
+import TextIcon from "../../icons/NoteTextIcon";
 
 import AuthContext from "../../contexts/AuthContext";
 
@@ -75,6 +77,10 @@ function NoteMenu({
     note && onNoteChange({ ...note, locked: !note.locked });
   }
 
+  function handleModeChange() {
+    note && onNoteChange({ ...note, textOnly: !note.textOnly });
+  }
+
   function handleModalContent(node) {
     if (node) {
       // Focus input
@@ -209,6 +215,13 @@ function NoteMenu({
             >
               {note && note.locked ? <LockIcon /> : <UnlockIcon />}
             </IconButton>
+            <IconButton
+              onClick={handleModeChange}
+              title={note && note.textOnly ? "Note Mode" : "Text Mode"}
+              aria-label={note && note.textOnly ? "Note Mode" : "Text Mode"}
+            >
+              {note && note.textOnly ? <TextIcon /> : <NoteIcon />}
+            </IconButton>
           </Flex>
         )}
       </Box>

src/database.js

@@ -304,6 +304,20 @@ function loadVersions(db) {
           }
         });
     });
+
+  // 1.7.1 - Added note text only mode
+  db.version(18)
+    .stores({})
+    .upgrade((tx) => {
+      return tx
+        .table("states")
+        .toCollection()
+        .modify((state) => {
+          for (let id in state.notes) {
+            state.notes[id].textOnly = false;
+          }
+        });
+    });
 }
 
 // Get the dexie database used in DatabaseContext

src/icons/NoteTextIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+function NoteTextIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M2 20h20c1.1 0 2 .9 2 2s-.9 2-2 2H2c-1.1 0-2-.9-2-2s.9-2 2-2z" />
+      <path d="M10.63 3.93L6.06 15.58c-.27.68.23 1.42.97 1.42.43 0 .82-.27.98-.68L8.87 14h6.25l.87 2.32c.15.41.54.68.98.68.73 0 1.24-.74.97-1.42L13.37 3.93C13.14 3.37 12.6 3 12 3c-.6 0-1.15.37-1.37.93zM9.62 12L12 5.67 14.38 12H9.62z" />
+    </svg>
+  );
+}
+
+export default NoteTextIcon;