@abi-software/flatmap-viewer 2.2.11-devel.1 → 2.2.12-b.1

package/src/styling.js

@@ -44,6 +44,11 @@ class VectorStyleLayer
         return this.__id;
     }
 
+    makeFilter(options)
+    {
+        return null;
+    }
+
     paintStyle(options, changes=false)
     {
         return {};
@@ -157,7 +162,8 @@ export class FeatureFillLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'Polygon'],
-                ['!=', 'models', 'UBERON:0013702']
+                ['!=', 'models', 'UBERON:0013702'],
+                ['!has', 'node']
             ],
             'layout': {
                 'fill-sort-key': ['get', 'scale']
@@ -184,7 +190,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push('red');
+        lineColour.push('black');
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
             lineColour.push('blue');
@@ -193,7 +199,6 @@ export class FeatureBorderLayer extends VectorStyleLayer
         lineColour.push('#000');
         lineColour.push(['has', 'node']);
         lineColour.push('#AFA202');
-        // this colour should be complement of background colour...
         lineColour.push('#444');
 
         const lineOpacity = [
@@ -240,7 +245,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
             'type': 'line',
             'filter': [
                 'all',
-                ['==', '$type', 'Polygon']
+                ['==', '$type', 'Polygon'],
+                ['!has', 'node']
             ],
             'paint': this.paintStyle(options)
         };
@@ -251,33 +257,40 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, options={})
     {
+        const dashed = ('dashed' in options && options.dashed);
         const filterType = dashed ? 'line-dash' : 'line';
         super(id, `feature-${filterType}`, sourceLayer);
-        this.__filter = dashed ?
-            [
-                'any',
-                ['==', 'type', `line-dash`]
-            ]
-        :
+        this.__dashed = dashed;
+    }
+
+    makeFilter(options={})
+    {
+        return this.__dashed ? [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['==', 'type', `line-dash`]
+        ] : [
+            'all',
+            ['==', '$type', 'LineString'],
             [
                 'any',
                 ['==', 'type', 'bezier'],
                 ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+            ]
+        ];
     }
 
-    paintStyle(options)
+    paintStyle(options, changes=false)
     {
         const coloured = !('colour' in options) || options.colour;
         const paintStyle = {
             'line-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
-                ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
+                ['has', 'colour'], ['get', 'colour'],
                 ['==', ['get', 'type'], 'network'], '#AFA202',
                 options.authoring ? '#C44' : '#444'
             ],
@@ -311,7 +324,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         if (this.__dashed) {
             paintStyle['line-dasharray'] = [3, 2];
         }
-        return paintStyle;
+        return super.changedPaintStyle(paintStyle, changes);
     }
 
     style(options)
@@ -319,12 +332,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         return {
             ...super.style(),
             'type': 'line',
-            'filter': [
-                'all',
-                ['==', '$type', 'LineString'],
-                this.__filter
-                 // not for paths...
-            ],
+            'filter': this.makeFilter(options),
             'paint': this.paintStyle(options)
         };
     }
@@ -336,7 +344,7 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, sourceLayer, {dashed: true});
     }
 }
 
@@ -344,26 +352,63 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 export class PathLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, options={})
     {
+        const dashed = ('dashed' in options && options.dashed);
         const filterType = dashed ? 'line-dash' : 'line';
         super(id, `path-${filterType}`, sourceLayer);
-        this.__filter = dashed ?
-            [
+        this.__dashed = dashed;
+    }
+
+    makeFilter(options={})
+    {
+        const sckanState = !'sckan' in options ? 'all'
+                         : options.sckan.toLowerCase();
+        const sckan_filter =
+            sckanState == 'none' ? [
+                ['!has', 'sckan']
+            ] :
+            sckanState == 'valid' ? [[
                 'any',
-                ['==', 'type', `line-dash`]
-            ]
-        :
+                ['!has', 'sckan'],
+                [
+                    'all',
+                    ['has', 'sckan'],
+                    ['==', 'sckan', true]
+                ]
+            ]] :
+            sckanState == 'invalid' ? [[
+                'any',
+                ['!has', 'sckan'],
+                [
+                    'all',
+                    ['has', 'sckan'],
+                    ['!=', 'sckan', true]
+                ]
+            ]] :
+            [ ];
+
+        return this.__dashed ? [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['==', 'type', `line-dash`],
+            ...sckan_filter
+        ] : [
+            'all',
+            ['==', '$type', 'LineString'],
             [
                 'any',
                 ['==', 'type', 'bezier'],
-                ['==', 'type', 'centreline'],
-                ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+                [
+                    'all',
+                    ['==', 'type', `line`],
+                    ...sckan_filter
+                ]
+            ]
+        ];
     }
 
-    paintStyle(options, changes=false)
+    paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
@@ -372,8 +417,6 @@ export class PathLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
-                ['==', ['get', 'type'], 'centreline'], '#00F',
-                ['has', 'error'], '#FFFE0E',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
                 '#888'
@@ -382,10 +425,10 @@ export class PathLineLayer extends VectorStyleLayer
                 'case',
                     ['boolean', ['feature-state', 'hidden'], false], 0.05,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
