feat: add font-size plus/minus button

* When draggable handle is on hover, they appears
* Hide when drag start, show when drag end

2 files changed, 92 insertions, 21 deletions

diff --git a/src/OverlayLayout.mjs b/src/OverlayLayout.mjs
index c87033b..8b4e073 100644
--- a/src/OverlayLayout.mjs
+++ b/src/OverlayLayout.mjs
@@ -10,11 +10,18 @@ export class OverlayLayout {
       // Create draggable block
       const draggableBlock = document.createElement('div')
       draggableBlock.classList.add('draggable-block')
+      draggableBlock.innerHTML = `
+        <div class="draggable">
+          <div class="handle">\u2630</div>
+        </div>
+        <div class="utils">
+          <div id="plus-font-size" ">\u2795</div>
+          <div id="minus-font-size">\u2796</div>
+        </div>
+      `
 
       // Add draggable part
-      const draggablePart = document.createElement('div');
-      draggablePart.classList.add('draggable')
-      draggablePart.textContent = '☰'
+      const draggablePart = draggableBlock.querySelector('.draggable')
       draggablePart.title = 'Use middle-click to remove block'
       draggablePart.onmouseup = (e) => {
         if (e.button === 1) {
@@ -34,6 +41,26 @@ export class OverlayLayout {
         snap: { x: { step: 20 }, y: { step: 20 } },
       })
 
+      // Plus/Minus font-size of content
+      const plusButton = draggableBlock.querySelector('#plus-font-size')
+      plusButton.onclick = () => {
+        const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
+        block.style.fontSize = `${fontSize + 0.1}rem`
+      }
+      const minusButton = draggableBlock.querySelector('#minus-font-size')
+      minusButton.onclick = () => {
+        const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
+        block.style.fontSize = `${fontSize - 0.1}rem`
+      }
+      draggableInstance.onDragStart = () => {
+        plusButton.style.opacity = '0'
+        minusButton.style.opacity = '0'
+      }
+      draggableInstance.onDragEnd = () => {
+        plusButton.style = ''
+        minusButton.style = ''
+      }
+
       // Reposition draggable instance when resized
       new ResizeObserver(() => {
         try {
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 84da02f..f5695f1 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -85,7 +85,7 @@
   padding: 0;
 
   position: relative;
-  overflow-x: scroll;
+  overflow-x: auto;
   max-width: 60em;
 
   /* height: 100vh; */
@@ -114,7 +114,7 @@
   .SemanticHtml {
     width: 100%;
     padding: 1.5rem;
-    overflow-y: scroll;
+    overflow-y: auto;
     order: 1;
 
     pre {
@@ -167,7 +167,7 @@
 .DumbyMap[data-layout="side"] {
   .SemanticHtml {
     flex: 50%;
-    overflow-y: scroll;
+    overflow-y: auto;
 
     height: 100vh;
   }
@@ -190,7 +190,7 @@
     margin: 0;
     padding: 0;
 
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
   }
@@ -207,22 +207,21 @@
 }
 
 .draggable-block {
-  overflow: clip;
-  box-sizing: content-box;
+  overflow: visible;
   width: fit-content;
 
   position: absolute;
 
-  border: solid gray;
+  border: solid gray 3px;
   border-radius: 0.5rem;
 
   background-color: white;
 
-  font-size: 12px;
+  font-size: 0.8rem;
   pointer-events: auto;
 
   .dumby-block {
-    overflow: scroll;
+    overflow: auto;
     margin: 0;
 
     position: relative;
@@ -264,31 +263,76 @@
 
   .draggable {
     display: block;
+    overflow: clip;
     width: 100%;
 
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
+    outline: red 3px;
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    .handle {
+      font-size: 1.1rem;
+      text-align: center;
+
+      transition: all 0.3s ease-in-out;
+      transform: translate(0, -0.6rem);
+    }
+  }
 
-    font-size: 1.1rem;
-    text-align: center;
+  .utils {
+    display: none;
+  }
 
-    transition: all 0.3s ease-in-out;
-    transform: translate(0, -0.6rem);
+  &:has(.draggable:hover, .utils:hover) {
+    .dumby-block {
+      color: gray;
 
-    &:hover {
+      opacity: 0.7;
+    }
+
+    .handle {
       background: #e1e1e1;
 
-      border-bottom: solid gray;
+      /* border-bottom: solid gray; */
 
       transform: unset;
+    }
 
-      & ~ * {
-        color: gray;
+    .utils {
+      display: flex;
 
-        opacity: 0.7;
+      position: absolute;
+      top: 0;
+      top: -0.5rem;
+      left: 100%;
+
+      font-size: 1.5rem;
+      gap: 6px;
+      animation: fade-in 1.5s;
+      padding-left: 1rem;
+
+      [id$="-font-size"]{
+        padding: 0.2rem 0.4rem;
+
+        border: 3px gray solid;
+        border-radius: 5px;
+
+        background: white;
+
+        transition: all 1s ease-in-out;
       }
+
+       #plus-font-size {
+         cursor: zoom-in;
+       }
+
+       #minus-font-size {
+         cursor: zoom-out;
+       }
     }
   }
 }