Allow to change manually the scale and translate attribute of the map

riatelab · Sep 4, 2024 · 2d45bc3 · 2d45bc3
1 parent 9ae68cf
commit 2d45bc3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 7 deletions.
diff --git a/src/components/LeftMenu/LayoutFeatures.tsx b/src/components/LeftMenu/LayoutFeatures.tsx
@@ -38,7 +38,10 @@ import {
   makeDefaultGraticule,
   makeDefaultSphere,
 } from '../../helpers/layers';
-import { Mabs, Msqrt } from '../../helpers/math';
+import {
+  Mabs, Msqrt,
+  parseEnRepresentation, toPrecisionAfterDecimalPoint,
+} from '../../helpers/math';
 import { getTargetSvg } from '../../helpers/svg';
 import {
   addTemporaryPoint,
@@ -76,6 +79,7 @@ import {
   ScaleBarBehavior, ScaleBarStyle,
   ScaleBarMeasureLocation,
 } from '../../global.d';
+import DetailsSummary from '../DetailsSummary.tsx';
 
 const makeDrawingInstructions = (
   LL: Accessor<TranslationFunctions>,
@@ -1062,5 +1066,37 @@ export default function LayoutFeatures(): JSX.Element {
         </button>
       </div>
     </div>
+    <DetailsSummary summaryContent={'Centrage de la carte'} initialOpen={false}>
+      <InputFieldNumber
+        label={'Centrage de la carte (x)'}
+        value={parseEnRepresentation(toPrecisionAfterDecimalPoint(mapStore.translate[0], 2, 'en'))}
+        onChange={(v) => {
+          setMapStore('translate', [v, mapStore.translate[1]]);
+        }}
+        min={-Infinity}
+        max={Infinity}
+        step={1}
+      />
+      <InputFieldNumber
+        label={'Centrage de la carte (y)'}
+        value={parseEnRepresentation(toPrecisionAfterDecimalPoint(mapStore.translate[1], 2, 'en'))}
+        onChange={(v) => {
+          setMapStore('translate', [mapStore.translate[0], v]);
+        }}
+        min={-Infinity}
+        max={Infinity}
+        step={1}
+      />
+      <InputFieldNumber
+        label={'Zoom de la carte'}
+        value={parseEnRepresentation(toPrecisionAfterDecimalPoint(mapStore.scale, 2, 'en'))}
+        onChange={(v) => {
+          setMapStore('scale', v);
+        }}
+        min={-Infinity}
+        max={Infinity}
+        step={1}
+      />
+    </DetailsSummary>
   </div>;
 }
diff --git a/src/helpers/math.ts b/src/helpers/math.ts
@@ -329,8 +329,11 @@ function positionFirstNonZeroDigit(value: number): number {
   return i;
 }
 
-export const formatNum = (n: number, precision: number = 2): string => n
-  .toLocaleString(undefined, { maximumFractionDigits: precision });
+export const formatNum = (
+  n: number,
+  precision: number = 2,
+  locale : string | undefined = undefined,
+): string => n.toLocaleString(locale, { maximumFractionDigits: precision });
 
 /**
  * Returns a string representation of a number with a given precision
@@ -339,22 +342,30 @@ export const formatNum = (n: number, precision: number = 2): string => n
  *
  * @param n
  * @param precision
+ * @param locale
+ * @returns {string}
  */
 export function toPrecisionAfterDecimalPoint(
   n: number | undefined,
   precision: number = 4,
+  locale: string | undefined = undefined,
 ): string {
-  if (!n) return '';
+  if (!n && n !== 0) return '';
   const s = n.toString();
   const numberBeforeDecimalPoint = s.indexOf('.');
   if (numberBeforeDecimalPoint === -1 || Number.isInteger(n)) {
-    return (+n.toFixed(1)).toLocaleString();
+    return (+n.toFixed(1)).toLocaleString(locale);
   }
   // If the number need more than "precision" to be displayed correctly,
   // increment precision as needed.
   const positionFirstNonZero = positionFirstNonZeroDigit(n);
   if (positionFirstNonZero > precision) {
-    return formatNum(n, positionFirstNonZero);
+    return formatNum(n, positionFirstNonZero, locale);
   }
-  return formatNum(n, precision);
+  return formatNum(n, precision, locale);
 }
+
+export const parseEnRepresentation = (s: string): number => {
+  const s1 = s.replace(',', '');
+  return parseFloat(s1);
+};