fix: _pixelDensity

zenozeng · Feb 3, 2022 · 9148fa1 · 9148fa1
1 parent 4949f1c
commit 9148fa1
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 90 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Pending Next
+
+- fix: _pixelDensity for drawing image created by createGraphics
+- 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

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "mocha": "^9.2.0",
     "puppeteer": "^13.1.3",
     "rollup": "^2.45.2",
-    "svgcanvas": "^2.0.4"
+    "svgcanvas": "^2.0.7"
   },
   "directories": {
     "test": "test"

diff --git a/scripts/ln.sh b/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
diff --git a/src/color.js b/src/color.js
diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,6 @@ import IO from './io';
 import Element from './element';
 import Filters from './filters';
 import constants from './constants';
-import Color from './color';
 
 function init(p5) {
     /**
@@ -15,7 +14,6 @@ function init(p5) {
     IO(p5);
     Element(p5);
     Filters(p5);
-    Color(p5);
 
     // attach constants to p5 instance
     Object.keys(constants).forEach(function(k) {

diff --git a/src/p5.RendererSVG.js b/src/p5.RendererSVG.js
@@ -31,7 +31,17 @@ 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;
@@ -46,21 +56,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 +66,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
      *

diff --git a/src/rendering.js b/src/rendering.js
@@ -15,6 +15,7 @@ export default function(p5) {
             // do default again
             this._renderer.resize(w, h);
             this._renderer._applyDefaults();
+            this._pixelDensity = 1;
         }
         return this;
     };

diff --git a/test/lib/test-render.js b/test/lib/test-render.js
@@ -27,8 +27,11 @@ p5canvas = new p5(function(p) {
 });
 
 const resetCanvas = function(p) {
+    // clean up
     p.clear();
-
+    p.noFill();
+    p.noStroke();
+    // reset
     p.strokeWeight(3); // for using XOR with thin line removed (using 8-connected neighborhood < 5) for diff
     p.fill(200);
     p.stroke(0);
@@ -117,8 +120,10 @@ var removeThinLines = function(canvas) {
 var render = function(drawFunction) {
     [p5svg, p5canvas].forEach(function(p) {
         resetCanvas(p);
-        let isSVG = p === p5svg;
-        drawFunction(p, isSVG);
+        let info = {
+           renderer: p === p5svg ? 'svg' : 'canvas'
+        }  
+        drawFunction(p, info);
     });
 };
 
@@ -176,7 +181,7 @@ var prepareDom = function(draw) {
     fnbody = fnbody.substring(fnbody.indexOf('{') + 1, fnbody.lastIndexOf('}'));
     // re-indent
     var indent = fnbody.match(/( +)/)[0].length;
-    indent = new RegExp('^[ ]{' + indent + '}', 'gm');
+    indent = new RegExp('^[ \t]{' + indent + '}', 'gm');
     fnbody = fnbody.replace(indent, '');
     $container.append('<pre class="function">' + fnbody + '</pre>');
 

diff --git a/test/unit/rendering/rendering.js b/test/unit/rendering/rendering.js
@@ -1,4 +1,4 @@
-import {assert, p5, testRender} from '../../lib';
+import {assert, p5, testRender, testRendering} from '../../lib';
 
 describe('Rendering', function() {
     this.timeout(0);
@@ -18,18 +18,20 @@ describe('Rendering', function() {
         });
     });
     describe('createGraphics', function() {
-        it('createGraphics: SVG API should draw same image as Canvas API', function(done) {
+        it('createGraphics: SVG API should draw same image as Canvas API', async function() {
             testRender.describe('createGraphics');
-            testRender(function(p) {
-                let pg = p.createGraphics(400, 400, p.isSVG ? p.SVG : p.P2D);
-                p.background(200);
-                pg.background(100);
-                pg.noStroke();
-                pg.ellipse(pg.width/2, pg.height/2, 50, 50);
-                p.image(pg, 50, 50);
-                p.image(pg, 0, 0, 50, 50);
-                p.ellipse(p.width/2, p.height/2, 50, 50);
-            }, done);
+            return testRendering({
+                draw: function(p) {
+                    let pg = p.createGraphics(100, 100, p.isSVG ? p.SVG : p.P2D);
+                    p.background('blue');
+                    pg.background('red');
+                    pg.fill('yellow')
+                    pg.noStroke();
+                    pg.ellipse(pg.width/2, pg.height/2, 50, 50);
+                    p.image(pg, 50, 50);
+                    p.image(pg, 0, 0, 50, 50);
+                }
+            })
         });
     });
     describe('resizeCanvas', function() {
@@ -53,18 +55,23 @@ describe('Rendering', function() {
         });
     });
     describe('customGradient', function() {
-        it('customGradient', function(done) {
+        it('customGradient', async function() {
             testRender.describe('customGradient');
-            testRender(function(p) {
-                let width = p.width;
-                let color1 = p.color('rgb(255,0,0)');
-                let color2 = p.color('rgb(0,255,0)');
-                let gradient = p.drawingContext.createLinearGradient(width/2-100, width/2-100, width/2+100, width/2+100);
-                gradient.addColorStop(0, color1);
-                gradient.addColorStop(1, color2);
-                p.drawingContext.fillStyle = gradient;
-                p.ellipse(50, 50, 100);
-            }, done);
+            return testRendering({
+                draw: function(p, {renderer}) {
+                    console.log(renderer, 'p0 ctx', p.drawingContext);
+                    let width = p.width;
+                    let color1 = p.color('rgb(255,0,0)');
+                    let color2 = p.color('rgb(0,255,0)');
+                    let gradient = p.drawingContext.createLinearGradient(width/2-100, width/2-100, width/2+100, width/2+100);
+                    gradient.addColorStop(0, color1);
+                    gradient.addColorStop(1, color2);
+                    p.drawingContext.fillStyle = gradient;
+                    console.log(renderer, 'p1', p.drawingContext.fillStyle);
+                    p.ellipse(50, 50, 100);
+                    console.log(renderer, 'p2', p.drawingContext.fillStyle);
+                }
+            });
         })
     })
 });
diff --git a/test/unit/typography/fonts.js b/test/unit/typography/fonts.js
@@ -1,4 +1,4 @@
-import {p5, testRendering} from '../../lib';
+import {testRendering} from '../../lib';
 
 describe('Typography', function() {
     this.timeout(0);