Merge branch 'fixing-error-errors'

astro/package.json

@@ -27,12 +27,14 @@
     "@lezer/common": "^1.0.3",
     "@replit/codemirror-vim": "^6.0.14",
     "@rollup/browser": "^3.26.0",
+    "acorn": "^8.11.2",
     "astro": "^3.1.1",
     "classnames": "^2.3.2",
     "cm6-theme-basic-dark": "^0.2.0",
     "codemirror": "^6.0.1",
     "firebase": "^10.3.1",
     "firebase-admin": "^11.10.1",
+    "js-beautify": "^1.14.9",
     "marked": "^7.0.4",
     "preact": "^10.6.5",
     "source-map-js": "^1.0.2",
@@ -42,7 +44,7 @@
   "devDependencies": {
     "@astrojs/node": "^5.3.0",
     "@types/w3c-web-serial": "^1.0.3",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.11.1",
     "typescript": "^5.2.2"
   }

astro/src/components/BezierEditor.tsx

@@ -45,7 +45,7 @@ export const BezierEditor = ({ initialValue, onChange }) => {
   const ref = addToRef({ change, pointRef })
 
   return (
-    <div class={styles.container}>
+    <div data-bezier-editor class={`${styles.container} font-mono z-50`}>
       <svg
         ref={ref}
         class={['bez-ctrl', styles.bezCtrl].join(' ')}

astro/src/components/CodeMirror.module.css

@@ -7,7 +7,3 @@
   width: 100%;
 }
 
-.cmWrapper :global .cm-number-scrubber:hover {
-  outline: 1px solid;
-  cursor: ew-resize;
-}

astro/src/components/CodeMirror.tsx

@@ -32,7 +32,7 @@ export default function CodeMirror() {
 
   useEffect(() => {
     if (!view) return
-    const line = error?.stack[0].line
+    const line = error?.pos.line
     setErrorPos(view, line ? view.state.doc.line(line).from : null)
   })
 

astro/src/components/Error.tsx

@@ -79,22 +79,12 @@ const Snippet = ({
     })
   })
 
