colors

src/index.tsx

@@ -61,13 +61,19 @@ const appGlobalStyles = (
       },
 
       "svg.adrian": {
-        "& *": {
+        "*": {
           stroke: theme.palette.text.primary,
         },
-        "& text": {
+        text: {
           stroke: "none",
           fill: theme.palette.text.primary,
         },
+        ".measure": {
+          "*": {
+            stroke: theme.palette.primary.main,
+            fill: theme.palette.primary.main,
+          },
+        },
       },
     })}
   />

src/paperBox1/Measure.tsx

@@ -33,10 +33,11 @@ export function Measure({
       transform={` translate(${from[0]}, ${from[1]}) rotate(${
         d.angleXY() / DEG
       }) translate(0, ${offset * 10})`}
-      style={{ stroke: "#aaa" }}
+      className="measure"
     >
       {!hideRight && (
         <path
+          style={{ fill: "none" }}
           d={`M0,0
           l0,10
           M4,3
@@ -45,6 +46,7 @@ export function Measure({
         />
       )}
       <path
+        style={{ fill: "none" }}
         d={`
         M0,5
         H${(length - textBlank) / 2}
@@ -59,7 +61,6 @@ export function Measure({
       <text
         style={{
           stroke: "none",
-          fill: "#aaa",
           fontSize: 4,
           dominantBaseline: "middle",
           textAnchor: "middle",

src/paperBox1/MeasureAngle.tsx

@@ -25,14 +25,14 @@ export function MeasureAngle({
   const largeArcFlag = Math.abs(toRel) > Math.PI ? "1" : "0"
   const sweepFlag = toRel > 0 ? "1" : "0"
   return (
-    <g>
+    <g className="measure">
       <path
+        style={{ fill: "none" }}
         d={`M${startV.x},${startV.y} A${radius},${radius},0,${largeArcFlag},${sweepFlag},${endV.x},${endV.y}`}
       />
       <text
         style={{
           stroke: "none",
-          fill: "#aaa",
           fontSize: 4,
           dominantBaseline: "middle",
           textAnchor: "middle",

src/paperBox1/index.tsx

@@ -1,6 +1,5 @@
 import Lock from "@mui/icons-material/Lock"
 import LockOpen from "@mui/icons-material/LockOpen"
-import Button from "@mui/material/Button"
 import Card from "@mui/material/Card"
 import CardContent from "@mui/material/CardContent"
 import CardMedia from "@mui/material/CardMedia"
@@ -12,14 +11,13 @@ import InputAdornment from "@mui/material/InputAdornment"
 import Link from "@mui/material/Link"
 import { useTheme } from "@mui/material/styles"
 import TextField from "@mui/material/TextField"
-import fileDownload from "js-file-download"
 import * as React from "react"
 import { ReactElement, useCallback, useState } from "react"
-import * as ReactDOMServer from "react-dom/server"
 import { round10, TAU } from "ts3dutils"
 
 import { useHashState } from "../common/useHashState"
 import { PAPER_SIZE_A4, PaperSizeFromDimensions } from "./common"
+import { ExportButtons } from "./ExportButtons"
 import hexPrismBoxJpg from "./hexPrismBox.jpg"
 import { PaperAutocomplete } from "./PaperAutocomplete"
 import { PrismBoxSvg } from "./PrismBoxSvg"
@@ -73,38 +71,6 @@ export default (): ReactElement => {
 
   const theme = useTheme()
 
-  const getPrintSVG = () =>
-    ReactDOMServer.renderToStaticMarkup(
-      <PrismBoxSvg {...state} print={true} />,
-    ).replace(/\s{2,}/g, " ")
-
-  const asSVG = () => {
-    const svg = getPrintSVG()
-    fileDownload(
-      svg,
-      `${width}x${height}-${state.sides}x${state.sideWidth}` +
-        `-${state.topLip}-${state.bottomLip}.svg`,
-    )
-  }
-  const asTemplatePDF = async () => {
-    const { svgToPdf } = await import(
-      /* webpackChunkName: "svgToPdf" */ "./svgToPdf"
-    )
-
-    // add your content to the document here, as usual
-    const blob = await svgToPdf({
-      title: "Paper Box Template",
-      author: "Adrian Leonhard",
-      svg: getPrintSVG(),
-    })
-
-    fileDownload(
-      blob,
-      `${width}x${height}-${state.sides}x${state.sideWidth}` +
-        `-${state.topLip}-${state.bottomLip}.pdf`,
-    )
-  }
-
   return (
     <Grid container style={{ width: "100%" }}>
       <Grid
@@ -277,12 +243,13 @@ export default (): ReactElement => {
           }}
           label="bottomLip"
         />
-        <Button variant="contained" onClick={asSVG}>
-          Download As SVG
-        </Button>
-        <Button variant="contained" onClick={asTemplatePDF}>
-          Template as PDF
-        </Button>
+        <ExportButtons
+          what={<PrismBoxSvg {...state} />}
+          baseFileName={
+            `${width}x${height}-${state.sides}x${state.sideWidth}` +
+            `-${state.topLip}-${state.bottomLip}`
+          }
+        />
       </Grid>
     </Grid>
   )

src/paperBox2/Common.tsx

@@ -36,9 +36,7 @@ export function Common({
     Math.min(-20, radius - paperSize[1]),
   ]
   const print = useContext(SvgPrintContext)
-  const svgViewBox = !print
-    ? [-radius - 10, -radius - 10, radius * 2 + 20, radius * 2 + 20]
-    : paperSize
+  const svgViewBox = paperSize
     ? [paperPosition![0], paperPosition![1], paperSize[0], paperSize[1]]
     : [-radius, -radius, radius * 2, radius * 2]
 

src/paperBox2/InsideFolds.tsx → src/paperBox2/InsideFoldsSvg.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { CSSProperties, ReactElement, useContext } from "react"
-import { ilog, newtonIterate1d, TAU, V, V3 } from "ts3dutils"
+import { newtonIterate1d, TAU, V, V3 } from "ts3dutils"
 
 import {
   dTpl,
@@ -33,7 +33,7 @@ export function lookUpRadius(
   )
 }
 
-export function InsideFolds(props: {
+export function InsideFoldsSvg(props: {
   baseRadius: number
   topRadius: number
   radius: number

src/paperBox2/OutsideFolds.tsx → src/paperBox2/OutsideFoldsSvg.tsx

@@ -13,9 +13,9 @@ import { Measure, SvgPrintContext } from "../paperBox1/Measure"
 import { MeasureAngle } from "../paperBox1/MeasureAngle"
 import { ValleyMountainLegend } from "../paperBox1/ValleyMountainLegend"
 import { Common } from "./Common"
-import { lookUpAngle } from "./InsideFolds"
+import { lookUpAngle } from "./InsideFoldsSvg"
 
-export const OutsideFolds = (props: {
+export const OutsideFoldsSvg = (props: {
   baseRadius: number
   topRadius: number
   radius: number

src/paperBox2/index.tsx

@@ -1,5 +1,4 @@
 import { Alert } from "@mui/material"
-import Button from "@mui/material/Button"
 import Card from "@mui/material/Card"
 import CardContent from "@mui/material/CardContent"
 import CardMedia from "@mui/material/CardMedia"
@@ -10,22 +9,19 @@ import InputLabel from "@mui/material/InputLabel"
 import Link from "@mui/material/Link"
 import MenuItem from "@mui/material/MenuItem"
 import Select from "@mui/material/Select"
+import { useTheme } from "@mui/material/styles"
 import TextField from "@mui/material/TextField"
-import Tooltip from "@mui/material/Tooltip"
-import fileDownload from "js-file-download"
 import * as React from "react"
 import { ReactElement, useCallback, useState } from "react"
-import * as ReactDOMServer from "react-dom/server"
 
 import { useHashState } from "../common/useHashState"
 import { PaperSize } from "../paperBox1/common"
 import { ExportButtons } from "../paperBox1/ExportButtons"
 import { PaperAutocomplete } from "../paperBox1/PaperAutocomplete"
-import { Envelope } from "../paperEnvelope/Envelope"
-import { InsideFolds } from "./InsideFolds"
 import insideFoldsImg from "./insideFolds.jpg"
-import { OutsideFolds } from "./OutsideFolds"
+import { InsideFoldsSvg } from "./InsideFoldsSvg"
 import outsideFoldsLargeTemplateImg from "./outsideFoldsLargeTemplate.jpg"
+import { OutsideFoldsSvg } from "./OutsideFoldsSvg"
 
 export default (): ReactElement => {
   const [state, setState] = useHashState({
@@ -41,11 +37,13 @@ export default (): ReactElement => {
   )
   const [paperSize, setPaperSize] = useState(null as PaperSize | null)
 
-  const BaseDrawing: typeof OutsideFolds = {
-    inside: InsideFolds,
-    outside: OutsideFolds,
+  const BaseDrawing: typeof OutsideFoldsSvg = {
+    inside: InsideFoldsSvg,
+    outside: OutsideFoldsSvg,
   }[state.variant]
 
+  const theme = useTheme()
+
   const topLip = state.radius - state.topRadius
   const topOverlap = topLip - state.baseRadius
 
@@ -55,7 +53,7 @@ export default (): ReactElement => {
         <BaseDrawing
           {...state}
           paperSize={paperSize}
-          style={{ width: "100%", height: "100%" }}
+          style={{ width: "100%", height: "100%", margin: theme.spacing(1) }}
         />
       </Grid>
       <Grid

src/paperEnvelope/Envelope.tsx → src/paperEnvelope/EnvelopeSvg.tsx

@@ -1,15 +1,11 @@
+import { useTheme } from "@mui/material/styles"
 import * as React from "react"
-import {
-  CSSProperties,
-  MutableRefObject,
-  ReactElement,
-  useContext,
-} from "react"
+import { CSSProperties, ReactElement } from "react"
 import { encodeSVGPath, SVGPathData } from "svg-pathdata"
 import { CommandA } from "svg-pathdata/lib/types"
 import { DEG } from "ts3dutils"
 import { INCH, PaperSize } from "../paperBox1/common"
-import { Measure, SvgPrintContext } from "../paperBox1/Measure"
+import { Measure } from "../paperBox1/Measure"
 
 export function EnvelopeDimensions(
   width: number,
@@ -27,7 +23,7 @@ export function EnvelopeDimensions(
   const envelopeWidth = Math.sin(45 * DEG) * (a - d - s) * 2
   return { a, d, r2, h, s, t, envelopeWidth }
 }
-export function Envelope({
+export function EnvelopeSvg({
   paperSize,
   envelopeHeight,
   overlap,
@@ -131,9 +127,9 @@ export function Envelope({
         </clipPath>
       </defs>
       <style>
-        {".valley {stroke-dasharray: 1,1;}"}
-        {".outline {stroke-dasharray: .1,1;}"}
-        {".mountain {stroke-dasharray: 10,2,1,1,1,2;}"}
+        {".valley {stroke-dasharray: 1,1;} "}
+        {".outline {stroke-dasharray: .1,1;} "}
+        {".mountain {stroke-dasharray: 10,2,1,1,1,2;} "}
       </style>
 
       <g clipPath="url(#page)">

src/paperEnvelope/index.tsx

@@ -2,6 +2,7 @@ import Card from "@mui/material/Card"
 import CardMedia from "@mui/material/CardMedia"
 import Divider from "@mui/material/Divider"
 import Grid from "@mui/material/Grid"
+import { useTheme } from "@mui/material/styles"
 import TextField from "@mui/material/TextField"
 import * as React from "react"
 import { ReactElement, useCallback } from "react"
@@ -14,7 +15,7 @@ import {
 } from "../paperBox1/common"
 import { ExportButtons } from "../paperBox1/ExportButtons"
 import { PaperAutocomplete } from "../paperBox1/PaperAutocomplete"
-import { Envelope, EnvelopeDimensions } from "./Envelope"
+import { EnvelopeDimensions, EnvelopeSvg } from "./EnvelopeSvg"
 
 export default (): ReactElement => {
   const [state, setState] = useHashState({
@@ -36,13 +37,19 @@ export default (): ReactElement => {
     state.envelopeHeight,
   )
 
+  const theme = useTheme()
+
   return (
     <Grid container style={{ width: "100%" }}>
       <Grid item xs={12} md={10}>
-        <Envelope
+        <EnvelopeSvg
           {...state}
           paperSize={paperSize}
-          style={{ width: "100%", height: "100%" }}
+          style={{
+            width: "100%",
+            height: "100%",
+            margin: theme.spacing(1),
+          }}
         />
       </Grid>
       <Grid
@@ -113,7 +120,7 @@ export default (): ReactElement => {
         <Divider />
         <ExportButtons
           baseFileName={`envelope-${paperSize[0]}-${state.envelopeHeight}-${state.overlap}`}
-          what={<Envelope {...state} paperSize={paperSize} />}
+          what={<EnvelopeSvg {...state} paperSize={paperSize} />}
         />
       </Grid>
     </Grid>

src/raymarch/EGizmoController.ts

@@ -283,7 +283,7 @@ function infoClosestToLine(
        t = ((a - c)*b*(b*d) - (a - c)*d * (b*b)) / ((d*b)*(b*d) - (d*d) * (b*b))
        */
   if (isParallelToLine(th, line)) {
-    return { t: NaN, s: NaN, distance: th.distanceToLine(line) }
+    return { t: NaN, s: NaN, distance: 10 }
   }
   const a = line.anchor,
     b = line.dir1,

src/spirograph/index.tsx

@@ -3,7 +3,7 @@ import { useTheme } from "@mui/material/styles"
 import * as React from "react"
 import { ReactElement, useEffect, useRef } from "react"
 import { DEG, M4, mod, PI, V, V3 } from "ts3dutils"
-import { lookUpAngle, lookUpRadius } from "../paperBox2/InsideFolds"
+import { lookUpAngle, lookUpRadius } from "../paperBox2/InsideFoldsSvg"
 
 class Circle {
   constructor(public readonly radius: number) {}