Support ppen's ratio attributes in CourseAppearance

perliedman · Aug 31, 2022 · 29b4eb2 · 29b4eb2
1 parent 080add3
commit 29b4eb2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/src/course-feature-style.js b/src/course-feature-style.js
@@ -20,6 +20,7 @@ export default function useStyle(
   layer,
   featuresRef,
   objScale,
+  courseAppearance,
   courseOverPrintColor = courseOverPrintRgb,
   styleWrapper
 ) {
@@ -28,11 +29,12 @@ export default function useStyle(
       courseFeatureStyle(
         featuresRef,
         objScale,
+        courseAppearance,
         courseOverPrintColor,
         feature,
         resolution
       ),
-    [featuresRef, objScale, courseOverPrintColor]
+    [featuresRef, objScale, courseAppearance, courseOverPrintColor]
   );
   useEffect(() => {
     layer.setStyle(
@@ -46,6 +48,7 @@ export default function useStyle(
 export function courseFeatureStyle(
   featuresRef,
   objScale,
+  courseAppearance,
   courseOverPrintColor,
   feature,
   resolution
@@ -55,6 +58,11 @@ export function courseFeatureStyle(
     ? palette[feature.get("color")]
     : courseOverPrintColor;
   let style;
+  const {
+    controlCircleSizeRatio = 1,
+    lineWidthRatio = 1,
+    numberSizeRatio = 1,
+  } = courseAppearance;
 
   // Note: where applicable, always use setRadius *last*, since that is what
   // forces OL to actually update the style of circles.
@@ -63,14 +71,16 @@ export function courseFeatureStyle(
   if (kind === "normal") {
     const image = controlStyle.getImage();
     const stroke = image.getStroke();
-    stroke.setWidth(dimension(overprintLineWidth));
+    stroke.setWidth(dimension(overprintLineWidth * controlCircleSizeRatio));
     stroke.setColor(color);
-    image.setRadius(dimension(controlCircleOutsideDiameter / 2));
+    image.setRadius(
+      dimension(controlCircleOutsideDiameter / 2) * controlCircleSizeRatio
+    );
     style = controlStyle;
   } else if (kind === "start") {
     style = getStartStyle(color);
     const image = style.getImage();
-    image.setScale(dimension(0.05));
+    image.setScale(dimension(0.05 * controlCircleSizeRatio));
 
     const next = featuresRef.current[feature.get("index") + 1];
     if (next) {
@@ -85,20 +95,22 @@ export function courseFeatureStyle(
     finishStyle.forEach((style, i) => {
       const image = style.getImage();
       const stroke = image.getStroke();
-      stroke.setWidth(dimension(overprintLineWidth));
+      stroke.setWidth(dimension(overprintLineWidth) * controlCircleSizeRatio);
       stroke.setColor(color);
-      image.setRadius(dimension(2 + i));
+      image.setRadius(dimension(2 + i) * controlCircleSizeRatio);
     });
     style = finishStyle;
   } else if (kind === "line") {
     const stroke = lineStyle.getStroke();
-    stroke.setWidth(dimension(feature.get("lineWidth") || overprintLineWidth));
+    stroke.setWidth(
+      dimension(feature.get("lineWidth") || overprintLineWidth) * lineWidthRatio
+    );
     stroke.setColor(color);
     style = lineStyle;
   } else if (kind === "number") {
     const text = numberStyle.getText();
     text.setText(feature.get("label"));
-    text.setScale(dimension(0.6));
+    text.setScale(dimension(0.6) * numberSizeRatio);
     style = numberStyle;
   } else if (kind === "white-out") {
     style = whiteOutStyle;

diff --git a/src/models/course-appearance.ts b/src/models/course-appearance.ts
@@ -4,6 +4,9 @@ export function create(options?: CourseAppearance): CourseAppearance {
     scaleSizesCircleGaps: true,
     autoLegGapSize: 0,
     blendPurple: true,
+    controlCircleSizeRatio: 1,
+    lineWidthRatio: 1,
+    numberSizeRatio: 1,
     ...options,
   };
 }
@@ -13,4 +16,7 @@ export interface CourseAppearance {
   scaleSizesCircleGaps: boolean;
   autoLegGapSize: number;
   blendPurple: boolean;
+  controlCircleSizeRatio: number;
+  lineWidthRatio: number;
+  numberSizeRatio: number;
 }
diff --git a/src/services/ppen.js b/src/services/ppen.js
@@ -194,6 +194,14 @@ export function parsePPen(doc) {
       autoLegGapSize:
         Number(courseAppearanceTag.getAttribute("auto-leg-gap-size")) || 0,
       blendPurple: courseAppearanceTag.getAttribute("blend-purple") === "true",
+      controlCircleSizeRatio:
+        Number(courseAppearanceTag.getAttribute("control-circle-size-ratio")) ||
+        1,
+      lineWidthRatio:
+        Number(courseAppearanceTag.getAttribute("line-width-ratio")) || 1,
+
+      numberSizeRatio:
+        Number(courseAppearanceTag.getAttribute("number-size-ratio")) || 1,
     };
   }
 

diff --git a/src/tools/EditControls.js b/src/tools/EditControls.js
@@ -61,12 +61,13 @@ export default function EditControls() {
       return courseFeatureStyle(
         featuresRef,
         f * objScale,
+        courseAppearance,
         selectedOverPrintRgb,
         feature,
         resolution
       );
     },
-    [crs, featuresRef, objScale]
+    [crs, featuresRef, objScale, courseAppearance]
   );
 
   const highlightFeatureRef = useRef();

diff --git a/src/tools/use-other-controls.ts b/src/tools/use-other-controls.ts
@@ -75,6 +75,7 @@ export default function useOtherControls({
         return courseFeatureStyle(
           { current: [] },
           f * objScale,
+          courseAppearance,
           selectedOverPrintRgb,
           feature,
           resolution
@@ -83,7 +84,7 @@ export default function useOtherControls({
         return fallbackStyleFn(feature, resolution);
       }
     },
-    [highlightFeatureRef, f, objScale]
+    [highlightFeatureRef, f, objScale, courseAppearance]
   );
 
   const controlFeaturesRef = useRef(controlFeatures);
@@ -92,6 +93,7 @@ export default function useOtherControls({
     controlsLayer,
     controlFeaturesRef,
     f * objScale,
+    courseAppearance,
     "rgba(182, 44, 152, 0.5)",
     highlighStyleFn
   );