@abi-software/flatmap-viewer 2.4.3 → 2.4.4

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.4.3``
+* ``npm install @abi-software/flatmap-viewer@2.4.4``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -26,6 +26,7 @@
     "bezier-js": "^6.1.0",
     "html-es6cape": "^2.0.2",
     "maplibre-gl": ">=3.6.0",
+    "mathjax-full": "^3.2.2",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

package/src/interactions.js

@@ -45,6 +45,7 @@ import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
 import {SystemsControl} from './controls/systems';
 import {TaxonsControl} from './controls/taxons';
+import {latex2Svg} from './mathjax';
 
 import * as utils from './utils';
 
@@ -92,6 +93,31 @@ function expandBounds(bbox1, bbox2, padding)
 
 //==============================================================================
 
+function labelPosition(feature)
+{
+    const polygon = feature.geometry.coordinates;
+    // Rough heuristic. Area is in km^2; below appears to be good enough.
+    const precision = ('area' in feature.properties)
+                        ? Math.sqrt(feature.properties.area)/500000
+                        : 0.1;
+    return polylabel(polygon, precision);
+}
+
+//==============================================================================
+
+function getRenderedLabel(properties)
+{
+    if (!('renderedLabel' in properties)) {
+        const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
+                                               + properties.label.substr(1)).replaceAll("\n", "<br/>")
+                                              : '';
+        properties.renderedLabel = label.replaceAll(/`\$([^\$]*)\$`/g, math => latex2Svg(math.slice(2, -2)));
+    }
+    return properties.renderedLabel;
+}
+
+//==============================================================================
+
 export class UserInteractions
 {
     constructor(flatmap)
@@ -350,9 +376,12 @@ export class UserInteractions
     __featureEnabled(feature)
     //=======================
     {
-        const state = this._map.getFeatureState(feature);
-        return (state !== undefined
-            && (!('hidden' in state) || !state.hidden));
+        if (feature.id) {
+            const state = this._map.getFeatureState(feature);
+            return (state !== undefined
+                && (!('hidden' in state) || !state.hidden));
+        }
+        return false;
     }
 
     featureSelected_(featureId)
@@ -668,7 +697,6 @@ export class UserInteractions
                 tooltips.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
             }
             if ('label' in properties && (!('tooltip' in properties) || properties.tooltip)) {
-                let tooltip = '';
                 const label = properties.label;
                 const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
                 if (!tooltips.includes(cleanLabel)) {
@@ -690,19 +718,18 @@ export class UserInteractions
         if ('warning' in properties) {
             tooltip.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
         }
+        let renderedLabel;
         if (('label' in properties || 'hyperlink' in properties)
                 && (forceLabel || !('tooltip' in properties) || properties.tooltip)) {
-            const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
-                                                   + properties.label.substr(1)).replaceAll("\n", "<br/>")
-                                                  : '';
+            const renderedLabel = getRenderedLabel(properties);
             if ('hyperlink' in properties) {
-                if (label === '') {
+                if (renderedLabel === '') {
                     tooltip.push(`<a href='${properties.hyperlink}'>${properties.hyperlink}</a>`);
                 } else {
-                    tooltip.push(`<a href='${properties.hyperlink}'>${label}</a></div>`);
+                    tooltip.push(`<a href='${properties.hyperlink}'>${renderedLabel}</a></div>`);
                 }
             } else {
-                tooltip.push(label);
+                tooltip.push(renderedLabel);
             }
         }
         return (tooltip.length === 0) ? ''
@@ -1078,13 +1105,7 @@ export class UserInteractions
                 ]
             });
             if (features.length > 0) {
-                const feature = features[0];
-                const polygon = feature.geometry.coordinates;
-                // Rough heuristic. Area is in km^2; below appears to be good enough.
-                const precision = ('area' in feature.properties)
-                                    ? Math.sqrt(feature.properties.area)/500000
-                                    : 0.1;
-                position = polylabel(polygon, precision);
+                position = labelPosition(features[0]);
             }
         }
         this.__markerPositions.set(featureId, position);

package/src/mathjax.js

@@ -0,0 +1,100 @@
+
+/******************************************************************************
+
+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.
+
+******************************************************************************/
+
+/*************************************************************************
+ *
+ *  direct/tex2svg
+ *
+ *  Uses MathJax v3 to convert a TeX string to an SVG string.
+ *
+ * ----------------------------------------------------------------------
+ *
+ *  Copyright (c) 2018 The MathJax Consortium
+ *
+ *  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.
+ */
+
+//==============================================================================
+
+const EM_SIZE = 16;
+const EX_SIZE = 8;
+
+//==============================================================================
+
+//  Load the packages needed for MathJax
+import {mathjax} from 'mathjax-full/js/mathjax';
+import {TeX} from 'mathjax-full/js/input/tex';
+import {SVG} from 'mathjax-full/js/output/svg';
+import {browserAdaptor} from 'mathjax-full/js/adaptors/browserAdaptor';
+import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html';
+import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages';   // required to load `textmacros`
+
+//==============================================================================
+
+//  Minimal CSS needed for stand-alone image
+export const LatexStyleRules = [
+  'svg a{fill:blue;stroke:blue}',
+  // Round the corners of filled background rectangles
+  '[data-mml-node="mstyle"]>rect[data-bgcolor="true"]{rx: 8%; ry: 12%}',
+  '[data-mml-node="merror"]>g{fill:red;stroke:red}',
+  '[data-mml-node="merror"]>rect[data-background]{fill:yellow;stroke:none}',
+  '[data-frame],[data-line]{stroke-width:70px;fill:none}',
+  '.mjx-dashed{stroke-dasharray:140}',
+  '.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}',
+  'use[data-c]{stroke-width:3px}'
+].join('');
+
+//==============================================================================
+
+//  Create DOM adaptor and register it for HTML documents
+const adaptor = browserAdaptor();
+RegisterHTMLHandler(adaptor);
+
+//==============================================================================
+
+const tex = new TeX({packages: AllPackages}); // ['base', 'textmacros']});
+const svg = new SVG({fontCache: 'local'});
+const html = mathjax.document('', {InputJax: tex, OutputJax: svg});
+
+//==============================================================================
+
+export function latex2Svg(latex)
+{
+    const node = html.convert(latex, {
+      display: false,    // process as inline math
+      em: 2*EM_SIZE,
+      ex: 2*EX_SIZE,
+    });
+    let result = adaptor.innerHTML(node);
+    return result.replace(/<defs>/, `<defs><style>${LatexStyleRules}</style>`);
+}
+
+//==============================================================================