add draggable 'windows'node-based

1 files changed, 57 insertions, 0 deletions

diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js
new file mode 100644
index 0000000..0b35a88
--- /dev/null
+++ b/src/Draggable/Draggable.js
@@ -0,0 +1,57 @@
+import h from '../Util/DomUtil.js';
+import { clamp } from '../Util/Util.js';
+
+class DraggableWindow {
+	constructor(title) {
+		this.div = h('div', { 'class': 'draggable-window', 'style': 'position: absolute; z-index: 9' });
+		this.header = h('div', title, { 'class': 'draggable-header', 'style': 'cursor: move; z-index: 10' });
+		this.div.appendChild(this.header);
+
+		this.lastPosition = { x: 0, y: 0 };
+		this.position = { x: 0, y: 0 };
+
+		this.div.addEventListener('mousedown', e => {
+			if (e.button != 0) return;
+			e.preventDefault();
+			this.position = {
+				x: this.div.offsetLeft,
+				y: this.div.offsetTop,
+			};
+			this.lastPosition = {
+				x: e.clientX,
+				y: e.clientY,
+			};
+			document.onmousemove = e => {
+				const dx = e.clientX - this.lastPosition.x;
+				const dy = e.clientY - this.lastPosition.y;
+
+				this.position.x += dx;
+				this.position.y += dy;
+
+				this.lastPosition = {
+					x: e.clientX,
+					y: e.clientY,
+				};
+				
+				this.div.style.left = `${clamp(this.position.x, 0, window.innerWidth-20)}px`;
+				this.div.style.top = `${clamp(this.position.y, 0, window.innerHeight-20)}px`;
+			};
+			document.onmouseup = () => {
+				document.onmousemove = null;
+				document.onmouseup = null;
+			};
+		});
+
+		document.body.appendChild(this.div);
+	}
+
+	appendChild(element) {
+		this.div.appendChild(element);
+	}
+
+	setTitle(title) {
+		this.header.textContent = title;
+	}
+}
+
+export default DraggableWindow;