@abi-software/flatmap-viewer 2.7.2 → 2.7.3-a.1

package/src/controls/minimap.js

@@ -1,442 +0,0 @@
-/******************************************************************************
-
-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.
-
-******************************************************************************/
-
-/* Based on https://github.com/aesqe/maplibre-minimap
- *
- * MIT License
- *
- * Copyright (c) 2019 Bruno Babic
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-//==============================================================================
-
-import maplibregl from 'maplibre-gl';
-
-//==============================================================================
-
-const DEFAULTS = {
-    fillColor: '#DDD',
-    fillOpacity: 0.3,
-    lineColor: "#08F",
-    lineOpacity: 1,
-    lineWidth: 1,
-    position: 'bottom-left',
-    width: 320
-};
-
-//==============================================================================
-
-// if parent map zoom >= 18 and minimap zoom >= 14, set minimap zoom to 16
-
-const ZOOMLEVELS = [
-    [18, 14, 16],
-    [16, 12, 14],
-    [14, 10, 12],
-    [12,  8, 10],
-    [10,  6,  8]
-];
-
-//==============================================================================
-
-export class MinimapControl
-{
-    constructor(flatmap, options)
-    {
-        this._flatmap = flatmap;
-        this._map = undefined;
-        this._container = null;
-
-        // In case parent map background is changed before minimap loads
-
-        this._background = null;
-        this._opacity = null;
-        this._loaded = false;
-
-        // Check user configurable settings
-
-        this._options = Object.assign({}, DEFAULTS);
-        if (typeof options === 'object') {
-            if ('position' in options) {
-                this._options.position = options.position;
-            }
-            if ('width' in options) {
-                this._options.width = options.width;
-            }
-        }
-
-        this._ticking = false;
-        this._lastMouseMoveEvent = null;
-        this._isDragging = false;
-        this._isCursorOverFeature = false;
-        this._previousPoint = [0, 0];
-        this._currentPoint = [0, 0];
-        this._trackingRectCoordinates = [[[], [], [], [], []]];
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return this._options.position;
-    }
-
-    onAdd(map)
-    //========
-    {
-        this._map = map;
-
-        // Create the container element
-
-        const container = document.createElement('div');
-        container.className = 'maplibregl-ctrl-minimap maplibregl-ctrl';
-        container.id = 'maplibre-minimap';
-        this._container = container;
-
-        // Set the size of the container
-
-        const mapCanvasElement = map.getCanvas();
-        let width = DEFAULTS.width;
-        if (typeof this._options.width === 'string') {
-            width = parseInt(this._options.width);
-            if (this._options.width.includes('%')) {
-                width = width*mapCanvasElement.width/100;
-            }
-        } else if (typeof this._options.width === 'number') {
-            width = this._options.width;
-        }
-        container.setAttribute('style', `width: ${width}px; height: ${width*mapCanvasElement.height/mapCanvasElement.width}px;`);
-
-        // Ignore context menu events
-
-        container.addEventListener('contextmenu', this._preventDefault);
-
-        // Create the actual minimap
-
-        this._miniMap = new maplibregl.Map({
-            attributionControl: false,
-            container: container,
-            style: map.getStyle(),
-            bounds: map.getBounds()
-        });
-
-        return this._container;
-    }
-
-    onRemove()
-    //========
-    {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
-        this._container = null;
-    }
-
-    initialise()
-    //==========
-    {
-        const opts = this._options;
-        const parentMap = this._map;
-        const miniMap = this._miniMap;
-
-        // Disable most user interactions with the minimap
-
-        const interactions = [
-            'dragPan', 'scrollZoom', 'boxZoom', 'dragRotate',
-            'keyboard', 'doubleClickZoom', 'touchZoomRotate'
-        ];
-        interactions.forEach(i => miniMap[i].disable());
-
-        // Set background if specified (default is the parent map's)
-
-        if (this._background !== null) {
-            miniMap.setPaintProperty('background', 'background-color', this._background);
-        }
-        if (this._opacity !== null) {
-            miniMap.setPaintProperty('background', 'background-opacity', this._opacity);
-        }
-
-        // Fit minimap to its container
-
-        miniMap.resize();
-        miniMap.fitBounds(this._flatmap.bounds);
-
-        const bounds = miniMap.getBounds();
-        this.convertBoundsToPoints_(bounds);
-
-        miniMap.addSource('trackingRect', {
-            'type': 'geojson',
-            'data': {
-                'type': 'Feature',
-                'properties': {
-                    'name': 'trackingRect'
-                },
-                'geometry': {
-                    'type': 'Polygon',
-                    'coordinates': this._trackingRectCoordinates
-                }
-            }
-        });
-
-        miniMap.addLayer({
-            'id': 'trackingRectOutline',
-            'type': 'line',
-            'source': 'trackingRect',
-            'layout': {},
-            'paint': {
-                'line-color': opts.lineColor,
-                'line-width': opts.lineWidth,
-                'line-opacity': opts.lineOpacity
-            }
-        });
-
-        // needed for dragging
-        miniMap.addLayer({
-            'id': 'trackingRectFill',
-            'type': 'fill',
-            'source': 'trackingRect',
-            'layout': {},
-            'paint': {
-                'fill-color': opts.fillColor,
-                'fill-opacity': opts.fillOpacity
-            }
-        });
-
-        this._trackingRect = this._miniMap.getSource('trackingRect');
-
-        this.update_();
-
-        parentMap.on('move', this.update_.bind(this));
-
-        miniMap.on('mousemove', this.mouseMove_.bind(this));
-        miniMap.on('mousedown', this.mouseDown_.bind(this));
-        miniMap.on('mouseup', this.mouseUp_.bind(this));
-
-        miniMap.on('touchmove', this.mouseMove_.bind(this));
-        miniMap.on('touchstart', this.mouseDown_.bind(this));
-        miniMap.on('touchend', this.mouseUp_.bind(this));
-
-        this._miniMapCanvas = miniMap.getCanvasContainer();
-        this._miniMapCanvas.addEventListener('wheel', this.preventDefault_);
-        this._miniMapCanvas.addEventListener('mousewheel', this.preventDefault_);
-    }
-
-    mouseDown_(e)
-    //===========
-    {
-        if (this._isCursorOverFeature) {
-            this._isDragging = true;
-            this._previousPoint = this._currentPoint;
-            this._currentPoint = [e.lngLat.lng, e.lngLat.lat];
-        }
-    }
-
-    mouseMove_(e)
-    //===========
-    {
-        this._ticking = false;
-
-        const miniMap = this._miniMap;
-        const features = miniMap.queryRenderedFeatures(e.point, {
-            layers: ['trackingRectFill']
-        });
-
-        // don't update if we're still hovering the area
-        if (!(this._isCursorOverFeature && features.length > 0)) {
-            this._isCursorOverFeature = features.length > 0;
-            this._miniMapCanvas.style.cursor = this._isCursorOverFeature ? 'move' : '';
-        }
-
-        if (this._isDragging) {
-            this._previousPoint = this._currentPoint;
-            this._currentPoint = [e.lngLat.lng, e.lngLat.lat];
-
-            const offset = [
-                this._previousPoint[0] - this._currentPoint[0],
-                this._previousPoint[1] - this._currentPoint[1]
-            ];
-
-            const newBounds = this.moveTrackingRect_(offset);
-
-            this._map.fitBounds(newBounds, {
-                duration: 80,
-                noMoveStart: true
-            });
-        }
-    }
-
-    mouseUp_()
-    //========
-    {
-        this._isDragging = false;
-        this._ticking = false;
-    }
-
-    moveTrackingRect_(offset)
-    //=======================
-    {
-        const source = this._trackingRect;
-        const data = source._data;
-        const bounds = data.properties.bounds;
-
-        bounds._ne.lat -= offset[1];
-        bounds._ne.lng -= offset[0];
-        bounds._sw.lat -= offset[1];
-        bounds._sw.lng -= offset[0];
-
-        this.convertBoundsToPoints_(bounds);
-        source.setData(data);
-
-        return bounds;
-    }
-
-    setTrackingRectBounds_(bounds)
-    //============================
-    {
-        const source = this._trackingRect;
-        const data = source._data;
-
-        data.properties.bounds = bounds;
-        this.convertBoundsToPoints_(bounds);
-        source.setData(data);
-    }
-
-    convertBoundsToPoints_(bounds)
-    //============================
-    {
-        const ne = bounds._ne;
-        const sw = bounds._sw;
-        const trc = this._trackingRectCoordinates;
-
-        trc[0][0][0] = ne.lng;
-        trc[0][0][1] = ne.lat;
-        trc[0][1][0] = sw.lng;
-        trc[0][1][1] = ne.lat;
-        trc[0][2][0] = sw.lng;
-        trc[0][2][1] = sw.lat;
-        trc[0][3][0] = ne.lng;
-        trc[0][3][1] = sw.lat;
-        trc[0][4][0] = ne.lng;
-        trc[0][4][1] = ne.lat;
-    }
-
-    update_(e)
-    //========
-    {
-        if (this._isDragging) {
-            return;
-        }
-
-        const parentBounds = this._map.getBounds();
-        this.setTrackingRectBounds_(parentBounds);
-
-        this.zoomAdjust_();
-    }
-
-    zoomAdjust_()
-    //===========
-    {
-        const miniMap = this._miniMap;
-        const parentMap = this._map;
-        const miniZoom = parseInt(miniMap.getZoom(), 10);
-        const parentZoom = parseInt(parentMap.getZoom(), 10);
-        let found = false;
-
-        ZOOMLEVELS.forEach(function(zoom) {
-            if (!found && parentZoom >= zoom[0]) {
-                if (miniZoom >= zoom[1]) {
-                    miniMap.setZoom(zoom[2]);
-                }
-
-                miniMap.setCenter(parentMap.getCenter());
-                found = true;
-            }
-        });
-    }
-
-    preventDefault_(e)
-    //================
-    {
-        e.preventDefault();
-    }
-
-    /**
-     * Sets the minimap's background colour.
-     *
-     * @param      {string}  colour  The colour
-     */
-    setBackgroundColour(colour)
-    //=========================
-    {
-        if (this._loaded) {
-            this._miniMap.setPaintProperty('background', 'background-color', colour);
-        } else {
-            this._background = colour;
-        }
-    }
-
-    /**
-     * Sets the minimap's background opacity.
-     *
-     * @param      {number}  opacity  The opacity
-     */
-    setBackgroundOpacity(opacity)
-    //===========================
-    {
-        if (this._loaded) {
-            this._miniMap.setPaintProperty('background', 'background-opacity', opacity);
-        } else {
-            this._opacity = opacity;
-        }
-    }
-
-    /**
-     * Show and hide the minimap.
-     *
-     * @param {boolean}  showMinimap  Set false to hide minimap
-     */
-    show(showMinimap)
-    //===============
-    {
-        if (this._container) {
-            if (showMinimap) {
-                this._container.style.display = "block";
-                this.update_();
-            } else {
-                this._container.style.display = "none";
-            }
-        }
-    }
-}

