Merge pull request #207 from zenozeng/v1.3

v1.3

.eslintrc

@@ -15,10 +15,6 @@
         "linebreak-style": [
             2,
             "unix"
-        ],
-        "semi": [
-            2,
-            "always"
         ]
     },
     "env": {

CHANGELOG.md

@@ -1,3 +1,12 @@
+## v1.3.0
+
+- feat: loadPixels() for https://github.com/zenozeng/p5.js-svg/issues/203
+- fix(graphics): call RendererSVG with this instead of pInst
+- fix: _pixelDensity for drawing image created by createGraphics
+- refactor: RendererTester
+- refactor: use Renderer2D.prototype.line instead of RendererSVG.prototype.line
+- refactor: use Proxy instead of _withPixelDensity
+
 ## v1.2.1
 
 - fix: add p5.Color.prototype.indexOf, fixes https://github.com/zenozeng/p5.js-svg/issues/204

README.md

@@ -9,7 +9,7 @@ and manipulating existing SVG file without rasterization.
 Add this line in your projects index.html :
 
 ```html
-<script src="https://unpkg.com/p5.js-svg@1.2.0"></script>
+<script src="https://unpkg.com/p5.js-svg@1.3.0"></script>
 ```
 
 (p5.js-svg v1.2.x is compatible with p5.js v1.4.1)

karma.conf.js

@@ -13,7 +13,6 @@ module.exports = function(config) {
             {pattern: 'src/**/*.js', included: false},
             {pattern: 'test/unit/**/*', included: false},
             'https://unpkg.com/[email protected]/lib/p5.min.js',
-            'https://unpkg.com/[email protected]/dist/jquery.js',
             'dist/p5.svg.js',
             'dist/test.js'
         ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-svg",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "./src/index.js",
   "scripts": {
     "start": "python3 -m http.server 3000",
@@ -29,7 +29,7 @@
     "mocha": "^9.2.0",
     "puppeteer": "^13.1.3",
     "rollup": "^2.45.2",
-    "svgcanvas": "^2.0.4"
+    "svgcanvas": "^2.2.0"
   },
   "directories": {
     "test": "test"

scripts/ln.sh

@@ -1,2 +1,2 @@
-rm -rf node_modules/svgcanvas
+rm -rf node_modules/svgcanvas || echo "ok"
 ln -sf $(pwd)/../svgcanvas $(pwd)/node_modules/svgcanvas

src/config.js

@@ -0,0 +1,3 @@
+const DEBUG = false;
+
+export {DEBUG};

src/image.js

@@ -0,0 +1,7 @@
+export default function(p5) {
+    p5.prototype.loadPixels = function(...args) {
+        p5._validateParameters('loadPixels', args);
+        return this._renderer.loadPixels();
+    };
+}
+

src/index.js

@@ -3,8 +3,8 @@ import Rendering from './rendering';
 import IO from './io';
 import Element from './element';
 import Filters from './filters';
+import Image from './image';
 import constants from './constants';
-import Color from './color';
 
 function init(p5) {
     /**
@@ -15,7 +15,7 @@ function init(p5) {
     IO(p5);
     Element(p5);
     Filters(p5);
-    Color(p5);
+    Image(p5);
 
     // attach constants to p5 instance
     Object.keys(constants).forEach(function(k) {

src/p5.RendererSVG.js

@@ -1,4 +1,5 @@
 import {Element as SVGCanvasElement} from 'svgcanvas';
+import {DEBUG} from './config';
 
 export default function(p5) {
     /**
@@ -9,7 +10,7 @@ export default function(p5) {
      * @param {Bool} isMainCanvas
      */
     function RendererSVG(elt, pInst, isMainCanvas) {
-        var svgCanvas = new SVGCanvasElement();
+        var svgCanvas = new SVGCanvasElement({debug: DEBUG});
         var svg = svgCanvas.svg;
 
         // replace <canvas> with <svg> and copy id, className
@@ -31,11 +32,26 @@ export default function(p5) {
             }
         };
 
-        p5.Renderer2D.call(this, elt, pInst, isMainCanvas);
+        const pInstProxy = new Proxy(pInst, {
+            get: function(target, prop) {
+                if (prop === '_pixelDensity') {
+                    // 1 is OK for SVG
+                    return 1;
+                }
+                return target[prop];
+            }
+        });
+
+        p5.Renderer2D.call(this, elt, pInstProxy, isMainCanvas);
 
         this.isSVG = true;
         this.svg = svg;
 
+        if (DEBUG) {
+            console.debug({svgCanvas});
+            console.debug(this.drawingContext);
+        }
+
         return this;
     }
 
@@ -46,21 +62,6 @@ export default function(p5) {
         this.drawingContext.lineWidth = 1;
     };
 
-    RendererSVG.prototype.line = function(x1, y1, x2, y2) {
-        var styleEmpty = 'rgba(0,0,0,0)';
-        var ctx = this.drawingContext;
-        if (!this._doStroke) {
-            return this;
-        } else if(ctx.strokeStyle === styleEmpty){
-            return this;
-        }
-        ctx.beginPath();
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-        ctx.stroke();
-        return this;
-    };
-
     RendererSVG.prototype.resize = function(w, h) {
         if (!w || !h) {
             return;
@@ -71,37 +72,14 @@ export default function(p5) {
             // note that at first this.width and this.height is undefined
             this.drawingContext.__clearCanvas();
         }
-        this._withPixelDensity(function() {
-            p5.Renderer2D.prototype.resize.call(this, w, h);
-        });
+
+        p5.Renderer2D.prototype.resize.call(this, w, h);
+
         // For scale, crop
         // see also: http://sarasoueidan.com/blog/svg-coordinate-systems/
         this.svg.setAttribute('viewBox', [0, 0, w, h].join(' '));
     };
 
-    /**
-     * @private
-     */
-    RendererSVG.prototype._withPixelDensity = function(fn) {
-        let pixelDensity = this._pInst._pixelDensity;
-        this._pInst._pixelDensity = 1; // 1 is OK for SVG
-        fn.apply(this);
-        this._pInst._pixelDensity = pixelDensity;
-    };
-
-    RendererSVG.prototype.background = function() {
-        var args = arguments;
-        this._withPixelDensity(function() {
-            p5.Renderer2D.prototype.background.apply(this, args);
-        });
-    };
-
-    RendererSVG.prototype.resetMatrix = function() {
-        this._withPixelDensity(function() {
-            p5.Renderer2D.prototype.resetMatrix.apply(this);
-        });
-    };
-
     /**
      * Append a element to current SVG Graphics
      *
@@ -168,5 +146,16 @@ export default function(p5) {
         return p5.Element.prototype.parent.apply($this, arguments);
     };
 
+
+    RendererSVG.prototype.loadPixels = async function() {
+        const pixelsState = this._pixelsState; // if called by p5.Image
+        const pd = pixelsState._pixelDensity;
+        const w = this.width * pd;
+        const h = this.height * pd;
+        const imageData = await this.drawingContext.getImageData(0, 0, w, h, {async: true});
+        pixelsState._setProperty('imageData', imageData);
+        pixelsState._setProperty('pixels', imageData.data);
+    }
+
     p5.RendererSVG = RendererSVG;
 }

src/rendering.js

@@ -9,7 +9,7 @@ export default function(p5) {
         if (isSVG) {
             // replace <canvas> with <svg>
             var c = this._renderer.elt;
-            this._renderer = new p5.RendererSVG(c, pInst, false); // replace renderer
+            this._renderer = new p5.RendererSVG(c, this, false); // replace renderer
             c = this._renderer.elt;
             this.elt = c; // replace this.elt
             // do default again

test/index.html

@@ -24,7 +24,6 @@ <h2>SVG & Canvas</h2>
         mocha.setup('bdd');
         mocha.setup({timeout: 10000, slow: 2000});
     </script>
-    <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
     <script src="../dist/test.js"></script>
 </body>
 

test/lib/canvas.js

@@ -0,0 +1,17 @@
+const config = {
+    pixelDensity: 3 // for 200% and 150%
+}
+
+// count non transparent pixels
+var countPixels = function(imgData) {
+    var count = 0;
+    for (var i = 3; i < imgData.data.length; i += 4) {
+        if (imgData.data[i] > 0) {
+            count++;
+        }
+    }
+    return count;
+};
+
+
+export {config, countPixels};

test/lib/index.js

@@ -1,7 +1,6 @@
 import {assert} from 'chai';
-import testRender from './test-render';
-import testRendering from './test-rendering';
+import testRender, {rendererTester} from './renderer';
 
 const p5 = window.p5;
 
-export {assert, p5, testRender, testRendering};
+export {assert, p5, testRender, rendererTester};