+                    ['==', ['get', 'kind'], 'error'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
-                // Only dim lines when other lines are selected, not if just features selected??
                 dimmed ? 0.1 : 0.8
             ],
             'line-width': [
@@ -393,7 +436,7 @@ export class PathLineLayer extends VectorStyleLayer
                 'width', ["*", [
                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
-                        ['has', 'error'], 1,
+                        ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
                         ['boolean', ['feature-state', 'selected'], false], 0.6,
@@ -416,6 +459,76 @@ export class PathLineLayer extends VectorStyleLayer
         return super.changedPaintStyle(paintStyle, changes);
     }
 
+    style(options={})
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': this.makeFilter(options),
+            'layout': {
+                'line-cap': 'butt'
+            },
+            'paint': this.paintStyle(options)
+        };
+    }
+}
+
+//==============================================================================
+
+export class PathDashlineLayer extends PathLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, sourceLayer, {dashed: true});
+    }
+}
+
+//==============================================================================
+
+class CentrelineLayer extends VectorStyleLayer
+{
+    constructor(id, type, sourceLayer)
+    {
+        super(id, `centreline-${type}`, sourceLayer);
+        this.__type = type;
+    }
+
+    paintStyle(options, changes=false)
+    {
+        const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': (this.__type == 'edge') ? '#000' : [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'active'], false], '#444',
+                '#CCC'
+            ],
+            'line-opacity': [
+                'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                    ['boolean', ['feature-state', 'selected'], false], 1.0,
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                0.8
+            ],
+            'line-width': [
+                'let',
+                'width',
+                    (this.__type == 'edge') ? 1.6 : 1.2,
+                    [
+                    'interpolate',
+                        ['exponential', 2],
+                        ['zoom'],
+                         2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+                         7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+                         9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+                ]
+            ]
+            // Need to vary width based on zoom??
+            // Or opacity??
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
     style(options)
     {
         return {
@@ -424,23 +537,104 @@ export class PathLineLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'LineString'],
-                this.__filter
+                ['==', 'kind', 'centreline']
             ],
+            'paint': this.paintStyle(options),
             'layout': {
-                'line-cap': 'butt'
-            },
-            'paint': this.paintStyle(options)
+                'line-cap': 'square',
+                'line-join': 'bevel'
+            }
         };
     }
 }
 
+
+export class CentrelineEdgeLayer extends CentrelineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'edge', sourceLayer);
+    }
+
+}
+
+export class CentrelineTrackLayer extends CentrelineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'track', sourceLayer);
+    }
+
+
+}
+
 //==============================================================================
 
-export class PathDashlineLayer extends PathLineLayer
+export class CentrelineNodeFillLayer extends VectorStyleLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'node-fill', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const showNodes = options.showCentrelines || false;
+        const paintStyle = {
+                'fill-color': '#AFA202',
+                'fill-opacity': showNodes ? 0.7 : 0.01
+            }
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'fill',
+            'filter': [
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'node']
+            ],
+            'layout': {
+                'fill-sort-key': ['get', 'scale']
+            },
+            'paint': this.paintStyle(options)
+        };
+    }
+}
+
+export class CentrelineNodeBorderLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, 'node-border', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const showNodes = options.showCentrelines || false;
+        const paintStyle = {
+                'line-color': '#AFA202',
+                'line-opacity': showNodes ? 0.7 : 0.01,
+                'line-width': 0.5
+            }
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': [
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'node']
+            ],
+            'paint':  this.paintStyle(options)
+        };
     }
 }
 
@@ -461,6 +655,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'filter': [
                  'all',
                  ['==', '$type', 'LineString'],
+                 ['!=', 'kind', 'centreline'],
                  ['==', 'type', 'nerve']
             ],
             'paint': {

package/static/flatmap-viewer.css

@@ -202,40 +202,13 @@ li.flatmap-contextmenu-item:hover {
 label[for=path-all-paths] {
     font-weight: bold;
 }
-.nerve-cns {
-    background: #9B1FC1;
-}
-.nerve-lcn {
-    background: #F19E38;
-}
-.nerve-other {
-    background: #888;
-}
-.nerve-para-pre {
-    background: #3F8F4A;
-}
-.nerve-para-post {
-    background: repeating-linear-gradient(to right,#3F8F4A 0,#3F8F4A 6px,transparent 6px,transparent 9px)
-}
-.nerve-sensory {
-    background: #2A62F6;
-}
-.nerve-somatic {
-    background: #98561D;
-}
-.nerve-symp-pre {
-    background: #EA3423;
-}
-.nerve-symp-post {
-    background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
-}
 
 /* Layer control */
 
-#flatmap-layer-control {
+.flatmap-control {
     text-align: right;
 }
-.flatmap-layer-grid {
+.flatmap-control-grid {
     margin-top: 10px;
     display: grid;
     grid-template-columns: 3.8fr 0.2fr;
@@ -250,7 +223,7 @@ label[for=path-all-paths] {
     padding: 4px;
     opacity: 0.8;
 }
-.flatmap-layer-grid input {
+.flatmap-control-grid input {
     height:  1.1em;
 }
 label[for=layer-all-layers] {

package/src/editor.js

@@ -1,198 +0,0 @@
-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));
-    }
-}