From d663915f0e1d6dc6b08b611c96e0888e02df4029 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Tue, 16 Feb 2021 13:36:14 -0500
Subject: [PATCH] Make creature strokes non-scaling. (#6)

This attempts to manually scale the strokes on creatures so they aren't affected by scale.

The weird thing here is that applying `vector-effect="non-scaling-stroke"` does not appear to do the trick--rather, it makes all the strokes look _super heavy_.  So in this PR we scale the stroke by the inverse of whatever we're cumulatively scaling by when we're drawing something.
---
 lib/pages/creature-page.tsx | 11 ++++++++++-
 lib/svg-symbol.tsx          |  9 ++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
index f190b11..e5b8917 100644
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@@ -47,6 +47,7 @@ type AttachmentChildren = JSX.Element | JSX.Element[];
 
 type CreatureContextType = SvgSymbolContext & {
   attachmentScale: number;
+  cumulativeScale: number;
   parent: SvgSymbolData | null;
 };
 
@@ -55,6 +56,7 @@ const DEFAULT_ATTACHMENT_SCALE = 0.5;
 const CreatureContext = React.createContext<CreatureContextType>({
   ...createSvgSymbolContext(),
   attachmentScale: DEFAULT_ATTACHMENT_SCALE,
+  cumulativeScale: 1,
   parent: null,
 });
 
@@ -71,7 +73,14 @@ const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
   const ourSymbol = (
     <>
       {props.children && (
-        <CreatureContext.Provider value={{ ...ctx, parent: data }}>
+        <CreatureContext.Provider
+          value={{
+            ...ctx,
+            parent: data,
+            cumulativeScale: ctx.attachmentScale * ctx.cumulativeScale,
+            strokeScale: 1 / ctx.cumulativeScale,
+          }}
+        >
           {props.children}
         </CreatureContext.Provider>
       )}
diff --git a/lib/svg-symbol.tsx b/lib/svg-symbol.tsx
index bc3513a..c72e818 100644
--- a/lib/svg-symbol.tsx
+++ b/lib/svg-symbol.tsx
@@ -3,6 +3,7 @@ import { SVGProps } from "react";
 import { BBox } from "../vendor/bezier-js";
 import { FILL_REPLACEMENT_COLOR, STROKE_REPLACEMENT_COLOR } from "./colors";
 import { Specs } from "./specs";
+import { float } from "./util";
 import { VisibleSpecs } from "./visible-specs";
 
 export type SvgSymbolData = {
@@ -28,12 +29,14 @@ export type SvgSymbolElement = (
 export type SvgSymbolContext = {
   stroke: string;
   fill: string;
+  strokeScale: number;
   showSpecs: boolean;
 };
 
 const DEFAULT_CONTEXT: SvgSymbolContext = {
   stroke: "#000000",
   fill: "#ffffff",
+  strokeScale: 1,
   showSpecs: false,
 };
 
@@ -64,14 +67,18 @@ function reactifySvgSymbolElement(
   el: SvgSymbolElement,
   key: number
 ): JSX.Element {
-  let { fill, stroke } = el.props;
+  let { fill, stroke, strokeWidth } = el.props;
   fill = getColor(ctx, fill);
   stroke = getColor(ctx, stroke);
+  if (strokeWidth !== undefined) {
+    strokeWidth = float(strokeWidth) * ctx.strokeScale;
+  }
   return React.createElement(
     el.tagName,
     {
       ...el.props,
       id: undefined,
+      strokeWidth,
       fill,
       stroke,
       key,