Analyser legend position is added in user settings

Author: demvlad

index.html

@@ -2989,6 +2989,29 @@ <h4 class="modal-title">Advanced User Settings</h4>
                                                 <p>%</p>
                                             </td>
                                         </tr>
+                                        <tr>
+                                            <td>
+                                                <label>Legend</label>
+                                            </td>
+                                            <td class="position">
+                                                <label>Top</label>
+                                                <input name="analyser-legend-top" type="number" step="1" min="0"
+                                                    max="100" />
+                                                <p>%</p>
+                                            </td>
+                                            <td class="position">
+                                                <label>Left</label>
+                                                <input name="analyser-legend-left" type="number" step="1" min="0"
+                                                    max="100" />
+                                                <p>%</p>
+                                            </td>
+                                            <td class="position">
+                                                <label>Width</label>
+                                                <input name="analyser-legend-width" type="number" step="1" min="0"
+                                                    max="100" />
+                                                <p>%</p>
+                                            </td>
+                                        </tr>
                                     </table>
                                 </div>
                             </div>

src/graph_spectrum_plot.js

@@ -432,11 +432,11 @@ GraphSpectrumPlot._drawPowerSpectralDensityGraph = function (canvasCtx) {
 
 GraphSpectrumPlot._drawLegend = function (canvasCtx, WIDTH, HEIGHT, importedCurves) {
   const spectrumCount =  importedCurves.length,
-    legendPosX = WIDTH - 180,
-    legendPosY = 50,
+    legendPosX = parseInt(userSettings.analyser_legend.left) / 100 * WIDTH,
+    legendPosY = parseInt(userSettings.analyser_legend.top) / 100 * HEIGHT,
     rowHeight = 16,
     padding = 4,
-    legendWidth = 150 + padding,
+    legendWidth = parseInt(userSettings.analyser_legend.width) / 100 * WIDTH,
     legendHeight = spectrumCount * rowHeight + 3 * padding,
     legendArea = new Path2D();
 

src/user_settings_dialog.js

@@ -231,6 +231,11 @@ export function UserSettingsDialog(dialog, onLoad, onSave) {
       top: "60%", // position from top (as a percentage of height)
       size: "35%", // size (as a percentage of width)
     },
+    analyser_legend: {
+      left: "88%", // position from left (as a percentage of width)
+      top: "7%", // position from top (as a percentage of height)
+      width: "10%", // legend width
+    },
     map: {
       left: "2%", // position from left (as a percentage of width)
       top: "5%", // position from top (as a percentage of height)
@@ -301,6 +306,11 @@ export function UserSettingsDialog(dialog, onLoad, onSave) {
         left: `${$('.analyser-settings input[name="analyser-left"]').val()}%`,
         size: `${$('.analyser-settings input[name="analyser-size"]').val()}%`,
       },
+      analyser_legend: {
+        top: `${$('.analyser-settings input[name="analyser-legend-top"]').val()}%`,
+        left: `${$('.analyser-settings input[name="analyser-legend-left"]').val()}%`,
+        width: `${$('.analyser-settings input[name="analyser-legend-width"]').val()}%`,
+      },
       map: {
         top: `${$('.map-settings input[name="map-top"]').val()}%`,
         left: `${$('.map-settings input[name="map-left"]').val()}%`,
@@ -649,6 +659,16 @@ export function UserSettingsDialog(dialog, onLoad, onSave) {
     $('.analyser-settings input[name="analyser-size"]').val(
       parseInt(currentSettings.analyser.size)
     );
+
+    $('.analyser-settings input[name="analyser-legend-top"]').val(
+      parseInt(currentSettings.analyser_legend.top)
+    );
+    $('.analyser-settings input[name="analyser-legend-left"]').val(
+      parseInt(currentSettings.analyser_legend.left)
+    );
+    $('.analyser-settings input[name="analyser-legend-width"]').val(
+      parseInt(currentSettings.analyser_legend.width)
+    );
     $('.map-settings input[name="map-top"]').val(
       parseInt(currentSettings.map.top)
     );