make onPaint work with mutiple repls on screen

+ add warning if stock onPaint is not overloaded

packages/codemirror/codemirror.mjs

@@ -141,7 +141,6 @@ export class StrudelMirror {
     this.painters = [];
     this.drawTime = drawTime;
     this.onDraw = onDraw;
-    const self = this;
     this.id = id || s4();
 
     this.drawer = new Drawer((haps, time) => {
@@ -150,13 +149,6 @@ export class StrudelMirror {
       this.onDraw?.(haps, time, currentFrame, this.painters);
     }, drawTime);
 
-    // this approach does not work with multiple repls on screen
-    // TODO: refactor onPaint usages + find fix, maybe remove painters here?
-    Pattern.prototype.onPaint = function (onPaint) {
-      self.painters.push(onPaint);
-      return this;
-    };
-
     this.prebaked = prebake();
     autodraw && this.drawFirstFrame();
 
@@ -182,6 +174,14 @@ export class StrudelMirror {
       beforeEval: async () => {
         cleanupDraw();
         this.painters = [];
+        const self = this;
+        // this is similar to repl.mjs > injectPatternMethods
+        // maybe there is a solution without prototype hacking, but hey, it works
+        // we need to do this befor every eval to make sure it works with multiple StrudelMirror's side by side
+        Pattern.prototype.onPaint = function (onPaint) {
+          self.painters.push(onPaint);
+          return this;
+        };
         await this.prebaked;
         await replOptions?.beforeEval?.();
       },

packages/draw/draw.mjs

@@ -96,9 +96,8 @@ export const cleanupDraw = (clearScreen = true) => {
   }
 };
 
-Pattern.prototype.onPaint = function (onPaint) {
+Pattern.prototype.onPaint = function () {
-  // this is evil! TODO: add pattern.context
+  console.warn('[draw] onPaint was not overloaded. Some drawings might not work');
-  this.context = { onPaint };
   return this;
 };