From f82f540a0cf07e8fd95e36dea10a49aa839832d0 Mon Sep 17 00:00:00 2001 From: sanine Date: Tue, 31 May 2022 22:54:59 -0500 Subject: move test.js and package.json to the root --- notes.md | 24 ++++++++++ package.json | 3 ++ src/Canvas.js | 144 ------------------------------------------------------- src/package.json | 3 -- src/test.js | 22 --------- test.js | 22 +++++++++ 6 files changed, 49 insertions(+), 169 deletions(-) create mode 100644 package.json delete mode 100644 src/Canvas.js delete mode 100644 src/package.json delete mode 100644 src/test.js create mode 100644 test.js 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/package.json b/package.json new file mode 100644 index 0000000..bedb411 --- /dev/null +++ b/package.json @@ -0,0 +1,3 @@ +{ + "type": "module" +} 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/package.json b/src/package.json deleted file mode 100644 index bedb411..0000000 --- a/src/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} diff --git a/src/test.js b/src/test.js deleted file mode 100644 index 6a92978..0000000 --- a/src/test.js +++ /dev/null @@ -1,22 +0,0 @@ -import fs from 'node:fs'; -import { execSync } from 'node:child_process'; - -function recursiveScanDir(path, f) -{ - let dirs = []; - for (let dirent of fs.readdirSync(path, { withFileTypes: true })) { - if (dirent.isDirectory()) dirs.push(`${path}/${dirent.name}`); - else f(`${path}/${dirent.name}`); - } - for (let dir of dirs) { - recursiveScanDir(dir, f); - } -} - -recursiveScanDir('.', fname => { - if (fname.endsWith('.test.js')) { - console.log(`======== ${fname} ========`); - execSync(`node ${fname}`, { stdio: 'inherit' }); - console.log(''); - } -}); diff --git a/test.js b/test.js new file mode 100644 index 0000000..6a92978 --- /dev/null +++ b/test.js @@ -0,0 +1,22 @@ +import fs from 'node:fs'; +import { execSync } from 'node:child_process'; + +function recursiveScanDir(path, f) +{ + let dirs = []; + for (let dirent of fs.readdirSync(path, { withFileTypes: true })) { + if (dirent.isDirectory()) dirs.push(`${path}/${dirent.name}`); + else f(`${path}/${dirent.name}`); + } + for (let dir of dirs) { + recursiveScanDir(dir, f); + } +} + +recursiveScanDir('.', fname => { + if (fname.endsWith('.test.js')) { + console.log(`======== ${fname} ========`); + execSync(`node ${fname}`, { stdio: 'inherit' }); + console.log(''); + } +}); -- cgit v1.2.1