From ed4456b7a5b528371d6aa6158b7401f746925d4d Mon Sep 17 00:00:00 2001
From: flop <flop@cttue.de>
Date: Sat, 30 May 2026 15:59:44 +0200
Subject: [PATCH] fix: bugfixes so its clean

---
 ts-editor/src/browser.ts | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/ts-editor/src/browser.ts b/ts-editor/src/browser.ts
index fc35f67..685760a 100644
--- a/ts-editor/src/browser.ts
+++ b/ts-editor/src/browser.ts
@@ -424,8 +424,8 @@ function triggerPreview() {
 
 function buildPreview() {
   if (!(window as any)._mdDriver)
-    window._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 });
-  window._mdDriver.load(() => Promise.resolve(file.toBuffer()));
+    (window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 });
+  (window as any)._mdDriver.load(() => Promise.resolve(file.toBuffer()));
 }
 
 // --- Load / Export -----------------------------------------------------------
@@ -514,9 +514,10 @@ function drawPixelCanvas(canvas: HTMLCanvasElement, img: MonoFormatPixelImage) {
 interface PixelCanvasState { drawing: boolean; drawValue: number; }
 
 const PixelCanvas: m.Component<{ img: MonoFormatPixelImage; onpaint: () => void }, PixelCanvasState> = {
-  drawing: false,
-  drawValue: 1,
-
+  oninit(vnode) {
+    vnode.state.drawing = false;
+    vnode.state.drawValue = 1;
+  },
   view({ attrs: { img, onpaint }, state }) {
     function pixelFromEvent(e: MouseEvent): { x: number; y: number } | null {
       const canvas = e.currentTarget as HTMLCanvasElement;
@@ -585,10 +586,10 @@ const PixelCanvas: m.Component<{ img: MonoFormatPixelImage; onpaint: () => void
           img.height = h;
           // then read imageData from the scaled offscreen canvas as before
           img.pixels = new Uint8Array(w * h).map((_, i) => {
-            const r = imageData.data[i * 4];
-            const g = imageData.data[i * 4 + 1];
-            const b = imageData.data[i * 4 + 2];
-            const a = imageData.data[i * 4 + 3];
+            const r = imageData.data[i * 4] || 0;
+            const g = imageData.data[i * 4 + 1] || 0;
+            const b = imageData.data[i * 4 + 2] || 0;
+            const a = imageData.data[i * 4 + 3] || 0;
             // transparent = 0, dark pixels = 1, light pixels = 0
             return a > 128 && (r * 299 + g * 587 + b * 114) < 128_000 ? 0 : 1;
           });
@@ -623,8 +624,9 @@ const Image2DEditor: m.Component<{ si: number; ei: number; el: MonoFormatImage2D
 interface AnimationEditorState { activeFrame: number; }
 
 const AnimationEditor: m.Component<{ si: number; ei: number; el: MonoFormatAnimation }, AnimationEditorState> = {
-  activeFrame: 0,
-
+  oninit(vnode) {
+    vnode.state.activeFrame = 0;
+  },
   view({ attrs: { si, ei, el }, state }) {
     const w = el.width || W;
     const h = el.height || H;
@@ -667,7 +669,7 @@ const AnimationEditor: m.Component<{ si: number; ei: number; el: MonoFormatAnima
         m("button.add-el", { onclick: addFrame }, "+ frame"),
       ),
       m("div", { key: state.activeFrame },
-        m(PixelCanvas, {
+        m(PixelCanvas as any, {
           img: frame,
           onpaint: () => { markDirty(); triggerPreview(); },
         }),