aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
authorHsieh Chin Fan <pham@topo.tw>2024-09-22 12:56:44 +0800
committerHsieh Chin Fan <pham@topo.tw>2024-09-22 12:56:45 +0800
commit5125cc7a08dbeb3d85d17cfaac844b4dc027e91d (patch)
tree1245e56df9d44064adf5ecf82673090180eb8f42 /src
parent6d930d449f78b952d11ba524e33fe39c52d6e2df (diff)
feat(layout): keep handle be active when on drag
Even if cursor is not hovering handle element
Diffstat (limited to 'src')
-rw-r--r--src/Layout.mjs8
-rw-r--r--src/css/dumbymap.css12
2 files changed, 12 insertions, 8 deletions
diff --git a/src/Layout.mjs b/src/Layout.mjs
index c81225f..746dda2 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -78,7 +78,7 @@ export class Overlay extends Layout {
78 draggablePart.onmouseup = (e) => { 78 draggablePart.onmouseup = (e) => {
79 if (e.button === 1) { 79 if (e.button === 1) {
80 // Hide block with middle click 80 // Hide block with middle click
81 draggableBlock.setAttribute("data-hide", "true") 81 draggableBlock.setAttribute("data-state", "hide")
82 } 82 }
83 } 83 }
84 84
@@ -95,7 +95,7 @@ export class Overlay extends Layout {
95 95
96 // Close button 96 // Close button
97 draggableBlock.querySelector('#close').onclick = () => { 97 draggableBlock.querySelector('#close').onclick = () => {
98 draggableBlock.setAttribute("data-hide", "true") 98 draggableBlock.setAttribute("data-state", "hide")
99 } 99 }
100 // Plus/Minus font-size of content 100 // Plus/Minus font-size of content
101 draggableBlock.querySelector('#plus-font-size').onclick = () => { 101 draggableBlock.querySelector('#plus-font-size').onclick = () => {
@@ -106,12 +106,16 @@ export class Overlay extends Layout {
106 const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16 106 const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
107 block.style.fontSize = `${fontSize - 0.1}rem` 107 block.style.fontSize = `${fontSize - 0.1}rem`
108 } 108 }
109
110 // FIXME use pure CSS to hide utils
109 const utils = draggableBlock.querySelector('.utils') 111 const utils = draggableBlock.querySelector('.utils')
110 draggableInstance.onDragStart = () => { 112 draggableInstance.onDragStart = () => {
111 utils.style.opacity = 0 113 utils.style.opacity = 0
114 draggableBlock.setAttribute('data-state', 'on-drag')
112 } 115 }
113 draggableInstance.onDragEnd = () => { 116 draggableInstance.onDragEnd = () => {
114 utils.style = '' 117 utils.style = ''
118 draggableBlock.removeAttribute('data-state')
115 } 119 }
116 120
117 // Reposition draggable instance when resized 121 // Reposition draggable instance when resized
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index b2e73ab..fb3b76e 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -330,14 +330,15 @@
330 display: none; 330 display: none;
331 } 331 }
332 332
333 &[data-hide="true"] { 333 &[data-state="hide"] {
334 animation: fade-out 0.3s; 334 animation: fade-out 0.3s;
335 335
336 opacity: 0; 336 opacity: 0;
337 visibility: hidden; 337 visibility: hidden;
338 } 338 }
339 339
340 &:has(.draggable:hover, .utils:hover) { 340 &:has(.draggable:hover, .utils:hover),
341 &[data-state="on-drag"] {
341 .dumby-block { 342 .dumby-block {
342 color: gray; 343 color: gray;
343 344
@@ -347,8 +348,6 @@
347 .handle { 348 .handle {
348 background: #e1e1e1; 349 background: #e1e1e1;
349 350
350 /* border-bottom: solid gray; */
351
352 transform: unset; 351 transform: unset;
353 } 352 }
354 353
@@ -362,11 +361,12 @@
362 361
363 font-size: 1.5rem; 362 font-size: 1.5rem;
364 363
365 transition: opacity 1s linear;
366 gap: 6px; 364 gap: 6px;
367 animation: fade-in 1.5s; 365 animation: fade-in 1s;
368 padding-left: 1rem; 366 padding-left: 1rem;
369 367
368 transition: opacity 0.5s;
369
370 > * { 370 > * {
371 padding: 0.2rem 0.4rem; 371 padding: 0.2rem 0.4rem;
372 372