From e2805ab6d2922712960e3061281baf408cb37361 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sat, 15 May 2021 22:04:28 +0100
Subject: [PATCH] dot sizes, borders now scale correctly to camera zoom. fixes
 (not really) bug with hooks race conditions

---
 components/canvas/misc.tsx  | 7 +++++++
 components/canvas/page.tsx  | 8 ++++----
 components/canvas/shape.tsx | 6 ++++++
 lib/shapes/dot.tsx          | 4 +++-
 lib/shapes/line.tsx         | 3 ++-
 lib/shapes/ray.tsx          | 3 ++-
 state/state.ts              | 8 +++++---
 styles/globals.css          | 5 +++++
 styles/stitches.config.ts   | 1 +
 9 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 components/canvas/misc.tsx

diff --git a/components/canvas/misc.tsx b/components/canvas/misc.tsx
new file mode 100644
index 000000000..542562f74
--- /dev/null
+++ b/components/canvas/misc.tsx
@@ -0,0 +1,7 @@
+import styled from "styles"
+
+const DotCircle = styled("circle", {
+  transform: "scale(var(--scale))",
+})
+
+export { DotCircle }
diff --git a/components/canvas/page.tsx b/components/canvas/page.tsx
index 0122a1209..1e26c76bd 100644
--- a/components/canvas/page.tsx
+++ b/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 (
     <>
diff --git a/components/canvas/shape.tsx b/components/canvas/shape.tsx
index cc7088958..764d55f1d 100644
--- a/components/canvas/shape.tsx
+++ b/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}
diff --git a/lib/shapes/dot.tsx b/lib/shapes/dot.tsx
index a34b4023a..ca91aedc3 100644
--- a/lib/shapes/dot.tsx
+++ b/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) {
diff --git a/lib/shapes/line.tsx b/lib/shapes/line.tsx
index ee8946b0f..eba483bd4 100644
--- a/lib/shapes/line.tsx
+++ b/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>
     )
   },
diff --git a/lib/shapes/ray.tsx b/lib/shapes/ray.tsx
index 607459ab5..b0ffc51d5 100644
--- a/lib/shapes/ray.tsx
+++ b/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>
     )
   },
diff --git a/state/state.ts b/state/state.ts
index 38e0bd6da..2c8b79a5b 100644
--- a/state/state.ts
+++ b/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 ---------------------- */
diff --git a/styles/globals.css b/styles/globals.css
index 97c0a4aa0..35b6bbb58 100644
--- a/styles/globals.css
+++ b/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));
+}
diff --git a/styles/stitches.config.ts b/styles/stitches.config.ts
index 0f570db2a..978457de2 100644
--- a/styles/stitches.config.ts
+++ b/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",