add draggable 'windows'node-based

4 files changed, 81 insertions, 7 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;
diff --git a/src/Map/Layer.js b/src/Map/Layer.js
index 1f486ad..38037f5 100644
--- a/src/Map/Layer.js
+++ b/src/Map/Layer.js
@@ -130,9 +130,7 @@ class LayerData {
 
 
 class LayerView {
-	constructor(parentId) {
-		const parentElement = document.getElementById(parentId);
-
+	constructor(parentElement) {
 		const button = (label, f) => {
 			const b = h('button', label, { 'style': 'margin: 0 5px' });
 			b.onclick = f;
@@ -141,8 +139,7 @@ class LayerView {
 
 		this.layersList = h('ul');
 
-		const root = h('fieldset', { 'class': 'layer-view' }, [
-			h('legend', 'Layers'),
+		const root = h('div', { 'class': 'layer-view' }, [
 			this.layersList,
 			button('Move Up', () => this.onMoveUp(this._getIdChain())),
 			button('Move Down', () => this.onMoveDown(this._getIdChain())),
diff --git a/src/index.html b/src/index.html
index 9ff8fd3..cce7183 100644
--- a/src/index.html
+++ b/src/index.html
@@ -44,6 +44,19 @@
 			li.visible:before {
 				content: '👁 ';
 			}
+
+			.draggable-window {
+				border: 1px solid white;
+				background-color: #222;
+			}
+
+			.draggable-header {
+				padding: 10px;
+				text-align: center;
+				font-weight: bold;
+				background-color: white;
+				color: #222;
+			}
 		</style>
 		<script type="module" src="main.js"></script>
 	</head>
diff --git a/src/main.js b/src/main.js
index 7e4ab79..5158cf3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,8 @@
+import h from './Util/DomUtil.js';
 import { Transform, Canvas } from './Map/Canvas.js';
 import { Node, Shape, Point, Path, Polygon, Text } from './Map/Shapes.js';
-
-function point(x, y) { this.x = x; this.y = y; };
+import { LayerData, LayerView, LayerController } from './Map/Layer.js';
+import DraggableWindow from './Draggable/Draggable.js';
 
 const canvas = new Canvas('root');
 const transform = new Transform();
@@ -22,3 +23,9 @@ const shapes = [
 ];
 
 canvas.render(transform, shapes);
+
+
+const win = new DraggableWindow('Layers');
+const layerView = new LayerView(win.div);
+const layerData = new LayerData();
+const layerController = new LayerController(layerData, layerView);