summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/Draggable/Draggable.js57
-rw-r--r--src/Map/Layer.js7
-rw-r--r--src/index.html13
-rw-r--r--src/main.js11
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);