@abi-software/flatmap-viewer 2.3.0-b.1 → 2.3.1-b.1

package/src/styling.js

@@ -33,6 +33,7 @@ import {PATH_STYLE_RULES} from './pathways.js';
 const COLOUR_ACTIVE    = 'blue';
 const COLOUR_ANNOTATED = '#0F0';
 const COLOUR_SELECTED  = '#0F0';
+const COLOUR_HIDDEN    = '#D8D8D8';
 
 const CENTRELINE_ACTIVE = '#444';
 const CENTRELINE_COLOUR = '#CCC';
@@ -141,13 +142,14 @@ export class FeatureFillLayer extends VectorStyleLayer
             'fill-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
                 'case',
-                ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                ['boolean', ['feature-state', 'hidden'], false], 0.1,
                 ['boolean', ['feature-state', 'selected'], false], 0.7,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
@@ -193,6 +195,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const dimmed = 'dimmed' in options && options.dimmed;
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
+        lineColour.push(['boolean', ['feature-state', 'hidden'], false]);
+        lineColour.push(COLOUR_HIDDEN);
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
         lineColour.push(FEATURE_SELECTED_BORDER);
         if (coloured && outlined) {
@@ -296,6 +300,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['has', 'colour'], ['get', 'colour'],
@@ -304,6 +309,7 @@ export class FeatureLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['has', 'colour'], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
@@ -358,6 +364,38 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 //==============================================================================
 
+function sckanFilter(options)
+{
+    const sckanState = !'sckan' in options ? 'all'
+                     : options.sckan.toLowerCase();
+    const sckanFilter =
+        sckanState == 'none' ? [
+            ['!has', 'sckan']
+        ] :
+        sckanState == 'valid' ? [[
+            'any',
+            ['!has', 'sckan'],
+            [
+                'all',
+                ['has', 'sckan'],
+                ['==', 'sckan', true]
+            ]
+        ]] :
+        sckanState == 'invalid' ? [[
+            'any',
+            ['!has', 'sckan'],
+            [
+                'all',
+                ['has', 'sckan'],
+                ['!=', 'sckan', true]
+            ]
+        ]] :
+        [ ];
+    return sckanFilter;
+}
+
+//==============================================================================
+
 export class AnnotatedPathLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer)
@@ -365,6 +403,15 @@ export class AnnotatedPathLayer extends VectorStyleLayer
         super(id, 'annotated-path', sourceLayer);
     }
 
+    makeFilter(options={})
+    {
+        return [
+            'all',
+            ['==', '$type', 'LineString'],
+            ...sckanFilter(options)
+        ];
+    }
+
     paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
