smooth-corners - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

package.json

 {
   "name": "smooth-corners",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "CSS superellipse masks with the Houdini API",
-  "main": "paint.js",
-  "browser": "paint.js",
+  "source": "paint.js",
+  "main": "lib/paint.js",
+  "module": "lib/paint.js",
+  "unpkg": "lib/paint.js",
+  "browser": "lib/paint.js",
   "scripts": {
     "start": "serve",
-    "build": "echo This is a static template, there is no bundler or bundling involved!"
+    "build": "microbundle --no-sourcemap --compress --format=es",
+    "dev": "microbundle watch --no-sourcemap"
   },
@@ -29,2 +33,3 @@ "repository": "https://github.com/wopian/smooth-corners",
   "devDependencies": {
+    "microbundle": "^0.12.3",
     "serve": "^11.2.0"
@@ -31,0 +36,0 @@ },

paint.js

 class SmoothCornersPainter {
   static get inputProperties() {
-    return ['--smooth-corners'];
+    return ["--smooth-corners"];
   }
 
-  superellipse(a, b, n) {
-    const n2 = 2 / n;
+  superellipse(a, b, nX = 4, nY) {
+    if (Number.isNaN(nX)) nX = 4;
+    if (typeof nY === "undefined" || Number.isNaN(nY)) nY = nX;
+    if (nX > 100) nX = 100;
+    if (nY > 100) nY = 100;
+    if (nX < 0.00000000001) nX = 0.00000000001;
+    if (nY < 0.00000000001) nY = 0.00000000001;
+
+    const nX2 = 2 / nX;
+    const nY2 = nY ? 2 / nY : nX2;
     const steps = 360;
@@ -14,4 +22,4 @@ const step = (2 * Math.PI) / steps;
       return {
-        x: Math.abs(cosT) ** n2 * a * Math.sign(cosT),
-        y: Math.abs(sinT) ** n2 * b * Math.sign(sinT)
+        x: Math.abs(cosT) ** nX2 * a * Math.sign(cosT),
+        y: Math.abs(sinT) ** nY2 * b * Math.sign(sinT)
       };
@@ -23,12 +31,18 @@ };
   paint(ctx, geom, properties) {
-    const m = properties.get('--smooth-corners').toString() || 4;
-    let n = m;
-    if (m > 100) n = 100;
-    if (m < 0.00000000001) n = 0.00000000001;
+    const [nX, nY] = properties
+      .get("--smooth-corners")
+      .toString()
+      .replace(/ /g, "")
+      .split(",");
 
     const width = geom.width / 2;
     const height = geom.height / 2;
-    const smooth = this.superellipse(width, height, n);
+    const smooth = this.superellipse(
+      width,
+      height,
+      parseFloat(nX, 10),
+      parseFloat(nY, 10)
+    );
 
-    ctx.fillStyle = '#000';
+    ctx.fillStyle = "#000";
     ctx.setTransform(1, 0, 0, 1, width, height);
@@ -49,2 +63,2 @@ ctx.beginPath();
 // eslint-disable-next-line no-undef
-registerPaint('smooth-corners', SmoothCornersPainter);
+registerPaint("smooth-corners", SmoothCornersPainter);

README.md

@@ -21,2 +21,6 @@ <h1 align=center>Smooth Corners</h1>
 
+## Demo
+
+[Live demo](https://wopian.github.io/smooth-corners/) featuring several different `--smooth-corners` values and an interactive editor
+
 ## Usage
@@ -30,4 +34,2 @@
 
-Without a `--smooth-corners` variable set it will default to a value of `4`
-
 ```css
@@ -41,12 +43,27 @@ .squircle {
 
-#### Customise Shape / Roundness
+#### Customise Curvature
 
+You can customise the mask curvature by using a CSS variable. This can be scoped locally to the selector or defined globally in `:root {}`
+
+`--smooth-corners: X[, Y]`
+
+- **X** - Float, Curvature of the X axis
+- **Y** - Float, Curvature of the Y axis (optional, defaults to X axis)
+
+##### Shapes by **X** value
+
+- `0.6` - [Astroid]
+- `< 1` - Concave rhombus
+- `= 1` - Rhombus
+- `> 1 and < 2` - Convex rhombus
+- `= 2` - Circle
+- `> 2` - Rounded rectangles
+- `2.6` - KakaoTalk profile icon
+- `4.0` - Squircle
+- `5.0` - iOS app icon
+
+###### Example
+
 ```css
 .mask {
-  /* Integer 0 to 100. Scoped locally or globally in :root {}
-     < 1 are concave rhombuses / asteroids
-     = 1 is a perfect rhombus
-     > 1 and <2 are convex rhombuses>
-     = 2 is a perfect circle
-     > 2 are rounded squares */
   --smooth-corners: 3;
@@ -67,3 +84,3 @@ mask-image: paint(smooth-corners);
 - [unpkg.com/smooth-corners](https://unpkg.com/smooth-corners)
-- [cdn.jsdelivr.net/npm/smooth-corners/paint.js](https://cdn.jsdelivr.net/npm/smooth-corners/paint.js)
+- [cdn.jsdelivr.net/npm/smooth-corners/paint.js](https://cdn.jsdelivr.net/npm/smooth-corners/lib/paint.js)
 
@@ -106,1 +123,2 @@ ```html
 [Example]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/example.png
+[Astroid]:https://en.wikipedia.org/wiki/Astroid

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8546

increased by24.8%

Number of package files

5

increased by25%

Lines of code

57

increased by42.5%

Number of lines in readme file

120

increased by17.65%

Worsened metrics

Dev dependency count

2

increased by100%

No dependency changes