print sizing

Author: martinheidegger

src/components/docs/CardDisplay.tsx

@@ -19,7 +19,7 @@ export function CardDisplay({ json, link, docKey }: DocDisplayProps<CardType>) {
             }
             const frontSvg = front.current.outerHTML
             const backSvg = back.current.outerHTML
-            const name = `bc_${docKey}`
+            const name = `bc_${docKey}${isCut ? '_cut' : ''}`
             await writeFile(dir, `${name}_front.svg`, encode(frontSvg))
             await writeFile(dir, `${name}_back.svg`, encode(backSvg))
             alert('Done.')

src/components/docs/CardSvg.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from "react";
+import type { CSSProperties, ReactNode, Ref } from "react";
 import type { DocDisplayProps } from "@/components/docs/DocsDisplay";
 
 export const CARD_WIDTH = 910
@@ -17,10 +17,15 @@ export type CardSvgProps = {
     ref?: Ref<SVGSVGElement>
 }
 export function CardSvg ({ isCut, children, background, ref }: CardSvgProps) {
-    const viewBox = isCut
-        ? `0 0 ${CARD_WIDTH} ${CARD_HEIGHT}`
-        : `${-PADDING} ${-PADDING} ${CARD_WIDTH + PADDING*2} ${CARD_HEIGHT + PADDING*2}`
-    return <svg xmlns="http://www.w3.org/2000/svg" className="business-card" ref={ref} viewBox={viewBox} width={isCut ? CARD_WIDTH / 2 : (CARD_WIDTH + PADDING*2)/2}>
+    const padding = isCut ? 0 : PADDING
+    const width = CARD_WIDTH + padding * 2
+    const height = CARD_HEIGHT + padding * 2
+    const viewBox = `${-padding} ${-padding} ${width} ${height}`
+    const style: CSSProperties = {
+        width: `${width / 100}cm`,
+        height: `${height / 100}cm`,
+    }
+    return <svg xmlns="http://www.w3.org/2000/svg" className="business-card" ref={ref} viewBox={viewBox} width={width / 2} style={style}>
         <rect x={-PADDING} y={-PADDING} width={CARD_WIDTH + PADDING * 2} height={CARD_HEIGHT + PADDING * 2} fill={background} />
         {children}
     </svg>