@@ -404,7 +451,7 @@ export class AnnotatedPathLayer extends VectorStyleLayer
         return {
             ...super.style(),
             'type': 'line',
-            'filter': ['==', '$type', 'LineString'],
+            'filter': this.makeFilter(options),
             'paint': this.paintStyle(options),
             'layout': {
                 'line-cap': 'square'
@@ -427,31 +474,7 @@ export class PathLineLayer extends VectorStyleLayer
 
     makeFilter(options={})
     {
-        const sckanState = !'sckan' in options ? 'all'
-                         : options.sckan.toLowerCase();
-        const sckan_filter =
-            sckanState == 'none' ? [
-                ['!has', 'sckan']
-            ] :
-            sckanState == 'valid' ? [[
-                'any',
-                ['!has', 'sckan'],
-                [
-                    'all',
-                    ['has', 'sckan'],
-                    ['==', 'sckan', true]
-                ]
-            ]] :
-            sckanState == 'invalid' ? [[
-                'any',
-                ['!has', 'sckan'],
-                [
-                    'all',
-                    ['has', 'sckan'],
-                    ['!=', 'sckan', true]
-                ]
-            ]] :
-            [ ];
+        const sckan_filter = sckanFilter(options);
 
         return this.__dashed ? [
             'all',
@@ -480,7 +503,7 @@ export class PathLineLayer extends VectorStyleLayer
             'line-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], '#CCC',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
@@ -488,7 +511,7 @@ export class PathLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
-                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
                     ['==', ['get', 'kind'], 'error'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
@@ -504,7 +527,7 @@ export class PathLineLayer extends VectorStyleLayer
                         ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
-                        ['boolean', ['feature-state', 'selected'], false], 0.6,
+                        ['boolean', ['feature-state', 'selected'], false], 2.0,
                         ['boolean', ['feature-state', 'active'], false], 0.9,
                     0.6
                     ],
@@ -726,7 +749,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'paint': {
                 'line-color': [
                     'case',
-                    ['boolean', ['feature-state', 'hidden'], false], '#CCC',
+                    ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                     ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
                     '#888'

package/src/systems.js

@@ -16,61 +16,84 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-******************************************************************************/
-
-
-import { Control } from './controls';
-
+**/
 //==============================================================================
 
 export class SystemsManager
 {
-    constructor()
-    {
-
-    }
-}
-
-//==============================================================================
-
-export class SystemsControl extends Control
-{
-    constructor(flatmap, systems)
+    constructor(flatmap, ui, enabled=true)
     {
-        super(flatmap, 'system', 'systems');
-        this.__systems = systems;
+        this.__ui = ui;
+        this.__systems = new Map();
+        this.__enabledChildren = new Map();
+        for (const [id, ann] of flatmap.annotations) {
+            if (ann['fc-class'] === 'fc-class:System') {
+                if (this.__systems.has(ann.name)) {
+                    this.__systems.get(ann.name).featureIds.push(ann.featureId)
+                } else {
+                    this.__systems.set(ann.name, {
+                        id: ann.name.replaceAll(' ', '_'),
+                        colour: ann.colour,
+                        featureIds: [ ann.featureId ],
+                        enabled: enabled,
+                        pathIds: ('path-ids' in ann) ? ann['path-ids'] : []
+                    });
+                }
+                for (const childId of ann['children']) {
+                    if (enabled) {
+                        const enabledCount = (this.__enabledChildren.has(childId))
+                                           ? this.__enabledChildren.get(childId)
+                                           : 0;
+                        this.__enabledChildren.set(childId, enabledCount + 1);
+                    } else {
+                        this.__enabledChildren.set(childId, 0);
+                    }
+                }
+            }
+        }
     }
 
-    __innerLinesHTML()
-    //================
+    get systems()
+    //===========
     {
-        const html = [];
+        const systems = [];
         for (const [name, system] of this.__systems.entries()) {
-            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+            systems.push({
+                name: name,
+                id: system.id,
+                colour: system.colour,
+                enabled: system.enabled
+            });
         }
-        return html;
+        return systems;
     }
 
-    __enableAll(enable)
-    //=================
+    enable(systemName, enable=true)
+    //=============================
     {
-        for (const [name, system] of this.__systems.entries()) {
-            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
-            if (checkbox) {
-                checkbox.checked = enable;
-                this.__flatmap.enableSystem(name, enable);
+        const system = this.__systems.get(systemName);
+        if (system !== undefined && enable !== system.enabled) {
+            for (const featureId of system.featureIds) {
+                const feature = this.__ui.mapFeature(featureId);
+                if (feature !== undefined) {
+                    this.__ui.enableFeature(feature, enable);
+                    for (const childFeatureId of feature.children) {
+                        const enabledCount = this.__enabledChildren.get(childFeatureId);
+                        if (enable && enabledCount === 0 || !enable && enabledCount == 1) {
+                            this.__ui.enableFeatureWithChildren(childFeatureId, enable);
+                        }
+                        this.__enabledChildren.set(childFeatureId, enabledCount + (enable ? 1 : -1));
+                    }
+                }
             }
-        }
-    }
+            system.enabled = enable;
 
-    __enableControl(id, enable)
-    //=========================
-    {
-        for (const [name, system] of this.__systems.entries()) {
-            if (id === system.id) {
-                this.__flatmap.enableSystem(name, enable);
+            // Enable/disable all paths associated with the system
+            for (const pathId of system.pathIds) {
+                this.__ui.enableFeature(this.__ui.mapFeature(pathId), enable);
             }
         }
     }
-
 }
+
+//==============================================================================

package/static/css/flatmap-viewer.css

@@ -342,6 +342,18 @@ label[for=layer-all-layers] {
     background-color: #BBB;
 }
 
+#annotation-feature-selection
+{
+    display: flex;
+}
+
+#annotation-feature-buttons
+{
+    float: right;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
 .jsPanel-title {
     font-size: 1.4em !important;
     font-weight: bold !important;

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));
-    }
-}