Added note support with markdown support. Scaling notes to 'always' fit the notes carousel. Some fixing around plan editor and carousel

2 years ago · 29961a11a3
parent 42fbad4673
commit 29961a11a3
28 changed files with 649 additions and 176 deletions
--- a/hejmorris.json
+++ b/hejmorris.json
@ -0,0 +1,101 @@
+{
+    "plan": [
+        {
+            "area_key": "1_1_1",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_4_0",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_2",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_4_1",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_6",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_9",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_3",
+            "notes": ""
+        },
+        {
+            "area_key": "1_1_4_0",
+            "notes": ""
+        },
+        {
+            "area_key": "1_2_4",
+            "notes": ""
+        },
+        {
+            "area_key": "1_2_7",
+            "notes": ""
+        },
+        {
+            "area_key": "1_2_9",
+            "notes": "{#ff00ff}(Hej morris)\n![The San Juan Mountains are beautiful!](https://mdg.imgix.net/assets/images/san-juan-mountains.jpg?auto=format&fit=clip&q=40&w=1080 \"San Juan Mountains\")\n\n{#ff00ff}(Hej morris)\n![The San Juan Mountains are beautiful!](https://mdg.imgix.net/assets/images/san-juan-mountains.jpg?auto=format&fit=clip&q=40&w=1080 \"San Juan Mountains\")"
+        },
+        {
+            "area_key": "1_3_town",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_3_1",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_7",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_9",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_10_1",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_9",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_13",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_14_1",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_14_2",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_8_2",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_5",
+            "notes": ""
+        },
+        {
+            "area_key": "1_3_town",
+            "notes": ""
+        },
+        {
+            "area_key": "1_2_14_2",
+            "notes": ""
+        }
+    ],
+    "current": 0
+}
--- a/imageplan.json
+++ b/imageplan.json
@ -0,0 +1 @@
+{"plan":[{"area_key":"1_1_town","notes":"{magenta}(Hey)\n![The San Juan Mountains are beautiful!](https://mdg.imgix.net/assets/images/san-juan-mountains.jpg?auto=format&fit=clip&q=40&w=1080 \"San Juan Mountains\")"},{"area_key":"1_1_1","notes":""},{"area_key":"1_1_2","notes":""}],"current":0}
--- a/nice.json
+++ b/nice.json
@ -0,0 +1 @@
+{"plan":[{"area_key":"1_1_town","notes":""},{"area_key":"1_1_1","notes":"{#ff00ff}(hej how)\ntest\n![The San Juan Mountains are beautiful!](https://mdg.imgix.net/assets/images/san-juan-mountains.jpg?auto=format&fit=clip&q=40&w=1080 \"San Juan Mountains\")"},{"area_key":"1_1_2","notes":""}],"current":0}
--- a/package.json
+++ b/package.json
@ -20,8 +20,12 @@
    "@angular/platform-browser": "^16.1.4",
    "@angular/platform-browser-dynamic": "^16.1.4",
    "@tauri-apps/api": "^1.2.0",
+    "@types/markdown-it": "^13.0.0",
    "@types/natural-compare": "^1.4.1",
+    "angular-resize-event": "^3.2.0",
    "fuzzr": "github:isark2/fuzzr#v0.3.1",
+    "markdown-it": "^13.0.1",
+    "markdown-it-color": "^2.1.1",
    "natural-compare": "^1.4.0",
    "ngx-moveable": "^0.48.1",
    "rxjs": "~7.8.1",
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@ -10,8 +10,8 @@ checksum = "fe438c63458706e03479442743baae6c88256498e6431708f6dfc520a26515d3"

 [[package]]
 name = "Underlayer"
