feat: add close button for draggable block

2 files changed, 44 insertions, 23 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index 5673722..c81225f 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -66,6 +66,7 @@ export class Overlay extends Layout {
           <div class="handle">\u2630</div>
         </div>
         <div class="utils">
+          <div id="close">\u274C</div>
           <div id="plus-font-size" ">\u2795</div>
           <div id="minus-font-size">\u2796</div>
         </div>
@@ -92,24 +93,25 @@ export class Overlay extends Layout {
         snap: { x: { step: 20 }, y: { step: 20 } },
       })
 
+      // Close button
+      draggableBlock.querySelector('#close').onclick = () => {
+          draggableBlock.setAttribute("data-hide", "true")
+      }
       // Plus/Minus font-size of content
-      const plusButton = draggableBlock.querySelector('#plus-font-size')
-      plusButton.onclick = () => {
+      draggableBlock.querySelector('#plus-font-size').onclick = () => {
         const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
         block.style.fontSize = `${fontSize + 0.1}rem`
       }
-      const minusButton = draggableBlock.querySelector('#minus-font-size')
-      minusButton.onclick = () => {
+      draggableBlock.querySelector('#minus-font-size').onclick = () => {
         const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
         block.style.fontSize = `${fontSize - 0.1}rem`
       }
+      const utils = draggableBlock.querySelector('.utils')
       draggableInstance.onDragStart = () => {
-        plusButton.style.opacity = '0'
-        minusButton.style.opacity = '0'
+        utils.style.opacity = 0
       }
       draggableInstance.onDragEnd = () => {
-        plusButton.style = ''
-        minusButton.style = ''
+        utils.style = ''
       }
 
       // Reposition draggable instance when resized
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index f1aa02c..b2e73ab 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -3,12 +3,22 @@
 }
 
 @keyframes fade-in {
-  from { opacity: 0.3; }
+  from { opacity: 0; }
   to { opacity: 1; }
 }
 
 @keyframes fade-out {
   from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes map-fade-in {
+  from { opacity: 0.3; }
+  to { opacity: 1; }
+}
+
+@keyframes map-fade-out {
+  from { opacity: 1; }
   to { opacity: 0.3; }
 }
 
@@ -110,7 +120,7 @@
       border: 3px solid transparent;
 
       background: white;
-      animation: fade-in 1s;
+      animation: map-fade-in 1s;
 
       &[data-focus="true"] {
         border: 3px solid gray;
@@ -123,7 +133,7 @@
       border: 3px solid gray;
 
       opacity: 0.3;
-      animation: fade-out 1s;
+      animation: map-fade-out 1s;
     }
   }
 
@@ -139,8 +149,8 @@
       height: 100%;
 
       position: absolute;
-      top: 0;
       left: 0;
+      top: 0;
     }
 
     [data-focus="true"] {
@@ -192,17 +202,17 @@
       height: 60px;
 
       position: absolute;
-      top: calc(50% - 30px);
       left: -30px;
+      top: calc(50% - 30px);
 
       border-radius: 50%;
 
       background-color: #3887be;
       background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+");
 
-      cursor: grab;
-      transition: transform 0.3s ease-in-out;
       transform: scale(0.5, 0.5);
+      transition: transform 0.3s ease-in-out;
+      cursor: grab;
       box-shadow: inset 0 0 0 2px white;
 
       &:hover {
@@ -223,8 +233,8 @@
     padding: 0;
 
     position: fixed;
-    top: 0;
     left: 0;
+    top: 0;
   }
 
   .Showcase {
@@ -252,6 +262,8 @@
   font-size: 0.8rem;
   pointer-events: auto;
 
+  transition: visibility 1s;
+
   .dumby-block {
     overflow: auto;
     margin: 0;
@@ -299,8 +311,8 @@
     width: 100%;
 
     position: absolute;
-    top: 0;
     left: 0;
+    top: 0;
     z-index: 1;
     border-top-left-radius: 0.3rem;
     border-top-right-radius: 0.3rem;
@@ -309,8 +321,8 @@
       font-size: 1.1rem;
       text-align: center;
 
-      transition: all 0.3s ease-in-out;
       transform: translate(0, -0.6rem);
+      transition: all 0.3s ease-in-out;
     }
   }
 
@@ -319,7 +331,10 @@
   }
 
   &[data-hide="true"] {
-    display: none;
+    animation: fade-out 0.3s;
+
+    opacity: 0;
+    visibility: hidden;
   }
 
   &:has(.draggable:hover, .utils:hover) {
@@ -341,16 +356,18 @@
       display: flex;
 
       position: absolute;
+      left: 100%;
       top: 0;
       top: -0.5rem;
-      left: 100%;
 
       font-size: 1.5rem;
+
+      transition: opacity 1s linear;
       gap: 6px;
       animation: fade-in 1.5s;
       padding-left: 1rem;
 
-      [id$="-font-size"]{
+      > * {
         padding: 0.2rem 0.4rem;
 
         border: 3px gray solid;
@@ -358,13 +375,15 @@
 
         background: white;
 
-        transition: opacity 1s linear;
         user-select: none;
       }
 
+      #close {
+         cursor: pointer;
+      }
+
        #plus-font-size {
          cursor: zoom-in;
-        user-select: none;
        }
 
        #minus-font-size {