added crosshair for chart.js, changed js setBoundsToMarkers()

fotorama_multi.php

@@ -118,7 +118,7 @@ function showmulti($attr, $content = null)
 		'sw_button_color'	=> $fotorama_elevation_options['sw_button_color'] ?? 'white', // swiper button color in CSS name or value
 		'chart_fill_color'		=> $fotorama_elevation_options['chart_fill_color'] ?? 'white',
 		'chart_background_color'=> $fotorama_elevation_options['chart_background_color'] ?? 'gray',
-		'charttype'			=> $fotorama_elevation_options['charttype'] ??  'chartjs',
+		'charttype'			=> $fotorama_elevation_options['charttype'] ??  'ele',
 		'chartjspadding'	=> $fotorama_elevation_options['chartjspadding'] ?? '22',
 		'trackwidth'		=> $fotorama_elevation_options['trackwidth'] ?? '3',
 		'trackcolour'		=> $fotorama_elevation_options['trackcolour'] ?? '#ff0000',
@@ -163,6 +163,11 @@ function showmulti($attr, $content = null)
 
 	$mapcenter = explode(',',$mapcenter);
 
+	// handle old shortcodes
+	if ( $charttype === 'chartjs' && ($eletheme !== "martin-theme" && $eletheme !== "custom-theme") ) {
+		$eletheme = 'martin-theme';
+	}
+
 	// Detect Language of the client request
 	if ( array_key_exists('HTTP_ACCEPT_LANGUAGE', $_SERVER) ) {
 		$lang = substr(\explode(',', $_SERVER['HTTP_ACCEPT_LANGUAGE'])[0], 0, 2); 

js/fotorama-multi-reduced.js

@@ -116,7 +116,7 @@
                     import(/* webpackChunkName: "leaflet_chartjs" */'./leafletChartJs/leafletChartJsClass.js').then( (LeafletChartJs) => {
                         allMaps[m] = new LeafletChartJs.LeafletChartJs(m, 'boxmap' + m );
                         // create the markers on the map
-                        allMaps[m].createFotoramaMarkers( pageVarsForJs[m].imgdata );
+                        allMaps[m].createFotoramaMarkers( pageVarsForJs[m].imgdata, false );
                     })
                 } else {
                     import(/* webpackChunkName: "leaflet_chartjs" */'./leafletChartJs/leafletChartJsClass.js').then( (LeafletChartJs) => {
@@ -159,7 +159,7 @@
         } // end for m maps
 
         // function for map resizing for responsive devices
-        window.addEventListener('load', resizer, false );
+        //window.addEventListener('load', resizer, false );
         //window.addEventListener('resize', resizer, false );
 
         /**
@@ -196,7 +196,7 @@
                     // skip boundary setting for boxmap that doesn't have a map
                     if ( ! isNaN(ratioMap)) {
                         let _group = allMaps[m].getFeatureGroup( allMaps[m].mrk );
-                        allMaps[m].bounds = allMaps[m].setBoundsToMarkers(m, _group);
+                        allMaps[m].bounds = allMaps[m].setBoundsToMarkers(_group);
                     } 
                 }
             }

js/leafletChartJs/chartJsClass.js

@@ -92,8 +92,8 @@ class chartJsClass {
    * @returns {object} An object containing two arrays: data and labels.
    */
   prepareChartData(gpxdata) {
-    const labels = gpxdata.map(point => point[0]);
-    const data = gpxdata.map(point => point[1]);
+    const labels = gpxdata.map(point => point[0]); // performance
+    const data = gpxdata.map(point => point[1]); // performance
     return {
       data,
       labels
@@ -133,13 +133,57 @@ class chartJsClass {
    * 
    */
   drawElevationProfile() {
+    // source for this https://stackoverflow.com/questions/70112637/draw-a-horizontal-and-vertical-line-on-mouse-hover-in-chart-js
+    const plugin = {
+      id: 'crosshair',
+      defaults: {
+          width: 1,
+          color: '#FF4949',
+          dash: [3, 3],
+      },
+      afterInit: (chart, args, opts) => {
+        chart.crosshair = {
+          x: 0,
+          y: 0,
+        }
+      },
+      afterEvent: (chart, args) => {
+        const {inChartArea} = args
+        const {type,x,y} = args.event
+
+        chart.crosshair = {x, y, draw: inChartArea}
+        chart.draw()
+      },
+      beforeDatasetsDraw: (chart, args, opts) => {
+        const {ctx} = chart
+        const {top, bottom, left, right} = chart.chartArea
+        const {x, y, draw} = chart.crosshair
+        if (!draw) return
+
+        ctx.save()
+
+        ctx.beginPath()
+        ctx.lineWidth = opts.width
+        ctx.strokeStyle = opts.color
+        ctx.setLineDash(opts.dash)
+        ctx.moveTo(x, bottom)
+        ctx.lineTo(x, top)
+        ctx.moveTo(left, y)
+        ctx.lineTo(right, y)
+        ctx.stroke()
+
+        ctx.restore()
+      }
+    }
 
     const config = {
       type: 'line',
       data: this.chartData,
 
       plugins: [{
-        beforeInit: (chart) => this.setAxesMinMax(chart)},
+        beforeInit: (chart) => this.setAxesMinMax(chart)
+        },
+        plugin
       ],
 
       options: {
@@ -208,6 +252,9 @@ class chartJsClass {
                 return this.i18n('Altitude') +': ' + tooltipItem[0].parsed.y.toFixed(0) + ' m' ;
               },
             }
+          },
+          crosshair: {
+            color: 'black', // TODO : set color to track colour??
           }
         }
       }
@@ -224,18 +271,18 @@ class chartJsClass {
    * @param {object} chart 
    */
   setAxesMinMax(chart) {
-    let maxHeight = Math.max(...chart.data.datasets[0].data);
-    let minHeight = Math.min(...chart.data.datasets[0].data);
+    let maxHeight = Math.max(...chart.data.datasets[0].data); // performance
+    let minHeight = Math.min(...chart.data.datasets[0].data); // performance
 
     // set the factor for the Altitude difference
     let diff = maxHeight - minHeight;
     let factor = 100;
     if (diff <= 500.0) {factor = 10} else {factor = 100};
 
-    chart.options.scales.x.min = Math.min(...chart.data.labels);
-    chart.options.scales.x.max = Math.max(...chart.data.labels);
-    chart.options.scales.y.max = Math.ceil(maxHeight/factor)*factor; 
-    chart.options.scales.y.min = Math.floor(minHeight/factor)*factor;
+    chart.options.scales.x.min = Math.min(...chart.data.labels); // performance
+    chart.options.scales.x.max = Math.max(...chart.data.labels); // performance
+    chart.options.scales.y.max = Math.ceil(maxHeight/factor)*factor;  // performance
+    chart.options.scales.y.min = Math.floor(minHeight/factor)*factor; // performance
   }
 
   /**

js/leafletChartJs/gpxTrackClass.js

@@ -121,7 +121,7 @@ class gpxTrackClass {
         let index = -1;
 
         //let startTime = performance.now();
-        for (let i = 0; i < n; i++) {
+        for (let i = 0; i < n; i++) { // performance
             let newdist = this.calcCrow(point.lat, point.lng, this.coords[i].lat, this.coords[i].lng);
 
             if (newdist < dist) {

js/leafletChartJs/leafletChartJsClass.js

@@ -121,7 +121,7 @@ class LeafletChartJs extends LeafletMap {
 
       let maxBounds = mapBoundsArray[0]; // Initialize with the first bounds in the array
 
-      for (let i = 1; i < mapBoundsArray.length; i++) {
+      for (let i = 1; i < mapBoundsArray.length; i++) { // performance
         const currentBounds = mapBoundsArray[i];
 
         // Compare the latitude and longitude values to find the maximum bounds

js/leafletMapClass.js

@@ -448,6 +448,7 @@ class LeafletMap {
     /**
      * Create the Leaflet Map Markers for the images of fotorama slider.
      * @param {array} markers
+     * @param {boolean} fit fit the map to the leaflet map markers for the images shown in slider
      */
     createFotoramaMarkers(markers, fit=true) {
         let { marker, j, testgroup } = this.createMarkers(markers);
@@ -562,31 +563,28 @@ class LeafletMap {
 
     /**
      * set new Bounds of Map according to the shown Markers and already predefined bounds.
-     * @param {number} mapNumber number of the current map
      * @param {object} markergroup group of markery as leaflet markergroup
      */
     setBoundsToMarkers( markergroup ) {
-        let _bounds = [];
+        let oldbounds = this.bounds;
+        let newbounds = [];
 
-        if ( (typeof(this.bounds) !== 'undefined') && ('_northEast' in this.bounds) && ('_southWest' in this.bounds) ) {
-            _bounds = this.bounds; // bounds bereits definiert
+        if ( markergroup instanceof L.LayerGroup ) {
+            newbounds = markergroup.getBounds().pad(0.1);
         } else {
-            try {
-                _bounds = markergroup.getBounds().pad(0.1);
-            } catch (e) {
-                // nothing
-            }
+            newbounds = oldbounds;
         }
 
-        if ( (_bounds.length !== 0) && (_bounds instanceof L.LatLngBounds) ) {
-            this.map.fitBounds(_bounds);
+        // fit map to bounds and set zoom level
+        if ( (newbounds.length !== 0) && (newbounds instanceof L.LatLngBounds) ) {
+            this.map.fitBounds(newbounds);
             // set the max zoom level for markers exactly on the same postion
             let curzoom = this.map.getZoom();
             if ( curzoom == this.maxZoomValue ) {
-                this.map.fitBounds(_bounds, {maxZoom : 13});
+                this.map.fitBounds(newbounds, {maxZoom : this.maxZoomValue});
             }
         }
-        return _bounds;
+        return newbounds;
     }
 
     // update marker on click