package/src/controls/paths.js

@@ -1,143 +0,0 @@
-/******************************************************************************
-
-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/search.js

@@ -1,113 +0,0 @@
-/******************************************************************************
-
-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 SearchControl
-{
-    constructor(flatmap)
-    {
-        this.__flatmap = flatmap;
-    }
-
-    onAdd(map)
-    //========
-    {
-        this._map = map;
-        this._container = document.createElement('div');
-        this._container.className = 'maplibregl-ctrl search-control';
-
-        this._input = document.createElement('input');
-        this._input.id = 'search-control-input';
-        this._input.setAttribute('type', 'search');
-        this._input.setAttribute('visible', 'false');
-        this._input.setAttribute('placeholder', 'Search...');
-
-        this._button = document.createElement('button');
-        this._button.id = 'search-control-button';
-        this._button.className = 'control-button';
-        this._button.title = 'Search flatmap';
-        this._button.setAttribute('type', 'button');
-        this._button.setAttribute('aria-label', 'Search flatmap');
-        // https://iconmonstr.com/magnifier-6-svg/
-        this._button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="search-control-icon" viewBox="0 0 24 24">
-    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z"/>
-</svg>`;
-        this._container.appendChild(this._button);
-
-        this._container.onclick = this.onClick_.bind(this);
-        return this._container;
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return 'top-right';
-    }
-
-    onRemove()
-    //========
-    {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
-    }
-
-    searchMap_(search=true)
-    //=====================
-    {
-        this._input = this._container.removeChild(this._input);
-        this._input.setAttribute('visible', 'false');
-        const text = this._input.value;
-        if (search && text !== '') {
-            const results = this.__flatmap.search(text);
-            this.__flatmap.showSearchResults(results);
-        }
-    }
-
-    onKeyDown_(e)
-    //===========
-    {
-        if (e.key === 'Enter') {
-            this.searchMap_();
-        } else if (e.key === 'Escape') {
-            this.searchMap_(false);
-        }
-    }
-
-    onClick_(e)
-    //=========
-    {
-        const targetId = ('rangeTarget' in e) ? e.rangeTarget.id : e.target.id; // FF has rangeTarget
-        if (['search-control-button', 'search-control-icon'].includes(targetId)) {
-            if (this._input.getAttribute('visible') === 'false') {
-                this._container.appendChild(this._input);
-                this._container.appendChild(this._button);
-                this._input.setAttribute('visible', 'true');
-                this._input.onkeydown = this.onKeyDown_.bind(this);
-                this._input.value = '';
-                this.__flatmap.clearSearchResults();
-                this._input.focus();
-            } else {
-                this.searchMap_();
-            }
-        }
-    }
-}
-
-//==============================================================================