Propagate new naming convention

osm-americana · Oct 3, 2023 · 8978a4d · 8978a4d
1 parent e41b151
commit 8978a4d
Show file tree

Hide file tree

Showing 7 changed files with 533 additions and 64 deletions.
diff --git a/shieldlib/README.md b/shieldlib/README.md
@@ -127,8 +127,8 @@ You should create one definition entry for each network. The entry key must matc
     "drawFunc": "pentagon",
     "params": {
       "pointUp": false,
-      "offset": 5,
-      "angle": 0,
+      "yOffset": 5,
+      "sideAngle": 0,
       "fillColor": "white",
       "strokeColor": "black",
       "radius1": 2,
@@ -299,9 +299,9 @@ If `shapeBlank` is specified, the shield will be drawn as a shape. This needs to
 
 The following `params` options can be specified:
 
-- `angle` - indicates angle (in degrees) at which side edges deviate from vertical. Applies to `trapezoid`, `pentagon`, `hexagonHorizontal`, `octagonVertical`.
+- `sideAngle` - indicates angle (in degrees) at which side edges deviate from vertical. Applies to `trapezoid`, `pentagon`, `hexagonHorizontal`, `octagonVertical`.
 - `fill` - specifies the internal fill color.
-- `offset` - indicates height (in pixels) at which the bottom and/or top edges deviate from horizontal. Applies to `escutcheon`, `pentagon`, `hexagonVertical`, `octagonVertical`.
+- `yOffset` - indicates height (in pixels) at which the bottom and/or top edges deviate from horizontal. Applies to `escutcheon`, `pentagon`, `hexagonVertical`, `octagonVertical`.
 - `outline` - specifies the outline color.
 - `outlineWidth` - specifies the width of the outline.
 - `pointUp` - applies to several shape types and specifies whether the pointy side is up.

diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts
@@ -3,7 +3,7 @@ import { StyleImage } from "maplibre-gl";
 import rgba from "color-rgba";
 
 const defaultFontFamily = '"sans-serif-condensed", "Arial Narrow", sans-serif';
-export const shieldFont = (size: string, fontFamily: string) =>
+export const shieldFont = (size: number, fontFamily: string) =>
   `bold ${size}px ${fontFamily || defaultFontFamily}`;
 export const fontSizeThreshold = 12;
 

diff --git a/shieldlib/src/shield_canvas_draw.ts b/shieldlib/src/shield_canvas_draw.ts
@@ -24,8 +24,8 @@ export function computeWidth(
   }
 
   let rectWidth = params.rectWidth == undefined ? null : params.rectWidth;
-  let angle = params.sideAngle == undefined ? 0 : params.sideAngle;
-  let tangent = Math.tan(angle);
+  let sideAngle = params.sideAngle == undefined ? 0 : params.sideAngle;
+  let tangent = Math.tan(sideAngle);
 
   if (rectWidth == null) {
     let shieldWidth =
@@ -36,8 +36,8 @@ export function computeWidth(
     //Shape-specific width adjustments
     switch (shape) {
       case "pentagon":
-        let offset = params.yOffset == undefined ? 0 : params.yOffset;
-        shieldWidth += ((r.shieldSize() - r.px(offset)) * tangent) / 2;
+        let yOffset = params.yOffset == undefined ? 0 : params.yOffset;
+        shieldWidth += ((r.shieldSize() - r.px(yOffset)) * tangent) / 2;
         break;
       case "trapezoid":
         shieldWidth += (r.shieldSize() * tangent) / 2;
@@ -164,7 +164,7 @@ function escutcheon(
   params: ShapeBlankParams,
   ref: string
 ) {
-  let offset = params.yOffset == undefined ? 0 : params.yOffset;
+  let yOffset = params.yOffset == undefined ? 0 : params.yOffset;
   let fill = params.fillColor == undefined ? "white" : params.fillColor;
   let outline = params.strokeColor == undefined ? "black" : params.strokeColor;
   let radius = params.radius == undefined ? 0 : params.radius;
@@ -175,7 +175,7 @@ function escutcheon(
   let lineThick = r.px(outlineWidth);
   let lineWidth = lineThick / 2;
   let drawRadius = r.px(radius);
-  let drawOffset = r.px(offset);
+  let drawOffset = r.px(yOffset);
 
   let x0 = lineWidth;
   let x5 = width - lineWidth;
@@ -346,16 +346,16 @@ function trapezoid(
 ) {
   let shortSideUp =
     params.shortSideUp == undefined ? false : params.shortSideUp;
-  let angle = params.sideAngle == undefined ? 0 : params.sideAngle;
+  let sideAngle = params.sideAngle == undefined ? 0 : params.sideAngle;
   let fill = params.fillColor == undefined ? "white" : params.fillColor;
   let outline = params.strokeColor == undefined ? "black" : params.strokeColor;
   let radius = params.radius == undefined ? 0 : params.radius;
   let outlineWidth = params.outlineWidth == undefined ? 1 : params.outlineWidth;
   let angleSign = shortSideUp ? -1 : 1;
 
-  let sine = Math.sin(angle);
-  let cosine = Math.cos(angle);
-  let tangent = Math.tan(angle);
+  let sine = Math.sin(sideAngle);
+  let cosine = Math.cos(sideAngle);
+  let tangent = Math.tan(sideAngle);
 
   let width = computeWidth(r, params, ref, "trapezoid");
 
@@ -476,26 +476,26 @@ function pentagon(
   ref: string
 ) {
   let pointUp = params.pointUp == undefined ? true : params.pointUp;
-  let offset = params.yOffset == undefined ? 0 : params.yOffset;
-  let angle = params.sideAngle == undefined ? 0 : params.sideAngle;
+  let yOffset = params.yOffset == undefined ? 0 : params.yOffset;
+  let sideAngle = params.sideAngle == undefined ? 0 : params.sideAngle;
   let fill = params.fillColor == undefined ? "white" : params.fillColor;
   let outline = params.strokeColor == undefined ? "black" : params.strokeColor;
   let radius1 = params.radius1 == undefined ? 0 : params.radius1;
   let radius2 = params.radius2 == undefined ? 0 : params.radius2;
   let outlineWidth = params.outlineWidth == undefined ? 1 : params.outlineWidth;
 
   let angleSign = pointUp ? -1 : 1;
-  let sine = Math.sin(angle);
-  let cosine = Math.cos(angle);
-  let tangent = Math.tan(angle);
+  let sine = Math.sin(sideAngle);
+  let cosine = Math.cos(sideAngle);
+  let tangent = Math.tan(sideAngle);
 
   let width = computeWidth(r, params, ref, "pentagon");
 
   let lineThick = r.px(outlineWidth);
   let lineWidth = lineThick / 2;
   let drawRadius1 = r.px(radius1);
   let drawRadius2 = r.px(radius2);
-  let drawOffset = r.px(offset);
+  let drawOffset = r.px(yOffset);
 
   let x0 = lineWidth;
   let x8 = width - lineWidth;
@@ -510,10 +510,10 @@ function pentagon(
 
   let offsetAngle = Math.atan(drawOffset / (x4 - x0));
 
-  let halfComplementAngle1 = (Math.PI / 2 - offsetAngle + angle) / 2;
+  let halfComplementAngle1 = (Math.PI / 2 - offsetAngle + sideAngle) / 2;
   let halfComplementTangent1 = Math.tan(halfComplementAngle1);
 
-  let halfComplementAngle2 = (Math.PI / 2 - angle) / 2;
+  let halfComplementAngle2 = (Math.PI / 2 - sideAngle) / 2;
   let halfComplementTangent2 = Math.tan(halfComplementAngle2);
 
   let x1 = x0 + drawRadius1 * halfComplementTangent1 * sine;
@@ -548,7 +548,7 @@ function hexagonVertical(
   params: ShapeBlankParams,
   ref: string
 ) {
-  let offset = params.yOffset == undefined ? 0 : params.yOffset;
+  let yOffset = params.yOffset == undefined ? 0 : params.yOffset;
   let fill = params.fillColor == undefined ? "white" : params.fillColor;
   let outline = params.strokeColor == undefined ? "black" : params.strokeColor;
   let radius = params.radius == undefined ? 0 : params.radius;
@@ -559,7 +559,7 @@ function hexagonVertical(
   let lineThick = r.px(outlineWidth);
   let lineWidth = lineThick / 2;
   let drawRadius = r.px(radius);
-  let drawOffset = r.px(offset);
+  let drawOffset = r.px(yOffset);
 
   let x0 = lineWidth;
   let x2 = width - lineWidth;
@@ -668,23 +668,23 @@ function octagonVertical(
   params: ShapeBlankParams,
   ref: string
 ) {
-  let offset = params.yOffset == undefined ? 0 : params.yOffset;
-  let angle = params.sideAngle == undefined ? 0 : params.sideAngle;
+  let yOffset = params.yOffset == undefined ? 0 : params.yOffset;
+  let sideAngle = params.sideAngle == undefined ? 0 : params.sideAngle;
   let fill = params.fillColor == undefined ? "white" : params.fillColor;
   let outline = params.strokeColor == undefined ? "black" : params.strokeColor;
   let radius = params.radius == undefined ? 0 : params.radius;
   let outlineWidth = params.outlineWidth == undefined ? 1 : params.outlineWidth;
 
-  let sine = Math.sin(angle);
-  let cosine = Math.cos(angle);
-  let tangent = Math.tan(angle);
+  let sine = Math.sin(sideAngle);
+  let cosine = Math.cos(sideAngle);
+  let tangent = Math.tan(sideAngle);
 
   let width = computeWidth(r, params, ref);
 
   let lineThick = r.px(outlineWidth);
   let lineWidth = lineThick / 2;
   let drawRadius = r.px(radius);
-  let drawOffset = r.px(offset);
+  let drawOffset = r.px(yOffset);
 
   let x0 = lineWidth;
   let x10 = width - lineWidth;
@@ -707,13 +707,15 @@ function octagonVertical(
   let offsetSine = Math.sin(offsetAngle);
   let offsetCosine = Math.cos(offsetAngle);
 
-  let halfComplementAngle = (Math.PI / 2 - angle - offsetAngle) / 2;
+  let halfComplementAngle = (Math.PI / 2 - sideAngle - offsetAngle) / 2;
   let halfComplementCosine = Math.cos(halfComplementAngle);
 
   let dx =
-    (drawRadius * Math.cos(angle + halfComplementAngle)) / halfComplementCosine;
+    (drawRadius * Math.cos(sideAngle + halfComplementAngle)) /
+    halfComplementCosine;
   let dy =
-    (drawRadius * Math.sin(angle + halfComplementAngle)) / halfComplementCosine;
+    (drawRadius * Math.sin(sideAngle + halfComplementAngle)) /
+    halfComplementCosine;
 
   let x2 = x3 + dx - drawRadius * cosine;
   let x4 = x3 + dx - drawRadius * offsetSine;

diff --git a/shieldlib/src/shield_helper.d.ts b/shieldlib/src/shield_helper.d.ts
@@ -24,7 +24,7 @@ export declare function roundedRectShield(
 ): ShieldDefinition;
 
 export declare function escutcheonDownShield(
-  offset: number,
+  yOffset: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
@@ -48,16 +48,16 @@ export declare function triangleDownShield(
 ): ShieldDefinition;
 
 export declare function trapezoidDownShield(
-  angle: number,
+  sideAngle: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
   radius: number,
   rectWidth: number
-);
+): ShieldDefinition;
 
 export declare function trapezoidUpShield(
-  angle: number,
+  sideAngle: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
@@ -74,8 +74,8 @@ export declare function diamondShield(
 ): ShieldDefinition;
 
 export declare function pentagonUpShield(
-  offset: number,
-  angle: number,
+  yOffset: number,
+  sideAngle: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
@@ -85,7 +85,7 @@ export declare function pentagonUpShield(
 ): ShieldDefinition;
 
 export declare function homePlateDownShield(
-  offset: number,
+  yOffset: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
@@ -95,7 +95,7 @@ export declare function homePlateDownShield(
 ): ShieldDefinition;
 
 export declare function homePlateUpShield(
-  offset: number,
+  yOffset: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
@@ -105,27 +105,16 @@ export declare function homePlateUpShield(
 ): ShieldDefinition;
 
 export declare function hexagonVerticalShield(
-  offset: number,
+  yOffset: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
   radius: number,
   rectWidth: number
 ): ShieldDefinition;
 
-/**
- * Draws a shield with a horizontally-aligned hexagon background
- *
- * @param {*} angle - Angle (in degrees) at which sides deviate from vertical
- * @param {*} fillColor - Color of hexagon background fill
- * @param {*} strokeColor - Color of hexagon outline stroke
- * @param {*} textColor - Color of text (defaults to strokeColor)
- * @param {*} radius - Corner radius of hexagon (defaults to 2)
- * @param {*} rectWidth - Width of hexagon (defaults to variable-width)
- * @returns a shield definition object
- */
 export declare function hexagonHorizontalShield(
-  angle: number,
+  sideAngle: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
@@ -134,8 +123,8 @@ export declare function hexagonHorizontalShield(
 ): ShieldDefinition;
 
 export declare function octagonVerticalShield(
-  offset: number,
-  angle: number,
+  yOffset: number,
+  sideAngle: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,

diff --git a/shieldlib/src/shield_helper.ts b/shieldlib/src/shield_helper.ts
@@ -568,7 +568,7 @@ export function hexagonVerticalShield(
 /**
  * Draws a shield with a horizontally-aligned hexagon background
  *
- * @param {*} angle - Angle (in degrees) at which sides deviate from vertical
+ * @param {*} sideAngle - Angle (in degrees) at which sides deviate from vertical
  * @param {*} fillColor - Color of hexagon background fill
  * @param {*} strokeColor - Color of hexagon outline stroke
  * @param {*} textColor - Color of text (defaults to strokeColor)
@@ -577,14 +577,14 @@ export function hexagonVerticalShield(
  * @returns a shield definition object
  */
 export function hexagonHorizontalShield(
-  angle: number,
+  sideAngle: number,
   fillColor: string,
   strokeColor: string,
   textColor: string,
   radius: number,
   rectWidth: number
 ): ShieldDefinition {
-  let angleInRadians = (angle * Math.PI) / 180;
+  let angleInRadians = (sideAngle * Math.PI) / 180;
   textColor = textColor ?? strokeColor;
   radius = radius ?? 2;
   return {