summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--notes.md24
-rw-r--r--package.json (renamed from src/package.json)0
-rw-r--r--src/Canvas.js144
-rw-r--r--test.js (renamed from src/test.js)0
4 files changed, 24 insertions, 144 deletions
diff --git a/notes.md b/notes.md
index 5284adb..2a869db 100644
--- a/notes.md
+++ b/notes.md
@@ -67,3 +67,27 @@ would represent things like individual buildings and only be visible when highly
Node should be able to indicate things like climate regions or land use patterns as well,
and those kinds of nodes should be on their own layers, so that the user can view or
ignore relevant data at any time.
+
+
+nodes
+-----
+
+node types:
+ - point
+ - path
+ - polygon
+
+all nodes can be selected to view properties in the right pane. They can then be edited by clicking a button on the pane.
+
+All nodes can be moved when editing. Path and polygon nodes can have their constituent points moved and can insert new nodes.
+
+Nodes have an associated "relevance level"
+
+ - building (smallest)
+ - neighborhood
+ - city
+ - province
+ - nation
+ - global (largest)
+
+depending on a map's scale, some of these may not be relevant (i.e. a map only showing a city would not use higher relevance levels).
diff --git a/src/package.json b/package.json
index bedb411..bedb411 100644
--- a/src/package.json
+++ b/package.json
diff --git a/src/Canvas.js b/src/Canvas.js
deleted file mode 100644
index 6dff7bd..0000000
--- a/src/Canvas.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { clamp } from './modules/Util.js';
-
-class Canvas {
- constructor(rootId) {
- const root = document.getElementById(rootId);
-
- this.element = document.createElement('canvas');
- this.context = this.element.getContext('2d');
-
- /* state variables */
- this.scale = 1;
- this.zoom = 1;
- const ZOOM_SPEED = 1.2;
-
- this.mouse = {
- screenPos: { x: 0, y: 0 },
- drawingPos: { x: 0, y: 0 },
- };
- this.pan = { x: 0, y: 0 };
- this.panning = false;
-
- /* callbacks */
- this.onDraw = null;
- this.onMouseMove = null;
- this.onMouseDown = null;
- this.onMouseUp = null;
-
- /* register event listeners */
-
- /* mouse movement */
- this.element.addEventListener('mousemove', e => {
- this.mouse.screenPos.x = e.offsetX;
- this.mouse.screenPos.y = e.offsetY;
-
- const [xd, yd] = this.screenToDrawingPos(e.offsetX, e.offsetY);
-
- /* compute movement */
- const dx = e.movementX / (this.zoom * this.scale);
- const dy = e.movementY / (this.zoom * this.scale);
-
- /* pan? */
- if (this.panning) {
- this.pan.x += dx;
- this.pan.y += dy;
- this.setTransform();
- }
-
- this.mouse.drawingPos.x = xd;
- this.mouse.drawingPos.y = yd;
-
- if (this.onMouseMove) this.onMouseMove(this.mousePos);
- });
-
- /* clicking */
- this.element.addEventListener('mousedown', e => {
- e.preventDefault();
- if (e.button === 1) this.panning = true;
- if (this.onMouseDown) this.onMouseDown(e);
- });
- this.element.addEventListener('mouseup', e => {
- if (e.button === 1) this.panning = false;
- if (this.onMouseUp) this.onMouseUp(e);
- });
-
- /* mouse leave */
- this.element.addEventListener('mouseleave', e => {
- this.panning = false;
- });
-
- /* mouse wheel */
- this.element.addEventListener('wheel', e => {
- if (this.panning) return; // don't zoom and pan simultaneously
-
- const delta = e.deltaY < 0 ? ZOOM_SPEED : 1/ZOOM_SPEED;
- const alpha = (1/delta) - 1;
-
- /* zoom in */
- this.zoom *= delta;
- this.zoom = clamp(this.zoom, 1, 1000);
- this.setTransform();
-
- /* pan to keep mouse in the same place */
- const [mouseX, mouseY] = this.screenToDrawingPos(this.mouse.screenPos.x, this.mouse.screenPos.y);
- this.pan.x += mouseX - this.mouse.drawingPos.x;
- this.pan.y += mouseY - this.mouse.drawingPos.y;
- this.setTransform();
- this.draw();
- });
-
- /* finalize setup */
- this.fillWindow();
- window.addEventListener('resize', () => this.fillWindow());
- root.appendChild(this.element);
- }
-
- setTransform() {
- /* clamp pan */
- const xMax = this.pixelsToUnits(this.element.width) - 1;
- const yMax = this.pixelsToUnits(this.element.height) - 1;
- this.pan.x = clamp(this.pan.x, xMax, 0);
- this.pan.y = clamp(this.pan.y, yMax, 0);
-
- this.context.setTransform(1, 0, 0, 1, 0, 0);
- this.context.scale(this.zoom * this.scale, this.zoom * this.scale);
- this.context.translate(this.pan.x, this.pan.y);
- }
-
- fillWindow() {
- const width = window.innerWidth;
- const height = window.innerHeight;
- this.scale = Math.max(width, height);
-
- this.element.width = width; this.element.height = height;
- this.setTransform();
-
- this.draw();
- }
-
- pixelsToUnits(value) {
- return value / this.zoom / this.scale;
- }
-
- unitsToPixels(value) {
- return value * this.zoom * this.scale;
- }
-
- screenToDrawingPos(xs, ys) {
- const matrix = this.context.getTransform();
- matrix.invertSelf();
-
- /* compute drawing-space position */
- const x = matrix.a*xs + matrix.b*ys + matrix.e;
- const y = matrix.c*xs + matrix.d*ys + matrix.f;
-
- return [ x, y ];
- }
-
- draw() {
- this.context.clearRect(0, 0, 1, 1);
- if (this.onDraw) this.onDraw(this.context);
- }
-}
-
-export default Canvas;
diff --git a/src/test.js b/test.js
index 6a92978..6a92978 100644
--- a/src/test.js
+++ b/test.js