Fixes code save

components/canvas/bounds.tsx

@@ -137,7 +137,6 @@ function Corner({
           rCorner.current.setPointerCapture(e.pointerId)
           state.send("POINTED_BOUNDS_CORNER", inputs.pointerDown(e, corner))
         }}
-        onPointerCancelCapture={() => console.log("oops")}
         onPointerUp={(e) => {
           e.stopPropagation()
           rCorner.current.releasePointerCapture(e.pointerId)

components/code-panel/code-panel.tsx

@@ -30,10 +30,11 @@ const getErrorLineAndColumn = (e: any) => {
 
 export default function CodePanel() {
   const rContainer = useRef<HTMLDivElement>(null)
-
-  const fileId = "file0"
   const isReadOnly = useSelector((s) => s.data.isReadOnly)
-  const file = useSelector((s) => s.data.document.code[fileId])
+  const fileId = useSelector((s) => s.data.currentCodeFileId)
+  const file = useSelector(
+    (s) => s.data.document.code[s.data.currentCodeFileId]
+  )
   const isOpen = true
   const fontSize = useSelector((s) => s.data.settings.fontSize)
 
@@ -52,7 +53,7 @@ export default function CodePanel() {
         on: {
           RAN_CODE: "runCode",
           SAVED_CODE: ["runCode", "saveCode"],
-          CHANGED_CODE: [{ secretlyDo: "setCode" }],
+          CHANGED_CODE: { secretlyDo: "setCode" },
           CLEARED_ERROR: { if: "hasError", do: "clearError" },
           TOGGLED_DOCS: { to: "viewingDocs" },
         },
@@ -89,7 +90,8 @@ export default function CodePanel() {
         data.error = error
       },
       saveCode(data) {
-        state.send("CHANGED_CODE", { fileId, code: data.code })
+        const { code } = data
+        state.send("SAVED_CODE", { code })
       },
       clearError(data) {
         data.error = null

components/editor.tsx

@@ -14,7 +14,7 @@ export default function Editor() {
       <Canvas />
       <StatusBar />
       <Toolbar />
-      {/* <CodePanel /> */}
+      <CodePanel />
     </>
   )
 }

lib/code/generate.ts

@@ -3,12 +3,23 @@ import Circle from "./circle"
 import Ellipse from "./ellipse"
 import Polyline from "./polyline"
 import Dot from "./dot"
+import Ray from "./ray"
 import Line from "./line"
 import Vector from "./vector"
 import Utils from "./utils"
 import { codeShapes } from "./index"
 
-const scope = { Dot, Circle, Ellipse, Line, Polyline, Rectangle, Vector, Utils }
+const scope = {
+  Dot,
+  Circle,
+  Ellipse,
+  Ray,
+  Line,
+  Polyline,
+  Rectangle,
+  Vector,
+  Utils,
+}
 
 /**
  * Evaluate code, collecting generated shapes in the shape set. Return the

lib/code/ray.ts

@@ -0,0 +1,25 @@
+import CodeShape from "./index"
+import { v4 as uuid } from "uuid"
+import { RayShape, ShapeType } from "types"
+
+export default class Ray extends CodeShape<RayShape> {
+  constructor(props = {} as Partial<RayShape>) {
+    super({
+      id: uuid(),
+      type: ShapeType.Ray,
+      isGenerated: false,
+      name: "Ray",
+      parentId: "page0",
+      childIndex: 0,
+      point: [0, 0],
+      direction: [0, 1],
+      rotation: 0,
+      style: {
+        fill: "#777",
+        stroke: "#000",
+        strokeWidth: 1,
+      },
+      ...props,
+    })
+  }
+}

lib/code/vector.ts

@@ -274,16 +274,12 @@ export default class Vector {
 
   lrp(b: Vector, t: number) {
     const n = new Vector(this)
-    this.vec(b)
-      .mul(t)
-      .add(n)
+    this.vec(b).mul(t).add(n)
   }
 
   static lrp(a: Vector, b: Vector, t: number) {
     const n = new Vector(a)
-    n.vec(b)
-      .mul(t)
-      .add(a)
+    n.vec(b).mul(t).add(a)
     return n
   }
 
@@ -390,6 +386,14 @@ export default class Vector {
     return n.div(n.len())
   }
 
+  normalize() {
+    return this.uni()
+  }
+
+  static normalize(v: Vector) {
+    return Vector.uni(v)
+  }
+
   isLeft(center: Vector, b: Vector) {
     return (
       (center.x - this.x) * (b.y - this.y) - (b.x - this.x) * (center.y - b.y)

state/history.ts

@@ -106,12 +106,12 @@ class History extends BaseHistory<Data> {
     const cameraInfo = localStorage.getItem("code_slate_camera")
 
     if (cameraInfo !== null) {
-      Object.assign(data.camera, JSON.parse(cameraInfo))
+      Object.assign(restoredData.camera, JSON.parse(cameraInfo))
 
       // And update the CSS property
       document.documentElement.style.setProperty(
         "--camera-zoom",
-        data.camera.zoom.toString()
+        restoredData.camera.zoom.toString()
       )
     }
 

state/state.ts

@@ -31,6 +31,7 @@ const initialData: Data = {
   hoveredId: null,
   selectedIds: new Set([]),
   currentPageId: "page0",
+  currentCodeFileId: "file0",
   document: defaultDocument,
 }
 
@@ -68,6 +69,7 @@ const state = createState({
         REDO: { do: "redo" },
         CANCELLED: { do: "clearSelectedIds" },
         DELETED: { do: "deleteSelectedIds" },
+        SAVED_CODE: "saveCode",
         GENERATED_SHAPES_FROM_CODE: "setGeneratedShapes",
         INCREASED_CODE_FONT_SIZE: "increaseCodeFontSize",
         DECREASED_CODE_FONT_SIZE: "decreaseCodeFontSize",
@@ -502,6 +504,11 @@ const state = createState({
     },
 
     // Data
+    saveCode(data, payload: { code: string }) {
+      data.document.code[data.currentCodeFileId].code = payload.code
+      history.save(data)
+    },
+
     restoreSavedData(data) {
       history.load(data)
     },

types.ts

@@ -13,10 +13,11 @@ export interface Data {
     zoom: number
   }
   brush?: Bounds
-  currentPageId: string
   selectedIds: Set<string>
   pointedId?: string
   hoveredId?: string
+  currentPageId: string
+  currentCodeFileId: string
   document: {
     pages: Record<string, Page>
     code: Record<string, CodeFile>