Sort out some weirdness regarding scaling and render order

perliedman · Aug 30, 2022 · 080add3 · 080add3
1 parent 398de0e
commit 080add3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/src/CourseLayer.js b/src/CourseLayer.js
@@ -110,15 +110,15 @@ export default function CourseLayer({ eventName, course, courseAppearance }) {
   const { layer: controlsLayer, source: controlsSource } = useVector(
     map,
     controlFeatures,
-    vectorLayerOptions
+    controlLayerOptions
   );
   useEffect(() => {
     setControlsSource(controlsSource);
   }, [controlsSource, setControlsSource]);
   const { layer: objectsLayer } = useVector(
     map,
     objectFeatures,
-    vectorLayerOptions
+    objectLayerOptions
   );
   // Paper millimeters to world meters factor
   const f = mapScale / 1000;
@@ -132,10 +132,17 @@ function getMap({ map, mapFile, clipLayer, setControlsSource, projections }) {
   return { map, mapFile, clipLayer, setControlsSource, projections };
 }
 
-const vectorLayerOptions = {
+const objectLayerOptions = {
   layerOptions: {
     zIndex: 1,
     updateWhileAnimating: true,
     updateWhileInteracting: true,
   },
 };
+const controlLayerOptions = {
+  layerOptions: {
+    zIndex: 2,
+    updateWhileAnimating: true,
+    updateWhileInteracting: true,
+  },
+};
diff --git a/src/services/coordinates.js b/src/services/coordinates.js
@@ -49,10 +49,9 @@ export const fromProjectedCoord = (crs, coordinate) => {
 export function getObjectScale(scaleSizes, mapScale, printScale) {
   switch (scaleSizes) {
     case "None":
-      return 1;
+      return printScale / mapScale;
     case "RelativeToMap":
-      // TODO: Don't know what 2 does here, but otherwise sizes do not match.
-      return (printScale / mapScale) * 2;
+      return 1;
     case "RelativeTo15000":
       return 15000 / mapScale;
     default:

diff --git a/src/services/create-svg.js b/src/services/create-svg.js
@@ -17,6 +17,7 @@ import { createSpecialObjects } from "./use-special-objects";
 import { add, mul, rotate } from "../models/coordinate";
 import fetchSymbolSvg from "./fetch-symbol-svg";
 import { createSvgNode, getSvgDimensions } from "./svg-utils";
+import { getObjectScale } from "./coordinates";
 
 export const circle = ([cx, cy], r, stroke, scale) => ({
   type: "circle",
@@ -50,10 +51,11 @@ export async function courseToSvg(
   document
 ) {
   const controls = course.controls;
-  const objScale =
-    getObjectScale(courseAppearance.scaleSizes, mapScale, course.printScale) *
-    // TODO: can't explain why this is correct, but gives ok result (?)
-    (7500 / course.printScale);
+  const objScale = getObjectScale(
+    courseAppearance.scaleSizes,
+    mapScale,
+    course.printScale
+  );
 
   const controlConnections = createControlConnections(
     controls,
@@ -69,13 +71,13 @@ export async function courseToSvg(
   return createSvgNode(document, {
     type: "g",
     children: [
+      ...(await specialObjectsToSvg()),
       ...controlsToSvg(),
       ...controlConnectionsToSvg(controlConnections),
       ...controlNumbersToSvg(
         courseObjectsGeoJSON(controlConnections, specialObjects),
         course.labelKind
       ),
-      ...(await specialObjectsToSvg()),
     ],
   });
 
@@ -468,16 +470,3 @@ function text(
     text,
   };
 }
-
-function getObjectScale(scaleSizes, mapScale, printScale) {
-  switch (scaleSizes) {
-    case "None":
-      return printScale / mapScale;
-    case "RelativeToMap":
-      return 1;
-    case "RelativeTo15000":
-      return 15000 / mapScale;
-    default:
-      throw new Error(`Unknown scaleSizes mode "${scaleSizes}".`);
-  }
-}