flowing-liquid - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+# [0.3.0](https://github.com/lbw/flowing-liquid/compare/v0.2.2...v0.3.0) (2018-11-07)
+
+
+
 ## [0.2.2](https://github.com/lbw/flowing-liquid/compare/v0.2.1...v0.2.2) (2018-11-07)
@@ -2,0 +6,0 @@

dist/flowing-liquid.js

 /*!
-  * flowing-liquid v0.3.0
+  * flowing-liquid v0.4.0
   * (c) 2018 Bowen<Github: lbwa>
@@ -142,2 +142,6 @@ * @license MIT
         text: ''
+      },
+      background = {
+        color: 'rgba(186, 165, 130, 0.3)',
+        style: 'stroke'
       }
@@ -155,2 +159,3 @@ }) {
       this.font = font;
+      this.background = background;
       this.waves = flowingBody.map(bodyOption => {
@@ -161,3 +166,6 @@ return new FlowingBody(_objectSpread({
         }, bodyOption));
-      });
+      }); // replace `context.clip()`
+      // `context.clip()` will occur frame dropping on the mobile device (eg. IOS)
+
+      this.canvas.style.borderRadius = '50%';
     }
@@ -172,3 +180,3 @@ /**
       ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-      if (!this.hasRenderedContainer) this.drawContainer(ctx);
+      if (!this.hasRenderedContainer) this.renderContainer(ctx, this.background);
       if (this.currentLine < this.waterline) this.currentLine += 1;
@@ -182,3 +190,3 @@ this.waves.forEach((wave, index) => {
       });
-      window.requestAnimationFrame(this.render.bind(this, waveSpacing, showText));
+      window.requestAnimationFrame(this.render.bind(this, waveSpacing, showText, this.background));
     }
@@ -190,20 +198,37 @@
       ctx.font = fontStyle;
-      ctx.fillStyle = font.color || 'rgba(160, 86, 60, 1)';
+      ctx.fillStyle = font.color || '#24292e';
       ctx.textAlign = 'center';
-      ctx.fillText(font.text ? font.text : text, this.canvasWidth / 2, this.canvasHeight / 2 + this.font.size / 2);
+      ctx.fillText(font.text ? font.text : text, this.canvasWidth / 2, this.canvasHeight / 2 + (this.font.size || 50) / 2);
     }
 
-    drawContainer(ctx) {
+    renderContainer(ctx, background) {
       const radius = this.canvasWidth / 2;
-      const lineWidth = 4;
+      const lineWidth = background.style === 'fill' ? 0 : 4;
       const innerRadius = radius - lineWidth;
       ctx.lineWidth = lineWidth;
       ctx.beginPath();
-      ctx.arc(radius, radius, innerRadius, 0, 2 * Math.PI);
-      ctx.strokeStyle = 'rgba(186, 165, 130, 0.3)';
-      ctx.stroke();
-      ctx.clip();
-      this.hasRenderedContainer = true;
+      ctx.arc(radius + 0.5, radius + 0.5, innerRadius, 0, 2 * Math.PI);
+      this.createContainerBackground(ctx, background); // ctx.clip() // Drop frame risk on the mobile device (eg.IOS)
+      // `stroke` style will render only once
+
+      if (background.style === 'stroke') this.hasRenderedContainer = true;
     }
 
+    createContainerBackground(ctx, {
+      color,
+      style
+    }) {
+      if (style === 'stroke') {
+        ctx.strokeStyle = color || 'rgba(186, 165, 130, 0.3)';
+        ctx.stroke();
+        return;
+      }
+
+      if (style === 'fill') {
+        ctx.fillStyle = color || 'rgba(186, 165, 130, 0.3)';
+        ctx.fill();
+        return;
+      }
+    }
+
   }
@@ -210,0 +235,0 @@

dist/flowing-liquid.min.js

 /*!
-  * flowing-liquid v0.3.0
+  * flowing-liquid v0.4.0
   * (c) 2018 Bowen<Github: lbwa>
   * @license MIT
   */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.FlowingLiquid=e()}(this,function(){"use strict";function t(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class e{constructor({canvasWidth:t,canvasHeight:e,waveWidth:i=.055,waveHeight:s=6,xOffset:n=0,speed:r=.04,colors:a=["#DBB77A","#BF8F3B"]}){this.points=[],this.startX=0,this.canvasWidth=t,this.canvasHeight=e,this.waveWidth=i,this.waveHeight=s,this.xOffset=n,this.speed=r,this.colors=a}createFillColor(t){if("string"==typeof this.colors)return this.colors;const e=this.canvasWidth/2,i=t.createLinearGradient(e,e,e,this.canvasHeight);return i.addColorStop(0,this.colors[0]),i.addColorStop(1,this.colors[1]),i}render(t){const e=this.points;t.save(),t.beginPath(),this.points.forEach(e=>{t.lineTo(e.x,e.y)}),t.lineTo(this.canvasWidth,this.canvasHeight),t.lineTo(this.startX,this.canvasHeight),t.lineTo(e[0].x,e[0].y),t.fillStyle=this.createFillColor(t),t.fill(),t.restore()}createPointsMap({currentLine:t}){this.points=[];const{startX:e,waveHeight:i,waveWidth:s,canvasWidth:n,canvasHeight:r,xOffset:a}=this;for(let o=e;o<e+n;o+=20/n){const n=Math.sin((e+o)*s+a);this.points.push({x:o,y:r*(1-t/100)+n*i})}this.xOffset=this.xOffset>2*Math.PI?0:this.xOffset+this.speed}}return class{constructor({el:i,canvasWidth:s=500,canvasHeight:n=500,waterline:r=60,flowingBody:a=[{waveWidth:.055,waveHeight:4,colors:["#F39C6B","#A0563B"],xOffset:0,speed:.08},{waveWidth:.04,waveHeight:7,colors:["rgba(243, 156, 107, 0.48)","rgba(160, 86, 59, 0.48)"],xOffset:2,speed:.02}],font:o={bold:!0,color:"",size:50,family:"Microsoft Yahei",text:""}}){if("string"!=typeof i)throw new Error("Parameter el should be a String !");const h=this.canvas=document.querySelector(i);this.canvasWidth=h.width=s,this.canvasHeight=h.height=n,this.hasRenderedContainer=!1,this.currentLine=0,this.waterline=r<=100?r:100,this.font=o,this.waves=a.map(i=>new e(function(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{},n=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(s).filter(function(t){return Object.getOwnPropertyDescriptor(s,t).enumerable}))),n.forEach(function(i){t(e,i,s[i])})}return e}({canvasWidth:this.canvasWidth,canvasHeight:this.canvasHeight},i)))}render(t=5,e=!1){const i=this.canvas.getContext("2d");i.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.hasRenderedContainer||this.drawContainer(i),this.currentLine<this.waterline&&(this.currentLine+=1),this.waves.forEach((s,n)=>{s.createPointsMap({currentLine:this.currentLine+n*t}),s.render(i),e&&this.renderText(i,`${this.currentLine}`)}),window.requestAnimationFrame(this.render.bind(this,t,e))}renderText(t,e){const i=this.font,s=`${i.bold?"bold":""} `+`${i.size||50}px `+`${i.family||"Microsoft Yahei"}`;t.font=s,t.fillStyle=i.color||"rgba(160, 86, 60, 1)",t.textAlign="center",t.fillText(i.text?i.text:e,this.canvasWidth/2,this.canvasHeight/2+this.font.size/2)}drawContainer(t){const e=this.canvasWidth/2,i=e-4;t.lineWidth=4,t.beginPath(),t.arc(e,e,i,0,2*Math.PI),t.strokeStyle="rgba(186, 165, 130, 0.3)",t.stroke(),t.clip(),this.hasRenderedContainer=!0}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.FlowingLiquid=e()}(this,function(){"use strict";function t(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class e{constructor({canvasWidth:t,canvasHeight:e,waveWidth:i=.055,waveHeight:s=6,xOffset:n=0,speed:r=.04,colors:a=["#DBB77A","#BF8F3B"]}){this.points=[],this.startX=0,this.canvasWidth=t,this.canvasHeight=e,this.waveWidth=i,this.waveHeight=s,this.xOffset=n,this.speed=r,this.colors=a}createFillColor(t){if("string"==typeof this.colors)return this.colors;const e=this.canvasWidth/2,i=t.createLinearGradient(e,e,e,this.canvasHeight);return i.addColorStop(0,this.colors[0]),i.addColorStop(1,this.colors[1]),i}render(t){const e=this.points;t.save(),t.beginPath(),this.points.forEach(e=>{t.lineTo(e.x,e.y)}),t.lineTo(this.canvasWidth,this.canvasHeight),t.lineTo(this.startX,this.canvasHeight),t.lineTo(e[0].x,e[0].y),t.fillStyle=this.createFillColor(t),t.fill(),t.restore()}createPointsMap({currentLine:t}){this.points=[];const{startX:e,waveHeight:i,waveWidth:s,canvasWidth:n,canvasHeight:r,xOffset:a}=this;for(let o=e;o<e+n;o+=20/n){const n=Math.sin((e+o)*s+a);this.points.push({x:o,y:r*(1-t/100)+n*i})}this.xOffset=this.xOffset>2*Math.PI?0:this.xOffset+this.speed}}return class{constructor({el:i,canvasWidth:s=500,canvasHeight:n=500,waterline:r=60,flowingBody:a=[{waveWidth:.055,waveHeight:4,colors:["#F39C6B","#A0563B"],xOffset:0,speed:.08},{waveWidth:.04,waveHeight:7,colors:["rgba(243, 156, 107, 0.48)","rgba(160, 86, 59, 0.48)"],xOffset:2,speed:.02}],font:o={bold:!0,color:"",size:50,family:"Microsoft Yahei",text:""},background:h={color:"rgba(186, 165, 130, 0.3)",style:"stroke"}}){if("string"!=typeof i)throw new Error("Parameter el should be a String !");const c=this.canvas=document.querySelector(i);this.canvasWidth=c.width=s,this.canvasHeight=c.height=n,this.hasRenderedContainer=!1,this.currentLine=0,this.waterline=r<=100?r:100,this.font=o,this.background=h,this.waves=a.map(i=>new e(function(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{},n=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(s).filter(function(t){return Object.getOwnPropertyDescriptor(s,t).enumerable}))),n.forEach(function(i){t(e,i,s[i])})}return e}({canvasWidth:this.canvasWidth,canvasHeight:this.canvasHeight},i))),this.canvas.style.borderRadius="50%"}render(t=5,e=!1){const i=this.canvas.getContext("2d");i.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.hasRenderedContainer||this.renderContainer(i,this.background),this.currentLine<this.waterline&&(this.currentLine+=1),this.waves.forEach((s,n)=>{s.createPointsMap({currentLine:this.currentLine+n*t}),s.render(i),e&&this.renderText(i,`${this.currentLine}`)}),window.requestAnimationFrame(this.render.bind(this,t,e,this.background))}renderText(t,e){const i=this.font,s=`${i.bold?"bold":""} `+`${i.size||50}px `+`${i.family||"Microsoft Yahei"}`;t.font=s,t.fillStyle=i.color||"#24292e",t.textAlign="center",t.fillText(i.text?i.text:e,this.canvasWidth/2,this.canvasHeight/2+(this.font.size||50)/2)}renderContainer(t,e){const i=this.canvasWidth/2,s="fill"===e.style?0:4,n=i-s;t.lineWidth=s,t.beginPath(),t.arc(i+.5,i+.5,n,0,2*Math.PI),this.createContainerBackground(t,e),"stroke"===e.style&&(this.hasRenderedContainer=!0)}createContainerBackground(t,{color:e,style:i}){return"stroke"===i?(t.strokeStyle=e||"rgba(186, 165, 130, 0.3)",void t.stroke()):"fill"===i?(t.fillStyle=e||"rgba(186, 165, 130, 0.3)",void t.fill()):void 0}}});