-version = "0.2.2"
-source = "git+https://git.isark.me/isark/Underlay.git#f4858eba43a94ee8f7c0e7287f8ed6e451f25703"
+version = "0.2.3"
+source = "git+https://git.isark.me/isark/Underlay.git#60f3bf7bf3151e563687dcb22d1d4d4b0c18f43c"
 dependencies = [
 "crossbeam",
 "log",
@ -36,9 +36,9 @@ checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"

 [[package]]
 name = "aho-corasick"
-version = "1.0.2"
+version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43f6cb1bf222025340178f382c426f13757b2960e89779dfcb319c32542a5a41"
+checksum = "86b8f9420f797f2d9e935edf629310eb938a0d839f984e25327f3c7eed22300c"
 dependencies = [
 "memchr",
 ]
@ -109,7 +109,7 @@ dependencies = [
 "async-lock",
 "async-task",
 "concurrent-queue",
- "fastrand",
+ "fastrand 1.9.0",
 "futures-lite",
 "slab",
 ]
@ -142,15 +142,15 @@ dependencies = [
 "polling",
 "rustix 0.37.23",
 "slab",
- "socket2",
+ "socket2 0.4.9",
 "waker-fn",
 ]

 [[package]]
 name = "async-lock"
-version = "2.7.0"
+version = "2.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fa24f727524730b077666307f2734b4a1a1c57acb79193127dcc8914d5242dd7"
+checksum = "287272293e9d8c41773cec55e365490fe034813a2f172f502d6ddcf75b2f582b"
 dependencies = [
 "event-listener",
 ]
@ -181,7 +181,7 @@ checksum = "0e97ce7de6cf12de5d7226c73f5ba9811622f4db3a5b91b55c53e987e5f91cba"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -192,13 +192,13 @@ checksum = "ecc7ab41815b3c653ccd2978ec3255c81349336702dfdf62ee6f7069b12a3aae"

 [[package]]
 name = "async-trait"
-version = "0.1.71"
+version = "0.1.73"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a564d521dd56509c4c47480d00b80ee55f7e385ae48db5744c67ad50c92d2ebf"
+checksum = "bc00ceb34980c03614e35a3a4e218276a0a824e911d07651cd0d858a51e8c0f0"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -272,9 +272,9 @@ checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"

 [[package]]
 name = "bitflags"
-version = "2.3.3"
+version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "630be753d4e58660abd17930c71b647fe46c27ea6b63cc59e1e3851406972e42"
+checksum = "b4682ae6287fcf752ecaabbfcc7b6f9b72aa33933dc23a554d853aea8eea8635"

 [[package]]
 name = "block"
@ -301,7 +301,7 @@ dependencies = [
 "async-lock",
 "async-task",
 "atomic-waker",
- "fastrand",
+ "fastrand 1.9.0",
 "futures-lite",
 "log",
 ]
@ -400,9 +400,12 @@ dependencies = [

 [[package]]
 name = "cc"
-version = "1.0.79"
+version = "1.0.82"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "50d30906286121d95be3d479533b458f87493b30a4b5f79a607db8f5d11aa91f"
+checksum = "305fe645edc1442a0fa8b6726ba61d422798d37a52e12eaecf4b022ebbb88f01"
+dependencies = [
+ "libc",
+]

 [[package]]
 name = "cesu8"
@ -432,9 +435,9 @@ dependencies = [

 [[package]]
 name = "cfg-expr"
-version = "0.15.3"
+version = "0.15.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "215c0072ecc28f92eeb0eea38ba63ddfcb65c2828c46311d646f1a3ff5f9841c"
+checksum = "b40ccee03b5175c18cde8f37e7d2a33bcef6f8ec8f7cc0d81090d1bb380949c9"
 dependencies = [
 "smallvec",
 "target-lexicon",
@ -691,7 +694,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -725,7 +728,7 @@ dependencies = [
 "proc-macro2",
 "quote",
 "strsim",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -736,7 +739,16 @@ checksum = "836a9bbc7ad63342d6d6e7b815ccab164bc77a2d95d84bc3117a8c0d5c98e2d5"
 dependencies = [
 "darling_core",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
+]
+
+[[package]]
+name = "deranged"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7684a49fb1af197853ef7b2ee694bc1f5b4179556f1e5710e1760c5db6f5e929"
+dependencies = [
+ "serde",
 ]

 [[package]]
@ -888,7 +900,7 @@ checksum = "5e9a1f9f7d83e59740248a6e14ecf93929ade55027844dfcea78beafccc15745"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -899,9 +911,9 @@ checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"

 [[package]]
 name = "errno"
-version = "0.3.1"
+version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4bcfec3a70f97c962c307b2d2c56e358cf1d00b558d74262b5f929ee8cc7e73a"
+checksum = "6b30f669a7961ef1631673d2766cc92f52d64f7ef354d4fe0ddfd30ed52f0f4f"
 dependencies = [
 "errno-dragonfly",
 "libc",
@ -933,6 +945,12 @@ dependencies = [
 "instant",
 ]

+[[package]]
+name = "fastrand"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6999dc1837253364c2ebb0704ba97994bd874e8f195d665c50b7548f6ea92764"
+
 [[package]]
 name = "fdeflate"
 version = "0.3.0"
@ -954,13 +972,13 @@ dependencies = [

 [[package]]
 name = "filetime"
-version = "0.2.21"
+version = "0.2.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5cbc844cecaee9d4443931972e1289c8ff485cb4cc2767cb03ca139ed6885153"
+checksum = "d4029edd3e734da6fe05b6cd7bd2960760a616bd2ddd0d59a0124746d6272af0"
 dependencies = [
 "cfg-if",
 "libc",
- "redox_syscall 0.2.16",
+ "redox_syscall 0.3.5",
 "windows-sys 0.48.0",
 ]

@ -1052,7 +1070,7 @@ version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "49a9d51ce47660b1e808d3c990b4709f2f415d928835a17dfd16991515c46bce"
 dependencies = [
- "fastrand",
+ "fastrand 1.9.0",
 "futures-core",
 "futures-io",
 "memchr",
@ -1069,7 +1087,7 @@ checksum = "89ca545a94061b6365f2c7355b4b32bd20df3ff95f02da9329b34ccc3bd6ee72"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -1349,9 +1367,9 @@ checksum = "d2fabcfbdc87f4758337ca535fb41a6d701b65693ce38287d856d1674551ec9b"

 [[package]]
 name = "globset"
-version = "0.4.11"
+version = "0.4.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1391ab1f92ffcc08911957149833e682aa3fe252b9f45f966d2ef972274c97df"
+checksum = "759c97c1e17c55525b57192c06a267cda0ac5210b222d6b82189a2338fa1c13d"
 dependencies = [
 "aho-corasick",
 "bstr",
@ -1555,7 +1573,7 @@ dependencies = [
 "httpdate",
 "itoa 1.0.9",
 "pin-project-lite",
- "socket2",
+ "socket2 0.4.9",
 "tokio",
 "tower-service",
 "tracing",
@ -1643,9 +1661,9 @@ dependencies = [

 [[package]]
 name = "image"
-version = "0.24.6"
+version = "0.24.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "527909aa81e20ac3a44803521443a765550f09b5130c2c2fa1ea59c2f8f50a3a"
+checksum = "6f3dfdbdd72063086ff443e297b61695500514b1e41095b6fb9a5ab48a70a711"
 dependencies = [
 "bytemuck",
 "byteorder",
@ -1673,6 +1691,7 @@ checksum = "d5477fe2230a79769d8dc68e0eabf5437907c0457a5614a9e8dddb67f65eb65d"
 dependencies = [
 "equivalent",
 "hashbrown 0.14.0",
+ "serde",
 ]

 [[package]]
@ -1717,7 +1736,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cb0889898416213fab133e1d33a0e5858a48177452750691bde3666d0fdbaf8b"
 dependencies = [
 "hermit-abi",
- "rustix 0.38.4",
+ "rustix 0.38.8",
 "windows-sys 0.48.0",
 ]

@ -1838,9 +1857,9 @@ checksum = "ef53942eb7bf7ff43a617b3e2c1c4a5ecf5944a7c1bc12d7ee39bbb15e5c1519"

 [[package]]
 name = "linux-raw-sys"
-version = "0.4.3"
+version = "0.4.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09fc20d2ca12cb9f044c93e3bd6d32d523e6e2ec3db4f7b2939cd99026ecd3f0"
+checksum = "57bcfdad1b858c2db7c38303a6d2ad4dfaf5eb53dfeb0910128b2c26d6158503"

 [[package]]
 name = "lock_api"
@ -1854,9 +1873,9 @@ dependencies = [

 [[package]]
 name = "log"
-version = "0.4.19"
+version = "0.4.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b06a4cde4c0f271a446782e3eff8de789548ce57dbc8eca9292c27f4a42004b4"
+checksum = "b5e6163cb8c49088c2c36f57875e58ccd8c87c7427f7fbd50ea6710b2f3f2e8f"

 [[package]]
 name = "loom"
@ -1881,9 +1900,9 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"

 [[package]]
 name = "mac-notification-sys"
-version = "0.5.6"
+version = "0.5.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3e72d50edb17756489e79d52eb146927bec8eba9dd48faadf9ef08bca3791ad5"
+checksum = "9402858e87f85f88bf518bd2e68450640df1c99b1ddb3ea28c4d5d823bb54cdd"
 dependencies = [
 "cc",
 "dirs-next",
@ -2118,9 +2137,9 @@ dependencies = [

 [[package]]
 name = "num-traits"
-version = "0.2.15"
+version = "0.2.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "578ede34cf02f8924ab9447f50c28075b4d3e5b269972345e7e0372b38c6cdcd"
+checksum = "f30b0abd723be7e2ffca1272140fac1a2f084c77ec3e123c192b66af1ee9e6c2"
 dependencies = [
 "autocfg",
 ]
@ -2231,9 +2250,9 @@ dependencies = [

 [[package]]
 name = "openssl"
-version = "0.10.55"
+version = "0.10.56"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "345df152bc43501c5eb9e4654ff05f794effb78d4efe3d53abc158baddc0703d"
+checksum = "729b745ad4a5575dd06a3e1af1414bd330ee561c01b3899eb584baeaa8def17e"
 dependencies = [
 "bitflags 1.3.2",
 "cfg-if",
@ -2252,7 +2271,7 @@ checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -2263,9 +2282,9 @@ checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"

 [[package]]
 name = "openssl-sys"
-version = "0.9.90"
+version = "0.9.91"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "374533b0e45f3a7ced10fcaeccca020e66656bc03dac384f852e4e5a7a8104a6"
+checksum = "866b5f16f90776b9bb8dc1e1802ac6f0513de3a7a7465867bfbc563dc737faac"
 dependencies = [
 "cc",
 "libc",
@ -2482,9 +2501,9 @@ dependencies = [

 [[package]]
 name = "pin-project-lite"
-version = "0.2.10"
+version = "0.2.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4c40d25201921e5ff0c862a505c6557ea88568a4e3ace775ab55e93f2f4f9d57"
+checksum = "12cc1b0bf1727a77a54b6654e7b5f1af8604923edc8b81885f8ec92f9e3f0a05"

 [[package]]
 name = "pin-utils"
@ -2605,9 +2624,9 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"

 [[package]]
 name = "proc-macro2"
-version = "1.0.65"
+version = "1.0.66"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "92de25114670a878b1261c79c9f8f729fb97e95bac93f6312f583c60dd6a1dfe"
+checksum = "18fb31db3f9bddb2ea821cde30a9f70117e3f119938b5ee630b7403aa6e2ead9"
 dependencies = [
 "unicode-ident",
 ]
@ -2632,9 +2651,9 @@ dependencies = [

 [[package]]
 name = "quote"
-version = "1.0.30"
+version = "1.0.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5907a1b7c277254a8b15170f6e7c97cfa60ee7872a3217663bb81151e48184bb"
+checksum = "50f3b39ccfb720540debaa0164757101c08ecb8d326b15358ce76a62c7e85965"
 dependencies = [
 "proc-macro2",
 ]
@ -2757,13 +2776,13 @@ dependencies = [

 [[package]]
 name = "regex"
-version = "1.9.1"
+version = "1.9.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b2eae68fc220f7cf2532e4494aded17545fce192d59cd996e0fe7887f4ceb575"
+checksum = "81bc1d4caf89fac26a70747fe603c130093b53c773888797a6329091246d651a"
 dependencies = [
 "aho-corasick",
 "memchr",
- "regex-automata 0.3.3",
+ "regex-automata 0.3.6",
 "regex-syntax 0.7.4",
 ]

@ -2778,9 +2797,9 @@ dependencies = [

 [[package]]
 name = "regex-automata"
-version = "0.3.3"
+version = "0.3.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "39354c10dd07468c2e73926b23bb9c2caca74c5501e38a35da70406f1d923310"
+checksum = "fed1ceff11a1dddaee50c9dc8e4938bd106e9d89ae372f192311e7da498e3b69"
 dependencies = [
 "aho-corasick",
 "memchr",
@ -2893,14 +2912,14 @@ dependencies = [

 [[package]]
 name = "rustix"
-version = "0.38.4"
+version = "0.38.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0a962918ea88d644592894bc6dc55acc6c0956488adcebbfb6e273506b7fd6e5"
+checksum = "19ed4fa021d81c8392ce04db050a3da9a60299050b7ae1cf482d862b54a7218f"
 dependencies = [
- "bitflags 2.3.3",
+ "bitflags 2.4.0",
 "errno",
 "libc",
- "linux-raw-sys 0.4.3",
+ "linux-raw-sys 0.4.5",
 "windows-sys 0.48.0",
 ]

@ -2948,15 +2967,15 @@ checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"

 [[package]]
 name = "scopeguard"
-version = "1.1.0"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"

 [[package]]
 name = "security-framework"
-version = "2.9.1"
+version = "2.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fc758eb7bffce5b308734e9b0c1468893cae9ff70ebf13e7090be8dcbcc83a8"
+checksum = "05b64fb303737d99b81884b2c63433e9ae28abebe5eb5045dcdd175dc2ecf4de"
 dependencies = [
 "bitflags 1.3.2",
 "core-foundation",
@ -2967,9 +2986,9 @@ dependencies = [

 [[package]]
 name = "security-framework-sys"
-version = "2.9.0"
+version = "2.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f51d0c0d83bec45f16480d0ce0058397a69e48fcdc52d1dc8855fb68acbd31a7"
+checksum = "e932934257d3b408ed8f30db49d85ea163bfe74961f017f405b025af298f0c7a"
 dependencies = [
 "core-foundation-sys",
 "libc",
@ -3006,29 +3025,29 @@ dependencies = [

 [[package]]
 name = "serde"
-version = "1.0.175"
+version = "1.0.183"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d25439cd7397d044e2748a6fe2432b5e85db703d6d097bd014b3c0ad1ebff0b"
+checksum = "32ac8da02677876d532745a130fc9d8e6edfa81a269b107c5b00829b91d8eb3c"
 dependencies = [
 "serde_derive",
 ]

 [[package]]
 name = "serde_derive"
-version = "1.0.175"
+version = "1.0.183"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b23f7ade6f110613c0d63858ddb8b94c1041f550eab58a16b371bdf2c9c80ab4"
+checksum = "aafe972d60b0b9bee71a91b92fee2d4fb3c9d7e8f6b179aa99f27203d99a4816"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
 name = "serde_json"
-version = "1.0.103"
+version = "1.0.104"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d03b412469450d4404fe8499a268edd7f8b79fecb074b0d812ad64ca21f4031b"
+checksum = "076066c5f1078eac5b722a31827a8832fe108bed65dfa75e233c89f8206e976c"
 dependencies = [
 "itoa 1.0.9",
 "ryu",
@ -3037,13 +3056,13 @@ dependencies = [

 [[package]]
 name = "serde_repr"
-version = "0.1.14"
+version = "0.1.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d89a8107374290037607734c0b73a85db7ed80cae314b3c5791f192a496e731"
+checksum = "8725e1dfadb3a50f7e5ce0b1a540466f6ed3fe7a0fca2ac2b8b831d31316bd00"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -3069,14 +3088,15 @@ dependencies = [

 [[package]]
 name = "serde_with"
-version = "3.0.0"
+version = "3.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f02d8aa6e3c385bf084924f660ce2a3a6bd333ba55b35e8590b321f35d88513"
+checksum = "1402f54f9a3b9e2efe71c1cea24e648acce55887983553eeb858cf3115acfd49"
 dependencies = [
 "base64 0.21.2",
 "chrono",
 "hex",
 "indexmap 1.9.3",
+ "indexmap 2.0.0",
 "serde",
 "serde_json",
 "serde_with_macros",
@ -3085,14 +3105,14 @@ dependencies = [

 [[package]]
 name = "serde_with_macros"
-version = "3.0.0"
+version = "3.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "edc7d5d3932fb12ce722ee5e64dd38c504efba37567f0c402f6ca728c3b8b070"
+checksum = "9197f1ad0e3c173a0222d3c4404fb04c3afe87e962bcb327af73e8301fa203c7"
 dependencies = [
 "darling",
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -3170,9 +3190,9 @@ dependencies = [

 [[package]]
 name = "signal-hook"
-version = "0.3.16"
+version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b824b6e687aff278cdbf3b36f07aa52d4bd4099699324d5da86a2ebce3aa00b3"
+checksum = "8621587d4798caf8eb44879d42e56b9a93ea5dcd315a6487c357130095b62801"
 dependencies = [
 "libc",
 "signal-hook-registry",
@ -3189,9 +3209,9 @@ dependencies = [

 [[package]]
 name = "simd-adler32"
-version = "0.3.5"
+version = "0.3.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "238abfbb77c1915110ad968465608b68e869e0772622c9656714e73e5a1a522f"
+checksum = "d66dc143e6b11c1eddc06d5c423cfc97062865baf299914ab64caa38182078fe"

 [[package]]
 name = "simple_logger"
@ -3236,6 +3256,16 @@ dependencies = [
 "winapi",
 ]

+[[package]]
+name = "socket2"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2538b18701741680e0322a2302176d3253a35388e2e62f172f64f4f16605f877"
+dependencies = [
+ "libc",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "soup2"
 version = "0.2.1"
@ -3351,9 +3381,9 @@ dependencies = [

 [[package]]
 name = "syn"
-version = "2.0.26"
+version = "2.0.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45c3457aacde3c65315de5031ec191ce46604304d2446e803d71ade03308d970"
+checksum = "04361975b3f5e348b2189d8dc55bc942f278b2d482a6a0365de5bdd62d351567"
 dependencies = [
 "proc-macro2",
 "quote",
@ -3392,7 +3422,7 @@ version = "6.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "30c2de8a4d8f4b823d634affc9cd2a74ec98c53a756f317e529a48046cbf71f3"
 dependencies = [
- "cfg-expr 0.15.3",
+ "cfg-expr 0.15.4",
 "heck 0.4.1",
 "pkg-config",
 "toml 0.7.6",
@ -3459,9 +3489,9 @@ dependencies = [

 [[package]]
 name = "tar"
-version = "0.4.39"
+version = "0.4.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec96d2ffad078296368d46ff1cb309be1c23c513b4ab0e22a45de0185275ac96"
+checksum = "b16afcea1f22891c49a00c751c7b63b2233284064f11a200fc624137c51e2ddb"
 dependencies = [
 "filetime",
 "libc",
@ -3470,9 +3500,9 @@ dependencies = [

 [[package]]
 name = "target-lexicon"
-version = "0.12.9"
+version = "0.12.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "df8e77cb757a61f51b947ec4a7e3646efd825b73561db1c232a8ccb639e611a0"
+checksum = "9d0e916b1148c8e263850e1ebcbd046f333e0683c724876bb0da63ea4373dc8a"

 [[package]]
 name = "tauri"
@ -3678,15 +3708,14 @@ dependencies = [

 [[package]]
 name = "tempfile"
-version = "3.6.0"
+version = "3.7.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "31c0432476357e58790aaa47a8efb0c5138f137343f3b5f23bd36a27e3b0a6d6"
+checksum = "dc02fddf48964c42031a0b3fe0428320ecf3a73c401040fc0096f97794310651"
 dependencies = [
- "autocfg",
 "cfg-if",
- "fastrand",
+ "fastrand 2.0.0",
 "redox_syscall 0.3.5",
- "rustix 0.37.23",
+ "rustix 0.38.8",
 "windows-sys 0.48.0",
 ]

@ -3718,22 +3747,22 @@ checksum = "8eaa81235c7058867fa8c0e7314f33dcce9c215f535d1913822a2b3f5e289f3c"

 [[package]]
 name = "thiserror"
-version = "1.0.43"
+version = "1.0.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a35fc5b8971143ca348fa6df4f024d4d55264f3468c71ad1c2f365b0a4d58c42"
+checksum = "611040a08a0439f8248d1990b111c95baa9c704c805fa1f62104b39655fd7f90"
 dependencies = [
 "thiserror-impl",
 ]

 [[package]]
 name = "thiserror-impl"
-version = "1.0.43"
+version = "1.0.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "463fe12d7993d3b327787537ce8dd4dfa058de32fc2b195ef3cde03dc4771e8f"
+checksum = "090198534930841fab3a5d1bb637cde49e339654e606195f8d9c76eeb081dc96"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -3748,10 +3777,11 @@ dependencies = [

 [[package]]
 name = "time"
-version = "0.3.23"
+version = "0.3.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59e399c068f43a5d116fedaf73b203fa4f9c519f17e2b34f63221d3792f81446"
+checksum = "b0fdd63d58b18d663fbdf70e049f00a22c8e42be082203be7f26589213cd75ea"
 dependencies = [
+ "deranged",
 "itoa 1.0.9",
 "libc",
 "num_threads",
@ -3768,9 +3798,9 @@ checksum = "7300fbefb4dadc1af235a9cef3737cea692a9d97e1b9cbcd4ebdae6f8868e6fb"

 [[package]]
 name = "time-macros"
-version = "0.2.10"
+version = "0.2.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "96ba15a897f3c86766b757e5ac7221554c6750054d74d5b28844fce5fb36a6c4"
+checksum = "eb71511c991639bb078fd5bf97757e03914361c48100d52878b8e52b46fb92cd"
 dependencies = [
 "time-core",
 ]
@ -3792,18 +3822,17 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"

 [[package]]
 name = "tokio"
-version = "1.29.1"
+version = "1.30.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "532826ff75199d5833b9d2c5fe410f29235e25704ee5f0ef599fb51c21f4a4da"
+checksum = "2d3ce25f50619af8b0aec2eb23deebe84249e19e2ddd393a6e16e3300a6dadfd"
 dependencies = [
- "autocfg",
 "backtrace",
 "bytes",
 "libc",
 "mio",
 "num_cpus",
 "pin-project-lite",
- "socket2",
+ "socket2 0.5.3",
 "windows-sys 0.48.0",
 ]

@ -3900,7 +3929,7 @@ checksum = "5f4f31f56159e98206da9efd823404b79b6ef3143b4a7ab76e67b1751b25a4ab"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 ]

 [[package]]
@ -4043,9 +4072,9 @@ checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"

 [[package]]
 name = "uuid"
-version = "1.4.0"
+version = "1.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d023da39d1fde5a8a3fe1f3e01ca9632ada0a63e9797de55a879d6e2236277be"
+checksum = "79daa5ed5740825c40b389c5e50312b9c86df53fccd33f281df655642b43869d"
 dependencies = [
 "getrandom 0.2.10",
 ]
@ -4158,7 +4187,7 @@ dependencies = [
 "once_cell",
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 "wasm-bindgen-shared",
 ]

@ -4192,7 +4221,7 @@ checksum = "54681b18a46765f095758388f2d0cf16eb8d4169b639ab575a8f5693af210c7b"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.26",
+ "syn 2.0.28",
 "wasm-bindgen-backend",
 "wasm-bindgen-shared",
 ]
@ -4628,9 +4657,9 @@ checksum = "1a515f5799fe4961cb532f983ce2b23082366b898e52ffbce459c86f67c8378a"

 [[package]]
 name = "winnow"
-version = "0.5.0"
+version = "0.5.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81fac9742fd1ad1bd9643b991319f72dd031016d44b77039a26977eb667141e7"
+checksum = "5504cc7644f4b593cbc05c4a55bf9bd4e94b867c3c0bd440934174d50482427d"
 dependencies = [
 "memchr",
 ]
@ -4737,9 +4766,9 @@ dependencies = [

 [[package]]
 name = "xattr"
-version = "0.2.3"
+version = "1.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d1526bbe5aaeb5eb06885f4d987bcdfa5e23187055de9b83fe00156a821fabc"
+checksum = "f4686009f71ff3e5c4dbcf1a282d0a44db3f021ba69350cd42086b3e5f1c6985"
 dependencies = [
 "libc",
 ]
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -71,6 +71,17 @@ fn load_plan(path: PathBuf, state: tauri::State<Mutex<Storage>>) -> Option<Plan>
    None
 }

+#[tauri::command]
+fn save_plan(path: PathBuf, plan: Plan, state: tauri::State<Mutex<Storage>>) -> bool {
+    if let Ok(storage) = state.lock() {
+        if let Some(path_string) = path.with_extension("json").to_str() {
+            return Storage::save_plan(path_string, plan).is_ok()
+        }
+    }
+
+    false
+}
+
 #[tauri::command]
 fn load_stored_plans() -> Vec<String> {
    Storage::enumerate_plans()
@ -106,7 +117,8 @@ fn main() {
            load_config,
            set_config,
            load_plan,
-            load_stored_plans
+            load_stored_plans,
+            save_plan
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
--- a/src-tauri/src/storage.rs
+++ b/src-tauri/src/storage.rs
@ -1,3 +1,4 @@
+use std::error::Error;
 use std::path::{Path, PathBuf};

 use directories::ProjectDirs;
@ -72,6 +73,11 @@ impl Storage {
        }
    }

+    pub fn save_plan<T: Into<String>>(file: T, plan: Plan) -> Result<(), Box<dyn Error>> {
+        std::fs::write(&file.into(), serde_json::to_string(&plan)?)?;
+        Ok(())
+    }
+
    pub fn load_plan<T: Into<String>>(file: T) -> Option<Plan> {
        let mut file = file.into();
        let plan_file = Path::new(&file);
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,14 +1,15 @@
-<div [ngStyle]="overlayService.visible ? {} : {'display': 'none'}">
-    <plan-display *ngIf="planService.currentPlan" [backgroundColor]="planColor"></plan-display>
-
-
-    <button (click)="openDialog()">Browse Plans</button>
-</div>
-
-<div class="editor" [ngStyle]="overlayService.visible ? {} : {'display': 'none'}">
-    <plan-editor></plan-editor>
-</div>
-
-<div class="settings">
-    <color-picker [initialColor]="'#00000010'" (color)="planColor = $event">Click me for color picker!</color-picker>
-</div>
+<!-- <div [ngStyle]="overlayService.interactable ? {'background-color' : backdrop?.rgbaString} : {'background-color' : backdrop?.rgbaString} " > -->
+    <div class="settings">
+        <color-picker [initialColor]="'#00000010'" (color)="planColor = $event">Plan window background</color-picker>
+        <color-picker [initialColor]="'#00000010'" (color)="backdrop = $event">Overlay backdrop color</color-picker>
+    </div>
+    
+    <div [ngStyle]="overlayService.visible ? {} : {'display': 'none'}">
+        <plan-display *ngIf="planService.currentPlan" [backgroundColor]="planColor"></plan-display>
+        <button (click)="openDialog()">Browse Plans</button>
+    </div>
+
+    <div class="editor" [ngStyle]="overlayService.visible ? {} : {'display': 'none'}">
+        <plan-editor></plan-editor>
+    </div>
+<!-- </div> -->
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -20,6 +20,8 @@ export class AppComponent implements OnInit {
  interactable: boolean = false;
  isBinding: boolean = false;
  planColor?: Color;
+  backdrop?: Color;
+  

  constructor(
    public overlayService: OverlayService,
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -10,6 +10,7 @@ import { ConfigService } from "./services/config.service";
 import { ColorPickerComponent } from './color-picker/color-picker.component';
 import { MatButtonModule } from "@angular/material/button";
 import { EditorComponent } from "./editor/editor.component";
+import { NotesComponent } from './editor/notes/notes.component';

 export function initializeApp(configService: ConfigService) {
  return (): Promise<any> => {
--- a/src/app/carousel/carousel.component.html
+++ b/src/app/carousel/carousel.component.html
@ -1,7 +1,8 @@
 <ng-container *ngIf="template && slides">
    <div class="carousel">
        <div class="window" [style.translate]="translation()" #carouselWindow
-            [@direction]="{value: this.animation, params: {directionTime: directionTime}}" [ngStyle]="style()" (@direction.done)="onAnimationEnd($event)" (@direction.start)="onAnimationStart($event)">
+            [@direction]="{value: this.animation, params: {directionTime: directionTime}}" [ngStyle]="style()"
+            (@direction.done)="onAnimationEnd($event)" (@direction.start)="onAnimationStart($event)">

            <span hidden>current: {{current}}</span>
            <ng-container *ngFor="let visible of visibleSlides">
@ -9,11 +10,12 @@
                <div [class]="vertical ? 'slide-vertical' : 'slide'" #slideElement
                    [attr.data-slideIndex]="visible.index"
                    [ngStyle]="vertical ? {'grid-row-start':visible.index + 1} : {'grid-column-start':visible.index + 1}">
-                    <ng-container *ngTemplateOutlet="template!; context: { $implicit: slides[visible.index] }">
-                    </ng-container>
+                    <div class="slide-container">
+                        <ng-container *ngTemplateOutlet="template!; context: { $implicit: slides[visible.index] }">
+                        </ng-container>
+                    </div>
                </div>
            </ng-container>
        </div>
    </div>
-</ng-container>
-
+</ng-container>
--- a/src/app/carousel/carousel.component.scss
+++ b/src/app/carousel/carousel.component.scss
@ -10,16 +10,11 @@
 }

 .slide {
-    background-color: green;
    grid-row-start: 1;
 }

 .slide-vertical {
-    background-color: green;
    grid-column-start: 1;
-    
-    
-
 }

 .window {
@ -34,4 +29,9 @@

 .transparent {
    opacity: 0;
+}
+
+.slide-container {
+    height: 100%;
+    max-height: 100%;
 }
--- a/src/app/carousel/carousel.component.ts
+++ b/src/app/carousel/carousel.component.ts
@ -31,11 +31,11 @@ import { Subject, debounceTime } from 'rxjs';
    ])
  ]
 })
-export class CarouselComponent implements OnInit, AfterViewInit {
+export class CarouselComponent<T> implements OnInit, AfterViewInit {

-  @Output() afterInitSelf: EventEmitter<CarouselComponent> = new EventEmitter<CarouselComponent>();
+  @Output() afterInitSelf: EventEmitter<CarouselComponent<T>> = new EventEmitter<CarouselComponent<T>>();
  @Output() changedIndex: EventEmitter<number> = new EventEmitter<number>();
-  @Input() slides?: any[];
+  @Input() slides?: T[];
  @ContentChild(TemplateRef) template?: TemplateRef<any>;
  @ViewChild('carouselWindow') window!: ElementRef;
  @ViewChildren('slideElement') slideElements!: QueryList<ElementRef>;
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@ -1,3 +1,4 @@
+<button (click)="save()">Save plan</button>
 <div cdkDropListGroup *ngIf="areas" class="editor-container">
  <div class="container">
    <input type="text" [(ngModel)]="areaSearchString">
@ -18,13 +19,14 @@
  <div class="container">
    <span>Auto scroll to end on add to end<input type="checkbox" [(ngModel)]="autoScrollToEnd"></span>
    <span>Reverse display: <input type="checkbox" [(ngModel)]="reverseDisplay"></span>
+    <button (click)="clearPlan()">Clear</button>
    <input type="text" [(ngModel)]="planSearchString">
    <select [(ngModel)]="planFilterAct">
      <option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
    </select>
    <h2>Plan</h2>
-    <div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist" (cdkDropListDropped)="dropHandler($event)">
-        <div class="box" *ngFor="let item of filterPlanElements()" cdkDrag>
+    <div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist" (cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD" [cdkDropListEnterPredicate]="canDrop">
+        <div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)">
          <div class="content">
            <div class="zone-name">{{areasMap?.get(item.area_key)?.name}}</div>
            <div class="act">Act {{areasMap?.get(item.area_key)?.act}}</div>
--- a/src/app/editor/editor.component.ts
+++ b/src/app/editor/editor.component.ts
@ -14,6 +14,11 @@ import { Plan, PlanElement } from '../models/plan';
 import { WorldAreaService } from '../services/world-area.service';
 import { FormsModule } from '@angular/forms';
 import { Fuzzr } from '../fuzzr/fuzzr';
+import { from } from 'rxjs';
+import { save } from '@tauri-apps/api/dialog';
+import { PlanService } from '../services/plan.service';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { EditNotesComponentDialog } from './notes/notes.component';

 interface Act {
  value: number;
@ -30,7 +35,8 @@ interface Act {
    FormsModule,
    CdkDropListGroup,
    CdkDropList,
-    CdkDrag
+    CdkDrag,
+    MatDialogModule
  ],
 })
 export class EditorComponent implements OnInit {
@ -47,13 +53,15 @@ export class EditorComponent implements OnInit {
  @ViewChild('planList') planListElement!: ElementRef;
  autoScrollToEnd: boolean;
  reverseDisplay: boolean;
+  disabledPlanDD: boolean;


-  constructor(public worldAreaService: WorldAreaService, private cdr: ChangeDetectorRef) {
+  constructor(public worldAreaService: WorldAreaService, private cdr: ChangeDetectorRef, private planService: PlanService, public dialog: MatDialog) {
    this.plan = {
      plan: [],
      current: 0,
    }
+    this.disabledPlanDD = false;

    this.autoScrollToEnd = false;

@ -94,6 +102,9 @@ export class EditorComponent implements OnInit {
      moveItemInArray(this.plan.plan, realPrev, realCurrent);
    } else
      if (this.plan && this.areas && isWorldAreaEvent(event)) {
+        if (event.container.data.length > 0 && 'connections_world_areas_keys' in event.container.data[0]) {
+          return;
+        }
        this.plan.plan.splice(event.currentIndex, 0, this.planItemFromArea(event.previousContainer.data[event.previousIndex]));
      }
  }
@ -108,6 +119,10 @@ export class EditorComponent implements OnInit {
    }
  }

+  canDrop = () => {
+    return !this.disabledPlanDD;
+  }
+
  planItemFromArea(area: WorldArea): PlanElement {
    return {
      area_key: area.named_id,
@ -126,7 +141,7 @@ export class EditorComponent implements OnInit {
  }

  scrollToEnd() {
-    if(! this.autoScrollToEnd) {
+    if (!this.autoScrollToEnd) {
      return;
    }
    this.cdr.detectChanges();
@ -145,10 +160,12 @@ export class EditorComponent implements OnInit {
  filterPlanElements() {
    const value = (): any[] => {
      if (this.planSearchString !== "" || this.planFilterAct.value != 0) {
+        this.disabledPlanDD = true;
        return this.planFuzzer.search(this.planSearchString).map(({ item }) => item).filter(item => {
          return this.areasMap?.get(item.area_key)?.act == this.planFilterAct.value || this.planFilterAct.value == 0;
        });
      } else {
+        this.disabledPlanDD = false;
        return this.plan.plan;
      }
    }
@ -162,9 +179,42 @@ export class EditorComponent implements OnInit {

  planIndexOf(planElement: PlanElement) {
    const index = this.plan.plan.indexOf(planElement);
-    console.log("plan element", planElement, "index", index);
    return index;
  }
+
+  clearPlan() {
+    this.plan.plan.length = 0;
+    this.cdr.detectChanges();
+  }
+
+  save() {
+    from(save({
+      filters: [{
+        name: 'JSON (.json)',
+        extensions: ['json']
+      }]
+    })).subscribe(file => {
+        if (file) {
+          this.planService.savePlan(file as string, this.plan);
+        }
+      });
+  }
+
+  addNote(event: MouseEvent, item: PlanElement) {
+    console.log("right click", event, item);
+    event.preventDefault();
+
+    const dialogRef = this.dialog.open(EditNotesComponentDialog, {
+      data: {
+        note: item.notes
+      }
+    })
+
+    dialogRef.afterClosed().subscribe(note => {
+      item.notes = note;
+    })
+
+  }
 }


--- a/src/app/editor/notes/edit-notes.component.html
+++ b/src/app/editor/notes/edit-notes.component.html
@ -0,0 +1,16 @@
+<div class="NOTES_COMPONENT">
+    <div class="container">
+        <span>Edit note </span><span style="color: grey; font-size: 0.9em;">(supports markdown)</span>
+        <div class="left">
+            <textarea [(ngModel)]="note" cols="50" rows="10"></textarea>
+        </div>
+
+        <div class="right">
+            <notes [note]="note"></notes>
+        </div>
+    </div>
+    <div mat-dialog-actions>
+        <button mat-button color="warn" (click)="cancel()">Cancel</button>
+        <button mat-button [mat-dialog-close]="note" cdkFocusInitial>Save</button>
+    </div>
+</div>
--- a/src/app/editor/notes/notes.component.html
+++ b/src/app/editor/notes/notes.component.html
@ -0,0 +1 @@
+<div #ref *ngIf="note" class="NOTES_COMPONENT display-component" [innerHTML]="md.render(note)"></div>
--- a/src/app/editor/notes/notes.component.scss
+++ b/src/app/editor/notes/notes.component.scss
@ -0,0 +1,26 @@
+.NOTES_COMPONENT {
+    .container {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+
+    &.display-component {
+        max-height: 100%;
+        height: 100%;
+        display: grid;
+        grid-auto-flow: row;
+        grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
+    }
+
+    & {
+        font-size: 1.3em;
+    }
+}
--- a/src/app/editor/notes/notes.component.spec.ts
+++ b/src/app/editor/notes/notes.component.spec.ts
@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotesComponent } from './notes.component';
+
+describe('NotesComponent', () => {
+  let component: NotesComponent;
+  let fixture: ComponentFixture<NotesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotesComponent]
+    });
+    fixture = TestBed.createComponent(NotesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/editor/notes/notes.component.ts
+++ b/src/app/editor/notes/notes.component.ts
@ -0,0 +1,58 @@
+import { Component, ElementRef, Inject, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { CommonModule, NgIf } from '@angular/common';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MarkdownService } from 'src/app/services/markdown.service';
+
+
+interface DialogData {
+  note?: string;
+}
+
+@Component({
+  selector: 'notes',
+  templateUrl: './notes.component.html',
+  styleUrls: ['./notes.component.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, MatButtonModule],
+  encapsulation: ViewEncapsulation.None,
+})
+export class NotesComponent {
+  @Input()
+  note?: string;
+  
+  @ViewChild("ref")
+  ref?: ElementRef
+
+  constructor(public md: MarkdownService) {
+
+  }
+}
+
+@Component({
+  selector: 'notes-editor',
+  templateUrl: 'edit-notes.component.html',
+  standalone: true,
+  imports: [CommonModule, FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, NotesComponent],
+  encapsulation: ViewEncapsulation.None,
+})
+export class EditNotesComponentDialog {
+  note: string;
+  constructor(
+    public dialogRef: MatDialogRef<EditNotesComponentDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {
+    if (data.note) {
+      this.note = `${data.note}`;
+    } else {
+      this.note = "";
+    }
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+}
--- a/src/app/plan-display/plan-display.component.html
+++ b/src/app/plan-display/plan-display.component.html
@ -3,15 +3,15 @@
        [style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'"
        #targetRef>
        <ng-container *ngIf="plan">
-            
-            <carousel [slides]="slides" (afterInitSelf)="registerZoneSlides($event)">
+
+            <carousel [numVisible]="3" [slides]="plan.plan" (afterInitSelf)="registerZoneSlides($event)">
                <ng-template let-slide>
-                    ZONE{{slide}}
+                    <div class="zone-slide">{{worldAreaMap!.get(slide.area_key)!.name}}</div>
                </ng-template>
            </carousel>
-            <carousel [slides]="slides" (afterInitSelf)="registerCurrentSlides($event)">
+            <carousel [slides]="plan.plan" (afterInitSelf)="registerCurrentSlides($event)">
                <ng-template let-slide>
-                    CURRENT{{slide}}
+                    <notes [note]="slide.notes" #noteSlide (resized)="onResizeNote(noteSlide)"></notes>
                </ng-template>
            </carousel>

--- a/src/app/plan-display/plan-display.component.scss
+++ b/src/app/plan-display/plan-display.component.scss
@ -7,12 +7,28 @@
    min-width: 50px;
    min-height: 50px;
    display: flex;
+    flex-direction: column;
    & > * {
        flex: 1 1 auto;
+        &:first-child {
+            flex: 0 0 auto;
+            max-height: 60px;
+        }
    }
 }

+.zone-slide {
+    
+}
+
 .controls {
    position: absolute;
    top: 0;
+}
+
+notes {
+    display: block;
+    height: 100%;
+    max-height: 100%;
+    width: 100%;;
 }
--- a/src/app/plan-display/plan-display.component.ts
+++ b/src/app/plan-display/plan-display.component.ts
@ -7,7 +7,11 @@ import { Color } from '../color-picker/color-picker.component';
 import { ShortcutService } from '../services/shortcut.service';
 import { CarouselComponent } from '../carousel/carousel.component';
 import { PlanService } from '../services/plan.service';
-import { Plan } from '../models/plan';
+import { Plan, PlanElement } from '../models/plan';
+import { WorldAreaService } from '../services/world-area.service';
+import { WorldArea } from '../models/world-area';
+import { NotesComponent } from '../editor/notes/notes.component';
+import { ResizedEvent } from 'angular-resize-event';

@Component({
  selector: 'plan-display',
@ -19,21 +23,23 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
  draggable: boolean = true;
  rect?: Rect;

-  slides: number[] = [];
+  // slides: PlanElement[] = [];
  plan?: Plan;
  slideIndex: number = 0;
-  zoneSlides?: CarouselComponent;
-  currentSlides?: CarouselComponent;
+  zoneSlides?: CarouselComponent<PlanElement>;
+  currentSlides?: CarouselComponent<PlanElement>;
+  worldAreaMap?: Map<String, WorldArea>;


-  constructor(private configService: ConfigService, private cdr: ChangeDetectorRef, private shortcut: ShortcutService, private planService: PlanService) {
-    for (let i = 0; i < 100; i++) {
-      this.slides.push(i);
-    }
+  constructor(private configService: ConfigService, private cdr: ChangeDetectorRef, private shortcut: ShortcutService, private planService: PlanService, public worldAreaService: WorldAreaService) {
+    // for (let i = 0; i < 100; i++) {
+    //   this.slides.push(i);
+    // }
  }

  ngOnInit() {
    this.plan = this.planService.currentPlan;
+    this.worldAreaService.getWorldAreas().subscribe(a => this.worldAreaMap = a);
  }

  abs(v: number) {
@ -93,11 +99,11 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
    }
  }

-  registerZoneSlides(carousel: CarouselComponent) {
+  registerZoneSlides(carousel: CarouselComponent<PlanElement>) {
    this.zoneSlides = carousel;
    console.log("zone slides");
  }
-  registerCurrentSlides(carousel: CarouselComponent) {
+  registerCurrentSlides(carousel: CarouselComponent<PlanElement>) {
    this.currentSlides = carousel;

    if (this.currentSlides) {
@ -110,9 +116,31 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
    this.currentSlides?.next();
    this.zoneSlides?.next();
  }
-  
+
  prev() {
    this.currentSlides?.prev();
    this.zoneSlides?.prev();
  }
+
+  onResizeNote(noteSlide: NotesComponent) {
+    if (!noteSlide.ref) { return; }
+
+    let bounds = noteSlide.ref.nativeElement.getBoundingClientRect();
+    const children = noteSlide.ref.nativeElement.children;
+    
+    let sumWidth = 0;
+    let sumHeight = 0;
+    for (let child of children) {
+      const c = child.getBoundingClientRect();
+      sumWidth += c.width;
+      sumHeight += c.height;
+    }
+
+    const scale = Math.min(
+      sumWidth / bounds.width,
+      sumHeight / bounds.height,
+    )
+
+    noteSlide.ref.nativeElement.style.transform = `scale(1, ${scale})`;
+  }
 }
--- a/src/app/plan-display/plan-display.module.ts
+++ b/src/app/plan-display/plan-display.module.ts
@ -4,6 +4,8 @@ import { NgxMoveableComponent } from 'ngx-moveable';
 import { PlanDisplayComponent } from './plan-display.component';
 import { CarouselComponent } from '../carousel/carousel.component';
 import { FormsModule } from '@angular/forms';
+import { NotesComponent } from '../editor/notes/notes.component';
+import { AngularResizeEventModule } from 'angular-resize-event';


@NgModule({
@ -14,7 +16,9 @@ import { FormsModule } from '@angular/forms';
    CommonModule,
    NgxMoveableComponent,
    CarouselComponent,
-    FormsModule
+    FormsModule,
+    NotesComponent,
+    AngularResizeEventModule,
  ],
  exports: [
    PlanDisplayComponent
--- a/src/app/services/markdown.service.ts
+++ b/src/app/services/markdown.service.ts
@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import MarkdownIt from 'markdown-it';
+import colorPlugin from 'markdown-it-color';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MarkdownService {
+  private md: MarkdownIt;
+  constructor(private sanitizer: DomSanitizer) {
+    this.md = new MarkdownIt().use(colorPlugin, {
+      inline: true,
+    });
+  }
+
+  render(content: string) {
+    return this.sanitizer.bypassSecurityTrustHtml(this.md.render(content));
+  }
+}
--- a/src/app/services/plan.service.ts
+++ b/src/app/services/plan.service.ts
@ -7,6 +7,7 @@ import { Plan } from '../models/plan';
  providedIn: 'root'
 })
 export class PlanService {
+
  currentPlan?: Plan;
  planStore: string[] = [];

@ -15,13 +16,21 @@ export class PlanService {
  }

  loadPlan(path: string) {
-    console.log("loading path: ", path);
    from(invoke<Plan>('load_plan', {path})).subscribe(plan => {
      console.log("got plan: ", plan);
      this.currentPlan = plan;
    });
  }

+  savePlan(path: string, plan: Plan) {
+    plan.plan.forEach(elem => {
+      if(!elem.notes) {elem.notes = ""}
+    })
+    return from(invoke<boolean>('save_plan', {path, plan})).subscribe(status => {
+      console.log("save plan", status);
+    });
+  }
+
  getPreviousPlans() {
    from(invoke<string[]>('load_stored_plans')).subscribe(plans => this.planStore = plans);
  }
--- a/src/styles.scss
+++ b/src/styles.scss
@ -29,7 +29,6 @@ html,
 body {
  height: 100vh;
  width: 100vw;
-  background-color: rgba(#ff00ff, 0.05);
  margin: 0;
  padding: 0;
  overflow: hidden;
--- a/yarn.lock
+++ b/yarn.lock
@ -2545,6 +2545,24 @@
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==

+"@types/linkify-it@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
+  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+
+"@types/markdown-it@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-13.0.0.tgz#05e82614aa6d305a4d8efe24056d8879a9042970"
+  integrity sha512-mPTaUl5glYfzdJFeCsvhXQwZKdyszNAZcMm5ZTP5SfpTu+vIbog7J3z8Fa4x/Fzv5TB4R6OA/pHBYIYmkYOWGQ==
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
+
+"@types/mdurl@*":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+
 "@types/mime@*":
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -2858,6 +2876,13 @@ ajv@^6.12.5:
    json-schema-traverse "^0.4.1"
    uri-js "^4.2.2"

+angular-resize-event@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/angular-resize-event/-/angular-resize-event-3.2.0.tgz#06ad2585f441ec81b7c9c62ee2fbb92fc5b3bcb3"
+  integrity sha512-8Cx99afBcbcWAFihThuWwt0hB281eieE+2uPA+lwPAcITvvJwTEfd788m6dMwsfz2EoogrCafyF4+l0PDs8Gjw==
+  dependencies:
+    tslib "^2.3.0"
+
 ansi-colors@4.1.3:
  version "4.1.3"
  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
@ -3795,6 +3820,11 @@ entities@^4.2.0, entities@^4.3.0, entities@^4.4.0:
  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==

+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 env-paths@^2.2.0:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@ -4991,6 +5021,13 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 loader-runner@^4.2.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@ -5113,6 +5150,27 @@ make-fetch-happen@^11.0.0, make-fetch-happen@^11.0.1, make-fetch-happen@^11.0.3,
    socks-proxy-agent "^7.0.0"
    ssri "^10.0.0"

+markdown-it-color@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-color/-/markdown-it-color-2.1.1.tgz#e85adf9c7d31f97f2617abbacbd582b67cf6adda"
+  integrity sha512-GqXOSjT+RdGvxjdmPfRS/9XDr5dg4e2kC/mXbXK5Y1lbh/rVepoeaUGaD0Lmi1qS5M6cnbm9GrC8bu9YY8rRKQ==
+
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 media-typer@0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@ -6846,6 +6904,11 @@ ua-parser-js@^0.7.30:
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==

+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
				`@ -0,0 +1 @@`
				`{"plan":[{"area_key":"1_1_town","notes":"{magenta}(Hey)\n![The San Juan Mountains are beautiful!](https://mdg.imgix.net/assets/images/san-juan-mountains.jpg?auto=format&fit=clip&q=40&w=1080 \"San Juan Mountains\")"},{"area_key":"1_1_1","notes":""},{"area_key":"1_1_2","notes":""}],"current":0}`
				`@ -0,0 +1 @@`
				`<div #ref *ngIf="note" class="NOTES_COMPONENT display-component" [innerHTML]="md.render(note)"></div>`