4 files changed, 16 insertions, 11 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index 51caefb..1279111 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -123,7 +123,6 @@ export class Overlay extends Layout {
   }
 
   enterHandler = ({ htmlHolder, blocks }) => {
-
     // FIXME It is weird rect from this method and this scope are different...
     blocks.forEach(this.saveLeftTopAsData)
 
@@ -144,10 +143,11 @@ export class Overlay extends Layout {
         </div>
       `
 
+      // Set DOMRect for wrapper
       wrapper.appendChild(block)
-      htmlHolder.appendChild(wrapper)
       wrapper.style.left = left + "px"
       wrapper.style.top = top + "px"
+      htmlHolder.appendChild(wrapper)
       const { width } = wrapper.getBoundingClientRect()
       left += width + 30
       if (left > window.innerWidth) {
@@ -155,10 +155,11 @@ export class Overlay extends Layout {
         left = left % window.innerWidth
       }
 
+      // Animation for DOMRect
       animateRectTransition(
         wrapper,
         { left: originLeft, top: originTop },
-        { resume: true, duration: 500 }
+        { resume: true, duration: 300 }
       )
         .finished
         .finally(() => this.addDraggable(wrapper))
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index b5afb6a..7408529 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -274,9 +274,10 @@ export const generateMaps = (container, callback) => {
       placeholder.classList.remove('map-container', 'focus')
       target.parentElement.replaceChild(placeholder, target)
 
-      // HACK Trigger CSS transition, if placeholde is the olny chil element in block,
+      // FIXME Maybe use @start-style for CSS
+      // Trigger CSS transition, if placeholde is the olny chil element in block,
       // reduce its height to zero.
-      // To make sure the original height of placeholder is applied, callBoundingClientRect() seems work(Why?).
+      // To make sure the original height of placeholder is applied, DOM changes seems needed
       // then set data-attribute for CSS selector to change height to 0
       placeholder.getBoundingClientRect()
       placeholder.setAttribute('data-placeholder', target.id)
diff --git a/src/editor.mjs b/src/editor.mjs
index 92513a3..539a770 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -151,10 +151,11 @@ const debounceForMap = (() => {
   let timer = null;
 
   return function(...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
       dumbymap = generateMaps.apply(this, args)
-    }, 1000);
+    // clearTimeout(timer);
+    // timer = setTimeout(() => {
+    //   dumbymap = generateMaps.apply(this, args)
+    // }, 10);
   }
 })()
 
@@ -542,9 +543,9 @@ document.onkeydown = (e) => {
       e.preventDefault()
       dumbymap.utils.focusNextMap(e.shiftKey)
     }
-    if (e.key === 'x') {
+    if (e.key === 'x' || e.key === 'X') {
       e.preventDefault()
-      dumbymap.utils.switchToNextLayout()
+      dumbymap.utils.switchToNextLayout(e.shiftKey)
     }
     if (e.key === 'n') {
       e.preventDefault()
@@ -563,6 +564,7 @@ document.onkeydown = (e) => {
 
 // }}}
 // }}}
+// Layout Switch {{{
 const layoutObserver = new MutationObserver(() => {
   const layout = HtmlContainer.getAttribute('data-layout')
   if (layout !== 'normal') {
@@ -575,5 +577,6 @@ layoutObserver.observe(HtmlContainer, {
   attributeFilter: ["data-layout"],
   attributeOldValue: true
 });
+// }}}
 
 // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}}
diff --git a/src/utils.mjs b/src/utils.mjs
index 46632ba..ead3002 100644
--- a/src/utils.mjs
+++ b/src/utils.mjs
@@ -57,7 +57,7 @@ export const animateRectTransition = (element, rect, options = {}) => {
   return element.animate(
     keyframes,
     {
-      duration: options.duration ?? 300,
+      duration: options.duration ?? 500,
       easing: 'ease-in-out',
     }
   );