dot sizes, borders now scale correctly to camera zoom. fixes (not really) bug with hooks race conditions

components/canvas/misc.tsx

@@ -0,0 +1,7 @@
+import styled from "styles"
+
+const DotCircle = styled("circle", {
+  transform: "scale(var(--scale))",
+})
+
+export { DotCircle }

components/canvas/page.tsx

@@ -9,10 +9,10 @@ here; and still cheaper than any other pattern I've found.
 */
 
 export default function Page() {
-  const currentPageShapeIds = useSelector((state) => {
-    const { currentPageId, document } = state.data
-    return Object.keys(document.pages[currentPageId].shapes)
-  }, deepCompareArrays)
+  const currentPageShapeIds = useSelector(
+    ({ data }) => Object.keys(data.document.pages[data.currentPageId].shapes),
+    deepCompareArrays
+  )
 
   return (
     <>

components/canvas/shape.tsx

@@ -52,6 +52,12 @@ function Shape({ id }: { id: string }) {
     [id]
   )
 
+  // This is a problem with deleted shapes. The hooks in this component
+  // may sometimes run before the hook in the Page component, which means
+  // a deleted shape will still be pulled here before the page component
+  // detects the change and pulls this component.
+  if (!shape) return null
+
   return (
     <StyledGroup
       ref={rGroup}

lib/shapes/dot.tsx

@@ -4,6 +4,8 @@ import { DotShape, ShapeType } from "types"
 import { createShape } from "./index"
 import { boundsContained } from "utils/bounds"
 import { intersectCircleBounds } from "utils/intersections"
+import styled from "styles"
+import { DotCircle } from "components/canvas/misc"
 
 const dot = createShape<DotShape>({
   boundsCache: new WeakMap([]),
@@ -27,7 +29,7 @@ const dot = createShape<DotShape>({
   },
 
   render({ id }) {
-    return <circle id={id} cx={0} cy={0} r={4} />
+    return <DotCircle id={id} cx={0} cy={0} r={4} />
   },
 
   getBounds(shape) {

lib/shapes/line.tsx

@@ -4,6 +4,7 @@ import { LineShape, ShapeType } from "types"
 import { createShape } from "./index"
 import { boundsContained } from "utils/bounds"
 import { intersectCircleBounds } from "utils/intersections"
+import { DotCircle } from "components/canvas/misc"
 
 const line = createShape<LineShape>({
   boundsCache: new WeakMap([]),
@@ -34,7 +35,7 @@ const line = createShape<LineShape>({
     return (
       <g id={id}>
         <line x1={x1} y1={y1} x2={x2} y2={y2} />
-        <circle cx={0} cy={0} r={4} />
+        <DotCircle cx={0} cy={0} r={4} />
       </g>
     )
   },

lib/shapes/ray.tsx

@@ -5,6 +5,7 @@ import { createShape } from "./index"
 import { boundsContained } from "utils/bounds"
 import { intersectCircleBounds } from "utils/intersections"
 import styled from "styles"
+import { DotCircle } from "components/canvas/misc"
 
 const ray = createShape<RayShape>({
   boundsCache: new WeakMap([]),
@@ -35,7 +36,7 @@ const ray = createShape<RayShape>({
     return (
       <g id={id}>
         <line x1={0} y1={0} x2={x2} y2={y2} />
-        <circle cx={0} cy={0} r={4} />
+        <DotCircle cx={0} cy={0} r={4} />
       </g>
     )
   },

state/state.ts

@@ -452,16 +452,18 @@ const state = createState({
     },
     deleteSelectedIds(data) {
       const { document, currentPageId } = data
-      const shapes = document.pages[currentPageId].shapes
+      const { shapes } = document.pages[currentPageId]
+
+      data.hoveredId = undefined
+      data.pointedId = undefined
 
       data.selectedIds.forEach((id) => {
         delete shapes[id]
         // TODO: recursively delete children
       })
 
+      data.document.pages[currentPageId].shapes = shapes
       data.selectedIds.clear()
-      data.hoveredId = undefined
-      data.pointedId = undefined
     },
 
     /* ---------------------- Misc ---------------------- */

styles/globals.css

@@ -1 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Recursive:wght@500;700&display=swap");
+
+:root {
+  --camera-zoom: 1;
+  --scale: calc(1 / var(--camera-zoom));
+}

styles/stitches.config.ts

@@ -67,6 +67,7 @@ const globalStyles = global({
   "*": { boxSizing: "border-box" },
   ":root": {
     "--camera-zoom": 1,
+    "--scale": "calc(1 / var(--camera-zoom))",
   },
   "html, body": {
     padding: "0px",