package.json

 {
   "name": "flowing-liquid",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A component for building flowing chart",
@@ -5,0 +5,0 @@ "main": "dist/flowing-liquid.min.js",

README.md

@@ -1,5 +0,13 @@
-# flowing-liquid ![npm](https://img.shields.io/npm/v/flowing-liquid.svg?style=flat-square)
+# flowing-liquid [![npm](https://img.shields.io/npm/v/flowing-liquid.svg?style=flat-square)](https://www.npmjs.com/package/flowing-liquid)
 
 > A component for building flowing chart.
 
+<p align="center">
+  <a href="https://lbwa.github.io/flowing-liquid/">Online demo</a>
+</p>
+
+<p align="center">
+  <img src="./sample.gif"/>
+</p>
+
 ## Installing
@@ -17,2 +25,4 @@
 
+**Notice**: Only `el` option is **required**.
+
 ```js
@@ -22,3 +32,3 @@ import FlowingLiquid from 'flowing-liquid'
 const flowingLiquid = new FlowingLiquid({
-  el: '#chart', // canvas element
+  el: '#chart', // canvas element, required
   canvasWidth: 300, // canvas element width
@@ -43,2 +53,7 @@ canvasHeight: 300, // canvas element height
   ],
+  // set canvas background color
+  background: {
+    color: 'dodgerblue',
+    style: 'fill'
+  },,
   // indicator text, default value is parameter waterline
@@ -45,0 +60,0 @@ font: {

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

14514

increased by13.07%

Lines of code

225

increased by11.39%

Number of lines in readme file

70

increased by27.27%

No dependency changes