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

package/src/controls/paths.js

@@ -0,0 +1,143 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023 David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+
+******************************************************************************/
+
+export class PathControl
+{
+    constructor(flatmap, pathTypes)
+    {
+        this._flatmap = flatmap;
+        this._map = undefined;
+        this.__pathTypes = pathTypes;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl';
+        this._container.id = 'flatmap-nerve-key';
+
+        this._legend = document.createElement('div');
+        this._legend.id = 'nerve-key-text';
+        this._legend.className = 'flatmap-nerve-grid';
+
+        const innerHTML = [];
+        innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><div class="nerve-line"></div><input id="path-all-paths" type="checkbox" checked/>`);
+        this.__checkedCount = 0;
+        for (const path of this.__pathTypes) {
+            const checked =  !('enabled' in path) || path.enabled ? 'checked' : '';
+            if (checked != '') {
+                this.__checkedCount += 1;
+            }
+            const colour = path.colour || '#440';
+            const style = path.dashed ? `background: repeating-linear-gradient(to right,${colour} 0,${colour} 6px,transparent 6px,transparent 9px);`
+                                      : `background: ${colour};`;
+
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line" style="${style}"></div><input id="path-${path.type}" type="checkbox" ${checked}/>`);
+        }
+        this._legend.innerHTML = innerHTML.join('\n');
+        this.__halfCount = Math.trunc(this.__pathTypes.length/2);
+
+        this._button = document.createElement('button');
+        this._button.id = 'nerve-key-button';
+        this._button.className = 'control-button text-button';
+        this._button.setAttribute('type', 'button');
+        this._button.setAttribute('aria-label', 'Nerve paths legend');
+        this._button.setAttribute('control-visible', 'false');
+        this._button.textContent = 'PATHS';
+        this._button.title = 'Show/hide neuron paths';
+        this._container.appendChild(this._button);
+
+        this._container.addEventListener('click', this.onClick_.bind(this));
+        return this._container;
+    }
+
+    onRemove()
+    //========
+    {
+        this._container.parentNode.removeChild(this._container);
+        this._map = undefined;
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'nerve-key-button') {
+            if (this._button.getAttribute('control-visible') === 'false') {
+                this._container.appendChild(this._legend);
+                this._button.setAttribute('control-visible', 'true');
+                const allPathsCheckbox = document.getElementById('path-all-paths');
+                allPathsCheckbox.indeterminate = this.__checkedCount < this.__pathTypes.length
+                                              && this.__checkedCount > 0;
+                this._legend.focus();
+            } else {
+                this._legend = this._container.removeChild(this._legend);
+                this._button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'path-all-paths') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = this.__pathTypes.length;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const path of this.__pathTypes) {
+                    const pathCheckbox = document.getElementById(`path-${path.type}`);
+                    if (pathCheckbox) {
+                        pathCheckbox.checked = event.target.checked;
+                        this._flatmap.enablePath(path.type, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('path-')) {
+                const pathType = event.target.id.substring(5);
+                this._flatmap.enablePath(pathType, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allPathsCheckbox = document.getElementById('path-all-paths');
+                if (this.__checkedCount === 0) {
+                    allPathsCheckbox.checked = false;
+                    allPathsCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__pathTypes.length) {
+                    allPathsCheckbox.checked = true;
+                    allPathsCheckbox.indeterminate = false;
+                } else {
+                    allPathsCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================

package/src/controls/systems.js

@@ -31,24 +31,33 @@ export class SystemsControl extends Control
         this.__systems = systems;
     }
 
-    __innerLinesHTML()
-    //================
+    _addControlDetails()
+    //===============
     {
-        const html = [];
+        let lines = 0;
+        let enabled = 0;
         for (const system of this.__systems) {
-            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${system.name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+            const input = this._addControlLine(`${this.__prefix}${system.id}`, system.name, `background: ${system.colour};`);
+            if (system.enabled) {
+                input.checked = true;
+                enabled += 1;
+            }
+            lines += 1;
         }
-        return html;
+        return {
+            enabled: enabled,
+            total: lines
+        };
     }
 
-    __enableAll(enable)
-    //=================
+    _enableAll(enable)
+    //================
     {
         for (const system of this.__systems) {
             const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
             if (checkbox) {
                 checkbox.checked = enable;
-                this.__flatmap.enableSystem(system.name, enable);
+                this.__flatmap.enableSystem(system.id, enable);
             }
         }
     }
@@ -58,7 +67,7 @@ export class SystemsControl extends Control
     {
         for (const system of this.__systems) {
             if (id === system.id) {
-                this.__flatmap.enableSystem(system.name, enable);
+                this.__flatmap.enableSystem(system.id, enable);
             }
         }
     }

package/src/flatmap-viewer.js

@@ -180,10 +180,13 @@ class FlatMap
             if (this._userInteractions === null) {
                 this.setupUserInteractions_();
             } else if (this._initialState === null) {
+                this._map.setMinZoom(3.0);
+                this._map.setMaxBounds(null);
+                this._map.setRenderWorldCopies(true);
                 this._bounds = this._map.getBounds();
-                this._map.setMaxBounds(this._bounds);
-                const sw = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[0]);
-                const ne = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[1]);
+                const bounds = this._bounds.toArray();
+                const sw = maplibregl.MercatorCoordinate.fromLngLat(bounds[0]);
+                const ne = maplibregl.MercatorCoordinate.fromLngLat(bounds[1]);
                 this.__normalised_origin = [sw.x, ne.y];
                 this.__normalised_size = [ne.x - sw.x, sw.y - ne.y];
                 if ('state' in this._options) {
@@ -260,20 +263,6 @@ class FlatMap
         this._map.zoomOut();
     }
 
-    /**
-     * Toggle the visibility of paths on the map.zoomIn
-     *
-     * * If some paths are hidden then all paths are made visible.
-     * * If all paths are visible then they are all hidden.
-     */
-    togglePaths()
-    //===========
-    {
-        if (this._userInteractions !== null) {
-            this._userInteractions.togglePaths();
-        }
-    }
-
     /**
      * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving the path types
      *                                                                  present in the map along with their
@@ -283,7 +272,7 @@ class FlatMap
     //=========
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.pathways.pathTypes();
+            return this._userInteractions.pathManager.pathTypes();
         }
     }
 
@@ -298,7 +287,7 @@ class FlatMap
     //===============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.enablePath(pathType, enable);
+            this._userInteractions.enablePathsByType(pathType, enable);
         }
     }
 
@@ -313,7 +302,7 @@ class FlatMap
     //======================================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.enableSckanPath(sckanState, enable);
+            this._userInteractions.enableSckanPaths(sckanState, enable);
         }
     }
 
@@ -535,7 +524,7 @@ class FlatMap
         }
         if (featureIds.length == 0 && this._userInteractions !== null) {
             // We still haven't found a feature, so check connectivity
-            featureIds.extend(this._userInteractions.pathwaysFeatureIds(anatomicalIds));
+            featureIds.extend(this._userInteractions.pathFeatureIds(anatomicalIds));
         }
         return featureIds;
     }
@@ -819,7 +808,7 @@ class FlatMap
     /**
      * Get a list of a FC flatmap's systems.
      *
-     * @return {Array.Object.<{name: string, colour: string}>}  An array with system details
+     * @return {Array.Object.<{id: string, name: string, colour: string, enabled: boolean}>}  An array with system details
      */
     getSystems()
     //==========
@@ -830,15 +819,15 @@ class FlatMap
     }
 
     /**
-     * @param {string}  systemName  The name of the system to enable
+     * @param {string}  systemId  The identifier of the system to enable
      * @param {boolean}  enable  Show or hide the system. Defaults to ``true`` (show)
      *
      */
-    enableSystem(systemName, enable=true)
+    enableSystem(systemId, enable=true)
     //===================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.enableSystem(systemName, enable);
+            return this._userInteractions.enableSystem(systemId, enable);
         }
     }