-  const hasContext = pos.line !== 1
-  const lines = code.split('\n')
-  const context = hasContext ? lines[pos.line - 2].trimStart() : undefined
   return (
     <pre class={styles.snippet}>
       <div>
-        {hasContext && <div>{pos.line - 1}</div>}
         <div>{pos.line}</div>
       </div>
       <code>
-        {hasContext && (
-          <>
-            {' '.repeat(lines[pos.line - 2].length - context!.length)}
-            <span class={styles.context}>{context}</span>
-          </>
-        )}
         <div ref={cmRef} class={styles.cm} />
         {' '.repeat(pos.column)}
         <span class={styles.arrow}>↑</span>
@@ -116,42 +106,15 @@ export default function Error() {
   const { error } = getStore()
 
   if (!error) return null
-
-  const l = error.stack?.[0]?.line
-
+
   return (
     <div class={styles.root}>
       <span class={styles.name}>{error.name}</span>
-      {l !== null && l !== undefined ? (
-        <Snippet
-          pos={error.stack[0]}
+      <Snippet
+          pos={error.pos}
           code={error.code}
           message={error.message}
         />
-      ) : (
-        <>
-          <span>{error.message}</span>
-          <span>
-            something went wrong getting the error snippet. report this as a bug
-            on GitHub.
-          </span>
-        </>
-      )}
-      {error.stack.length > 1 && (
-        <details>
-          <summary class={styles.stackLabel}>stack trace</summary>
-          <div class={styles.stack}>
-            {error.stack.slice(1).map((pos, i) => (
-              <Snippet
-                pos={pos}
-                code={error.code}
-                key={i}
-                message="in this call"
-              />
-            ))}
-          </div>
-        </details>
-      )}
     </div>
   )
 }

astro/src/components/Preview.tsx

@@ -65,6 +65,15 @@ function init() {
     { passive: false }
   )
 
+  let mousedown = false;
+  canvasListener("mousedown", "", e => {
+    mousedown = true;
+  })
+
+  canvasListener("mouseup", "", e => {
+    mousedown = false;
+  })
+
   canvasListener('mousemove', '', (e: MouseEvent) => {
     // update mousepos
     const mousePos = document.querySelector('.mouse-position') // mousePosRef.current;
@@ -84,7 +93,7 @@ function init() {
       )}mm`
     }
 
-    if (e.buttons !== 1) return
+    if (e.buttons !== 1 || !mousedown) return
     e.preventDefault()
 
     panZoomParams.panX += e.movementX

astro/src/components/Toolbar.tsx

@@ -19,10 +19,14 @@ import BrightnessContrastIcon from '../ui/BrightnessContrastIcon.tsx'
 import SettingsIcon from '../ui/SettingsIcon.tsx'
 import KeyboardIcon from '../ui/KeyboardIcon.tsx'
 import GitHubIcon from '../ui/GitHubIcon.tsx'
-import { saveFile } from "../lib/saveFile.ts";
+import { saveFile } from '../lib/saveFile.ts'
+import * as prettier from 'prettier'
+import js_beautify from 'js-beautify'
+import { createMask } from "../lib/getBitmap.js";
+import { Turtle } from '../lib/drawingToolkit/index.js'
 
 export default function Toolbar() {
-  const { connected, needsSaving } = getStore()
+  const { connected, needsSaving, view } = getStore()
 
   const [hidden, setHidden] = useState(true)
 
@@ -31,18 +35,33 @@ export default function Toolbar() {
       <div class="flex items-center h-full">
         <h1 class={styles.heading}>
           <a href="/">
-            <img src="/blot.svg" style="width: 30px"/>
+            <img src="/blot.svg" style="width: 30px" />
             <span style="font-weight: 700;">blot</span>
           </a>
         </h1>
         <RunButton />
-        <div 
+        <div
           class="relative cursor-pointer w-max h-full flex items-center p-1 hover:bg-white hover:bg-opacity-10"
           onClick={() => saveFile(getCode())}>
-          { needsSaving ? "save* (ctrl/cmd+s)" : "save (ctrl/cmd+s)" }
+          {needsSaving ? 'save* (ctrl/cmd+s)' : 'save (ctrl/cmd+s)'}
         </div>
         <NewButton />
         <OpenButton />
+        <div
+          class="relative cursor-pointer w-max h-full flex items-center p-1 hover:bg-white hover:bg-opacity-10"
+          onClick={() => {
+            const ogCode = getCode()
+            const formatted = formatCode(ogCode)
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: ogCode.length,
+                insert: formatted
+              }
+            })
+          }}>
+          tidy code
+        </div>
         <div
           class="relative cursor-default w-max h-full flex items-center p-1"
           onMouseEnter={() => setHidden(false)}
@@ -51,18 +70,59 @@ export default function Toolbar() {
           <div
             class={[
               hidden ? 'hidden' : '',
-              "border border-white border-opacity-10",
-              "bg-[--primary] absolute z-50 top-full p-1 rounded-md"
-            ].join(" ")}
-            >
+              'border border-white border-opacity-10',
+              'bg-[--primary] absolute z-50 top-full p-1 rounded-md'
+            ].join(' ')}>
             <DownloadButton />
             <DownloadSVG />
             <DownloadPNG />
-            <div 
+            <div
               class="w-max p-1 rounded hover:bg-white hover:bg-opacity-10"
               onClick={e => {
                 const { turtles } = getStore();
-                console.log(turtles);
+                const { isVisible }  = createMask();
+
+                // const newTurtle = new Turtle();
+                // let lastVisible = false;
+
+                // turtles.forEach(turtle => {
+                //   turtle
+                //   .resample(0.1)
+                //   .path.forEach(pl => {
+                //     pl.forEach((pt, i) => {
+                //       const [x, y] = pt;
+                //       const visible = isVisible(x, y);
+
+                //       if (lastVisible && i > 0 && visible) newTurtle.goTo([x, y]);
+                //       else newTurtle.jump([x, y]);
+                //       lastVisible = visible;
+                //     })
+                //   })
+                // })
+
+                // newTurtle.simplify(.01);
+                // newTurtle.style.fill ="none";
+                // newTurtle.style.stroke = "black";
+
+                // patchStore({
+                //   turtles: [newTurtle]
+                // })
+
+                turtles.forEach(turtle => {
+                  turtle
+                  .resample(0.01)
+                  .iteratePath(([x, y], t) => {
+                    const visible = isVisible(x, y);
+
+                    if (!visible) return "BREAK";
+                  })
+
+                  // turtle.simplify(0.01);
+                  turtle.style.fill = "none";
+                })
+
+                patchStore({ turtles });
+
               }}>
               cull hidden lines
             </div>
@@ -320,6 +380,18 @@ function OpenButton() {
   )
 }
 
+function formatCode(code) {
+  try {
+    const options = {
+      indent_size: 2
+    }
+    return js_beautify(code, options)
+  } catch (error) {
+    console.log(error)
+    return code // return the original code if there's an error
+  }
+}
+
 function MachineControls() {
   const { inst, running } = getStore()
 
@@ -381,7 +453,7 @@ function SettingsButton() {
           'padding': '5px',
           'border-radius': '5px'
         }}>
-{/*        <Button
+        {/*        <Button
           class={styles.dropdownEntry}
           variant="ghost"
           onClick={() => {
@@ -414,4 +486,3 @@ function SettingsButton() {
     </div>
   )
 }
-