houdini-leaf - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

houdini-leaf.js

@@ -24,44 +24,46 @@ /*
 
-class LeafPainter {
-  static get inputProperties() { return ['--leaf-size', '--leaf-color']; }
+if (typeof registerPaint !== 'undefined') {
+  class LeafPainter {
+    static get inputProperties() { return ['--leaf-size', '--leaf-color']; }
 
-  paint(ctx, geom, properties) {
-    const leafSize = parseInt(properties.get('--leaf-size')) || 16;
-    const numLeaves = Math.floor(geom.height / leafSize) * 1.5;
-    const x = leafSize * 2 + 1;
-    
-    ctx.strokeStyle = properties.get('--leaf-color') || black;
-    ctx.fillStyle = properties.get('--leaf-color') || black;
-    this.vine(ctx, geom, x, numLeaves, leafSize);
-  }
+    paint(ctx, geom, properties) {
+      const leafSize = parseInt(properties.get('--leaf-size')) || 16;
+      const numLeaves = Math.floor(geom.height / leafSize) * 1.5;
+      const x = leafSize * 2 + 1;
 
-  leaf(ctx, x, y, size, dir) {
-    ctx.translate(x, y);
-    ctx.scale(size, size);
-    ctx.beginPath();
-    ctx.moveTo(dir, -0.7);
-    ctx.bezierCurveTo(dir, -0.7, 0.4 * dir, -1, 0, 0);
-    ctx.bezierCurveTo(0, 0, dir, 0.4, dir, -0.7);
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ctx.fill();
-  }
+      ctx.strokeStyle = properties.get('--leaf-color') || black;
+      ctx.fillStyle = properties.get('--leaf-color') || black;
+      this.vine(ctx, geom, x, numLeaves, leafSize);
+    }
 
-  vine(ctx, geom, x, numLeaves, leafSize) {
-    const width = geom.width;
-    const height = geom.height;
-    ctx.beginPath();
-    ctx.moveTo(x, 0);
-    ctx.lineTo(x, height);
-    ctx.stroke();
-    const gap = height / numLeaves;
-    let direction = 1;
-    for (let i = 0; i < numLeaves; i++) {
-      const r = randomInt(gap);
-      this.leaf(ctx, x, gap * i + r, leafSize, direction);
-      direction = -direction;
+    leaf(ctx, x, y, size, dir) {
+      ctx.translate(x, y);
+      ctx.scale(size, size);
+      ctx.beginPath();
+      ctx.moveTo(dir, -0.7);
+      ctx.bezierCurveTo(dir, -0.7, 0.4 * dir, -1, 0, 0);
+      ctx.bezierCurveTo(0, 0, dir, 0.4, dir, -0.7);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.fill();
     }
+
+    vine(ctx, geom, x, numLeaves, leafSize) {
+      const width = geom.width;
+      const height = geom.height;
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, height);
+      ctx.stroke();
+      const gap = height / numLeaves;
+      let direction = 1;
+      for (let i = 0; i < numLeaves; i++) {
+        const r = randomInt(gap);
+        this.leaf(ctx, x, gap * i + r, leafSize, direction);
+        direction = -direction;
+      }
+    }
   }
+
+  registerPaint('leaf', LeafPainter);
 }
-
-registerPaint('leaf', LeafPainter);
 `
@@ -68,0 +70,0 @@

package.json

 {
   "name": "houdini-leaf",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Leaf and vine background decoration",
@@ -5,0 +5,0 @@ "main": "houdini-leaf.js",

README.md

 # houdini-leaf
 
+[Demo](https://codepen.io/zhua/pen/LYRxxJK)
+
+![Three boxes with leaf and vine in the background](houdini-leaf-demo.png)
+
+Import the script
 ```html
-<script src="houdini-leaf.js"></script>
+<script src="https://unpkg.com/houdini-leaf"></script>
 ```
@@ -9,3 +14,3 @@
 ```css
-{
+.my-element {
     --leaf-color: black;
@@ -12,0 +17,0 @@ --leaf-size: 16;

No alert changes

Improved metrics

Total package byte prevSize

2777

increased by11.3%

Lines of code

62

increased by3.33%

Number of lines in readme file

19

increased by35.71%

No dependency changes