src/OverlayLayout.mjs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

import PlainDraggable from 'plain-draggable'
import { onRemove } from './utils'

export class OverlayLayout {
  name = "overlay"

  enterHandler = (dumbymap) => {
    const container = dumbymap.htmlHolder
    const moveIntoDraggable = (block) => {
      // Create draggable block
      const draggableBlock = document.createElement('div')
      draggableBlock.classList.add('draggable-block')

      // Add draggable part
      const draggablePart = document.createElement('div');
      draggablePart.classList.add('draggable')
      draggablePart.textContent = '☰'
      draggablePart.title = 'Use middle-click to remove block'
      draggablePart.onmouseup = (e) => {
        if (e.button === 1) {
          // Hide block with middle click
          draggableBlock.style.display = "none";
        }
      }

      // Set elements
      draggableBlock.appendChild(draggablePart)
      draggableBlock.appendChild(block)
      container.appendChild(draggableBlock)

      // Add draggable instance
      const draggableInstance = new PlainDraggable(draggableBlock, {
        handle: draggablePart,
        snap: { x: { step: 20 }, y: { step: 20 } },
      })

      // Reposition draggable instance when resized
      new ResizeObserver(() => {
        try {
          draggableInstance.position();
        } catch (_) {
          null
        }
      }).observe(draggableBlock);

      // Callback for remove
      onRemove(draggableBlock, () => {
        draggableInstance.remove()
      })

      return draggableInstance
    }

    // Create draggable blocks and set each position by previous one
    let [x, y] = [0, 0]
    dumbymap.blocks.map(moveIntoDraggable)
      .forEach(draggable => {
        draggable.left = x
        draggable.top = y
        const rect = draggable.element.getBoundingClientRect()
        x += rect.width + 30
        if (x > window.innerWidth) {
          y += 200
          x = x % window.innerWidth
        }
      })
  }
  leaveHandler = (dumbymap) => {
    const container = dumbymap.htmlHolder
    const resumeFromDraggable = (block) => {
      const draggableContainer = block.closest('.draggable-block')
      if (!draggableContainer) return
      container.appendChild(block)
      block.removeAttribute('style')
      draggableContainer.remove()
    }
    dumbymap.blocks.forEach(resumeFromDraggable)
  }
}