diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-22 12:56:44 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-22 12:56:45 +0800 |
commit | 5125cc7a08dbeb3d85d17cfaac844b4dc027e91d (patch) | |
tree | 1245e56df9d44064adf5ecf82673090180eb8f42 /src | |
parent | 6d930d449f78b952d11ba524e33fe39c52d6e2df (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.mjs | 8 | ||||
-rw-r--r-- | src/css/dumbymap.css | 12 |
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 | ||