blob: 8b4e0735e87414e20a43833660c8062619fc2ba0 (
plain)
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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')
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 = draggableBlock.querySelector('.draggable')
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 } },
})
// 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 {
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)
}
}
|
