@abi-software/flatmap-viewer 2.2.2-beta.1 → 2.2.2-beta.2

package/README.rst

@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
 Package Installation
 ====================
 
-* ``npm install @abi-software/flatmap-viewer@2.2.2-beta.1``
+* ``npm install @abi-software/flatmap-viewer@2.2.2-beta.2``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.2-beta.1",
+  "version": "2.2.2-beta.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/editor.js

@@ -0,0 +1,198 @@
+import { Bezier } from "bezier-js";
+
+
+class BezierCurve
+{
+    constructor(id, ...points) {
+        this.__id = id;
+        this.__bezier = new Bezier(...points);
+    }
+
+    asGeoJSON(samples=100)
+    {
+        const coords = [];
+        for (let ts = 0; ts <= samples; ts++) {
+            const pt = this.__bezier.get(float(ts)/float(samples));
+            coords.push([pt.x, pt.y]);
+        }
+        return {
+            'type': 'Feature',
+            'geometry': {
+                'type': 'LineString',
+                'coordinates': coords
+            },
+            'properties': {
+                'bezier': this.__id
+            }
+        };
+    }
+
+    asPoints()
+    {
+        const geojson = [];
+        for (const n of [0, 1, 2, 3]) {
+            const pt = this.__bezier.points[n];
+            geojson.push({
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [pt.x, pt.y]
+                },
+                'properties': {
+                    'bezier': this.__id,
+                    'point': n
+                }
+            });
+        }
+        return geojson;
+    }
+}
+
+
+export class NetworkEditor
+{
+    constructor(flatmap)
+    {
+        this.__map = flatmap.map;
+        this.__canvas = this.__map.getCanvasContainer();
+ 
+        this.__geojson = {  // lines and points as separate sources???
+            'type': 'FeatureCollection',
+            'features': [
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Point',
+                        'coordinates': [0, 0]
+                    },
+                    'properties': {
+                        'id': 0
+                    }
+                }
+            ]
+        };
+
+        // Add a single point to the map
+        this.__map.addSource('curves', {
+            'type': 'geojson',
+            'data': this.__geojson
+        });
+
+        this.__map.addLayer({
+            'id': 'lines',
+            'type': 'line',
+            'source': 'curves',
+            'paint': {
+                'line-color': '#3887be'
+            }
+        });
+        this.__map.addLayer({
+            'id': 'points',
+            'type': 'circle',
+            'source': 'curves',
+            'paint': {
+                'circle-radius': 10,
+                'circle-color': '#3887be'
+            }
+        });
+
+        this.__currentPoint = null;
+
+        this.__map.on('mouseenter', this.mouseEnter.bind(this));
+        this.__map.on('mouseleave', this.mouseLeave.bind(this));
+        this.__map.on('mousedown', this.mouseDown.bind(this));
+        this.__map.on('touchstart', this.touchStart.bind(this));
+    }
+
+    addPoint(coords)
+    {
+         const nextId = this.__geojson.features.length;
+         this.__geojson.features.push({
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Point',
+                'coordinates': coords
+            },
+            'properties': {
+                'id': nextId
+            }
+        });
+        this.__map.getSource('curves').setData(this.__geojson);
+        return nextId;
+    }
+
+    mouseEnter(e) {
+        console.log('Mouse enter...');
+
+        this.__map.setPaintProperty('lines', 'line-color', '#3bb2d0');
+        this.__map.setPaintProperty('points', 'circle-color', '#3bb2d0');
+        this.__canvas.style.cursor = 'move';
+    }
+
+         
+    mouseLeave(e) {
+        this.__map.setPaintProperty('lines', 'line-color', '#3887be');
+        this.__map.setPaintProperty('points', 'circle-color', '#3887be');
+        this.__canvas.style.cursor = '';
+    }
+
+
+    mouseDown(e) {
+        console.log('Mouse down...')
+        // Prevent the default map drag behavior.
+        e.preventDefault();
+
+
+        const features = this.__map.queryRenderedFeatures(e.point, {'layers': ['lines', 'points']});
+        if (features.length === 0) {
+            const coords = e.lngLat;
+            this.__currentPoint = this.addPoint([coords.lng, coords.lat]);
+        } else {
+            const currentPoint = features[0].properties.id;
+            if (this.__currentPoint === null) {
+                this.__currentPoint = currentPoint;
+            } else if (this.__currentPoint === currentPoint) {
+                this.__currentPoint = null;
+            }
+        }
+
+        this.__canvas.style.cursor = 'grab';
+
+        this.__map.on('mousemove', this.onMove.bind(this));
+        this.__map.once('mouseup', this.onUp.bind(this));
+
+    }
+         
+    touchStart(e) {
+        if (e.points.length !== 1) return;
+
+        // Prevent the default map drag behavior.
+        e.preventDefault();
+
+        this.__map.on('touchmove', this.onMove.bind(this));
+        this.__map.once('touchend', this.onUp.bind(this));
+    }
+
+    onMove(e) {
+        console.log('Mouse move...')
+
+        // Set a UI indicator for dragging.
+        this.__canvas.style.cursor = 'grabbing';  // ????
+
+        if (this.__currentPoint !== null) {
+            const coords = e.lngLat;
+            this.__geojson.features[this.__currentPoint].geometry.coordinates = [coords.lng, coords.lat];
+            this.__map.getSource('curves').setData(this.__geojson);
+        }
+    }
+
+    onUp(e) {
+        console.log('End draw at', e.lngLat)
+
+        this.__canvas.style.cursor = '';
+
+        // Unbind mouse/touch events
+        this.__map.off('mousemove', this.onMove.bind(this));
+        this.__map.off('touchmove', this.onMove.bind(this));
+    }
+}

package/static/flatmap-viewer.css

@@ -183,6 +183,10 @@ li.flatmap-contextmenu-item:hover {
     font-size: 10pt;
     cursor: pointer;
     text-align: left;
+    background: white;
+    border: 1px solid gray;
+    padding: 4px;
+    opacity: 0.8;
 }
 .flatmap-nerve-grid input {
     height:  1.1em;