Improves hovers, adds CSS variable for zoom

components/canvas/shapes/circle.tsx

@@ -1,6 +1,6 @@
 import { CircleShape, ShapeProps } from "types"
 import { Indicator, HoverIndicator } from "./indicator"
-import ShapeGroup from "./shape-g"
+import ShapeGroup from "./shape-group"
 
 function BaseCircle({
   radius,
@@ -10,16 +10,16 @@ function BaseCircle({
 }: ShapeProps<CircleShape>) {
   return (
     <>
-      <HoverIndicator as="circle" cx={radius} cy={radius} r={radius - 1} />
+      <HoverIndicator as="circle" cx={radius} cy={radius} r={radius} />
       <circle
         cx={radius}
         cy={radius}
-        r={radius - strokeWidth / 2}
+        r={radius}
         fill={fill}
         stroke={stroke}
         strokeWidth={strokeWidth}
       />
-      <Indicator as="circle" cx={radius} cy={radius} r={radius - 1} />
+      <Indicator as="circle" cx={radius} cy={radius} r={radius} />
     </>
   )
 }

components/canvas/shapes/dot.tsx

@@ -1,31 +1,26 @@
 import { Indicator, HoverIndicator } from "./indicator"
 import { DotShape, ShapeProps } from "types"
-import ShapeGroup from "./shape-g"
+import ShapeGroup from "./shape-group"
 
 const dotRadius = 4
 
 function BaseDot({
   fill = "#999",
   stroke = "none",
-  strokeWidth = 1,
+  strokeWidth = 0,
 }: ShapeProps<DotShape>) {
   return (
     <>
-      <HoverIndicator
-        as="circle"
-        cx={dotRadius}
-        cy={dotRadius}
-        r={dotRadius - 1}
-      />
+      <HoverIndicator as="circle" cx={dotRadius} cy={dotRadius} r={dotRadius} />
       <circle
         cx={dotRadius}
         cy={dotRadius}
-        r={dotRadius - strokeWidth / 2}
+        r={dotRadius}
         fill={fill}
         stroke={stroke}
         strokeWidth={strokeWidth}
       />
-      <Indicator as="circle" cx={dotRadius} cy={dotRadius} r={dotRadius - 1} />
+      <Indicator as="circle" cx={dotRadius} cy={dotRadius} r={dotRadius} />
     </>
   )
 }

components/canvas/shapes/indicator.tsx

@@ -3,7 +3,7 @@ import styled from "styles"
 const Indicator = styled("path", {
   fill: "none",
   stroke: "transparent",
-  strokeWidth: "2",
+  strokeWidth: "max(1, calc(2 / var(--camera-zoom)))",
   pointerEvents: "none",
   strokeLineCap: "round",
   strokeLinejoin: "round",
@@ -12,7 +12,7 @@ const Indicator = styled("path", {
 const HoverIndicator = styled("path", {
   fill: "none",
   stroke: "transparent",
-  strokeWidth: "8",
+  strokeWidth: "max(1, calc(8 / var(--camera-zoom)))",
   pointerEvents: "all",
   strokeLinecap: "round",
   strokeLinejoin: "round",

components/canvas/shapes/polyline.tsx

@@ -1,6 +1,6 @@
 import { PolylineShape, ShapeProps } from "types"
 import { Indicator, HoverIndicator } from "./indicator"
-import ShapeGroup from "./shape-g"
+import ShapeGroup from "./shape-group"
 
 function BasePolyline({
   points,

components/canvas/shapes/rectangle.tsx

@@ -1,6 +1,6 @@
 import { RectangleShape, ShapeProps } from "types"
 import { HoverIndicator, Indicator } from "./indicator"
-import ShapeGroup from "./shape-g"
+import ShapeGroup from "./shape-group"
 
 function BaseRectangle({
   size,
@@ -10,29 +10,15 @@ function BaseRectangle({
 }: ShapeProps<RectangleShape>) {
   return (
     <>
-      <HoverIndicator
-        as="rect"
-        x={1}
-        y={1}
-        width={size[0] - 2}
-        height={size[1] - 2}
-      />
+      <HoverIndicator as="rect" width={size[0]} height={size[1]} />
       <rect
-        x={strokeWidth / 2}
-        y={strokeWidth / 2}
-        width={size[0] - strokeWidth}
-        height={size[1] - strokeWidth}
+        width={size[0]}
+        height={size[1]}
         fill={fill}
         stroke={stroke}
         strokeWidth={strokeWidth}
       />
-      <Indicator
-        as="rect"
-        x={1}
-        y={1}
-        width={size[0] - 2}
-        height={size[1] - 2}
-      />
+      <Indicator as="rect" width={size[0]} height={size[1]} />
     </>
   )
 }

state/state.ts

@@ -113,6 +113,11 @@ const state = createState({
       )
       const p1 = screenToWorld(payload.point, data)
       camera.point = vec.add(camera.point, vec.sub(p1, p0))
+
+      document.documentElement.style.setProperty(
+        "--camera-zoom",
+        camera.zoom.toString()
+      )
     },
     panCamera(data, payload: { delta: number[]; point: number[] }) {
       const { camera } = data

styles/stitches.config.ts

@@ -41,6 +41,9 @@ const dark = theme({})
 
 const globalStyles = global({
   "*": { boxSizing: "border-box" },
+  ":root": {
+    "--camera-zoom": 1,
+  },
   "html, body": {
     padding: "0px",
     margin: "0px",