Merge pull request #208 from zenozeng/svg-element-event-listener

fix: SVGElement event listener
zenozeng · Feb 4, 2022 · 2c89712 · 2c89712
2 parents 0d8d1ec + 7149566
commit 2c89712
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v1.3.1
+
+- fix(SVGCanvasElement): addEventListener, fixes https://github.com/zenozeng/p5.js-svg/issues/202, fixes https://github.com/zenozeng/p5.js-svg/issues/196
+
 ## v1.3.0
 
 - feat: loadPixels() for https://github.com/zenozeng/p5.js-svg/issues/203

diff --git a/README.md b/README.md
@@ -9,10 +9,10 @@ and manipulating existing SVG file without rasterization.
 Add this line in your projects index.html :
 
 ```html
-<script src="https://unpkg.com/[email protected].0"></script>
+<script src="https://unpkg.com/[email protected].1"></script>
 ```
 
-(p5.js-svg v1.2.x is compatible with p5.js v1.4.1)
+(p5.js-svg v1.3.x is compatible with p5.js v1.4.1)
 
 Open your sketch.js and edit it:
 

diff --git a/examples/examples/click.js b/examples/examples/click.js
@@ -0,0 +1,14 @@
+let value = 0;
+
+function draw() {
+  fill(value);
+  rect(25, 25, 50, 50);
+}
+
+function mouseClicked() {
+  if (value === 0) {
+    value = 255;
+  } else {
+    value = 0;
+  }
+}
diff --git a/examples/examples/drop.js b/examples/examples/drop.js
@@ -0,0 +1,6 @@
+function setup() {
+    let canvas = createCanvas(windowWidth, windowHeight, SVG);
+    canvas.drop(() => {
+        console.log('ondrop')
+    })
+ }
diff --git a/examples/index.html b/examples/index.html
@@ -1,15 +1,15 @@
 <!doctype html>
 <head>
     <meta charset="UTF-8">
-    <script src="https://unpkg.com/p5@1.3.1/lib/p5.js"></script>
-    <script src="https://unpkg.com/p5.js-svg@1.0.7"></script>
+    <script src="https://unpkg.com/p5@1.4.1/lib/p5.js"></script>
+    <script src="../dist/p5.svg.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/abcjs-basic-min.js"></script>
     <script src="lib/rainbow.js"></script>
     <link rel="stylesheet" type="text/css" href="lib/rainbow.css">
     <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body>
-    <h1>Examples for p5.SVG 1.0.7</h1>
+    <h1>Examples for p5.SVG</h1>
     <ul>
         <li><a href="#basic">Basic 2D Shapes in SVG</a></li>
         <li><a href="#filters">Basic P5 Filters in SVG</a></li>

diff --git a/examples/lib/demo.js b/examples/lib/demo.js
@@ -25,10 +25,9 @@ var route = function() {
         Rainbow.color(code, 'javascript', function(code) {
             elt.innerHTML = code;
         });
-        var functions = ['setup', 'draw', 'mouseClicked', 'mousePressed', 'preload'];
+        var functions = ['setup', 'draw', 'mousePressed', 'preload', 'mouseClicked'];
         functions.forEach((fn) => window[fn] = null); // reset
         var patch = functions.map((fn) => `window.${fn} = typeof ${fn} === 'undefined' ? null : ${fn};`).join('\n');
-        console.log(patch);
         eval(code + patch);
         new p5(null, document.getElementById("canvas")); // global init p5
     };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "p5.js-svg",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "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.2.0"
+    "svgcanvas": "^2.2.1"
   },
   "directories": {
     "test": "test"