[p5.js 2.0] IO refactoring

package.json

@@ -37,7 +37,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
-    "@vitest/browser": "^2.0.4",
+    "@vitest/browser": "^2.1.5",
     "all-contributors-cli": "^6.19.0",
     "concurrently": "^8.2.2",
     "connect-modrewrite": "^0.10.1",
@@ -48,14 +48,15 @@
     "i18next": "^19.0.2",
     "i18next-browser-languagedetector": "^4.0.1",
     "lint-staged": "^15.1.0",
+    "msw": "^2.6.3",
     "rollup": "^4.9.6",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.5.4",
     "unplugin-swc": "^1.4.2",
     "vite": "^5.0.2",
     "vite-plugin-string": "^1.2.2",
-    "vitest": "^2.0.4",
+    "vitest": "^2.1.5",
     "webdriverio": "^9.0.7",
     "zod": "^3.23.8"
   },
@@ -83,5 +84,10 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "msw": {
+    "workerDirectory": [
+      "test"
+    ]
   }
 }

preview/vite.config.mjs

@@ -3,6 +3,7 @@ import vitePluginString from 'vite-plugin-string';
 
 export default defineConfig({
   root: './',
+  appType: 'mpa',
   plugins: [
     vitePluginString({
       include: [

src/core/main.js

@@ -665,7 +665,6 @@ import rendering from './rendering';
 import renderer from './p5.Renderer';
 import renderer2D from './p5.Renderer2D';
 import graphics from './p5.Graphics';
-// import element from './p5.Element';
 
 p5.registerAddon(transform);
 p5.registerAddon(structure);
@@ -674,6 +673,5 @@ p5.registerAddon(rendering);
 p5.registerAddon(renderer);
 p5.registerAddon(renderer2D);
 p5.registerAddon(graphics);
-// p5.registerAddon(element);
 
 export default p5;

src/core/p5.Graphics.js

@@ -4,7 +4,7 @@
  * @for p5
  */
 
-import p5 from './main';
+// import p5 from './main';
 import * as constants from './constants';
 import primitives2D from '../shape/2d_primitives';
 import attributes from '../shape/attributes';
@@ -15,6 +15,7 @@ import image from '../image/image';
 import loadingDisplaying from '../image/loading_displaying';
 import pixels from '../image/pixels';
 import transform from './transform';
+import { Framebuffer } from '../webgl/p5.Framebuffer';
 
 import primitives3D from '../webgl/3d_primitives';
 import light from '../webgl/light';
@@ -30,7 +31,7 @@ class Graphics {
     this._pInst = pInst;
     this._renderer = new renderers[r](this._pInst, w, h, false, canvas);
 
-    p5.prototype._initializeInstanceVariables.apply(this);
+    this._initializeInstanceVariables(this);
 
     this._renderer._applyDefaults();
     return this;
@@ -552,7 +553,7 @@ class Graphics {
    * </div>
    */
   createFramebuffer(options) {
-    return new p5.Framebuffer(this._renderer, options);
+    return new Framebuffer(this._renderer, options);
   }
 
   _assert3d(name) {
@@ -561,6 +562,29 @@ class Graphics {
         `${name}() is only supported in WEBGL mode. If you'd like to use 3D graphics and WebGL, see  https://p5js.org/examples/form-3d-primitives.html for more information.`
       );
   };
+
+  _initializeInstanceVariables() {
+    this._accessibleOutputs = {
+      text: false,
+      grid: false,
+      textLabel: false,
+      gridLabel: false
+    };
+
+    this._styles = [];
+
+    this._bezierDetail = 20;
+    this._curveDetail = 20;
+
+    this._colorMode = constants.RGB;
+    this._colorMaxes = {
+      rgb: [255, 255, 255, 255],
+      hsb: [360, 100, 100, 1],
+      hsl: [360, 100, 100, 1]
+    };
+
+    this._downKeys = {}; //Holds the key codes of currently pressed keys
+  }
 };
 
 function graphics(p5, fn){

src/image/image.js

@@ -10,6 +10,8 @@
  * for drawing images to the main display canvas.
  */
 import * as omggif from 'omggif';
+import { Element } from '../dom/p5.Element';
+import { Framebuffer } from '../webgl/p5.Framebuffer';
 
 function image(p5, fn){
   /**
@@ -278,10 +280,10 @@ function image(p5, fn){
     if (args[0] instanceof HTMLCanvasElement) {
       htmlCanvas = args[0];
       args.shift();
-    } else if (args[0] instanceof p5.Element) {
+    } else if (args[0] instanceof Element) {
       htmlCanvas = args[0].elt;
       args.shift();
-    } else if (args[0] instanceof p5.Framebuffer) {
+    } else if (args[0] instanceof Framebuffer) {
       const framebuffer = args[0];
       temporaryGraphics = this.createGraphics(framebuffer.width,
         framebuffer.height);
@@ -325,6 +327,7 @@ function image(p5, fn){
     }
 
     htmlCanvas.toBlob(blob => {
+      console.log("here");
       fn.downloadFile(blob, filename, extension);
       if(temporaryGraphics) temporaryGraphics.remove();
     }, mimeType);
@@ -658,10 +661,10 @@ function image(p5, fn){
   fn.saveFrames = function(fName, ext, _duration, _fps, callback) {
     p5._validateParameters('saveFrames', arguments);
     let duration = _duration || 3;
-    duration = fn.constrain(duration, 0, 15);
+    duration = Math.max(Math.min(duration, 15), 0);
     duration = duration * 1000;
     let fps = _fps || 15;
-    fps = fn.constrain(fps, 0, 22);
+    fps = Math.max(Math.min(fps, 22), 0);
     let count = 0;
 
     const makeFrame = fn._makeFrame;