canvas-elements - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

build/cdn/canvas-elements.min.js

@@ -1,2 +0,2 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self)["canvas-elements"]={})}(this,function(t){"use strict";var h=function(t,i){return(h=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,i){t.__proto__=i}||function(t,i){for(var s in i)i.hasOwnProperty(s)&&(t[s]=i[s])})(t,i)};var i=function(){function t(t){var i=t.x,s=t.y,h=t.radiusX,r=t.radiusY,o=t.rotation,e=t.background,n=t.borderColor,c=t.borderWidth,d=t.ctx;this.x=i,this.y=s,this.radiusX=h,this.radiusY=r,this.rotation=o||0,this.background=e||"black",this.borderColor=n,this.borderWidth=c||0,this.ctx=d,this.draw()}return t.prototype.draw=function(){this.ctx.beginPath(),this.ctx.ellipse(this.x,this.y,this.radiusX,this.radiusY,this.rotation,0,2*Math.PI,!1),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.ctx.closePath()},t}(),s=function(c){function t(t){var i=t.x,s=t.y,h=t.r,r=t.background,o=t.borderColor,e=t.borderWidth,n=t.ctx;return c.call(this,{x:i,y:s,radiusX:h,radiusY:h,rotation:0,background:r,borderColor:o,borderWidth:e,ctx:n})||this}return function(t,i){function s(){this.constructor=t}h(t,i),t.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}(t,c),t}(i),r=function(){function t(t){var i=t.x,s=t.y,h=t.w,r=t.h,o=t.r,e=t.borderColor,n=t.background,c=void 0===n?"#000":n,d=t.borderWidth,a=void 0===d?0:d,x=t.ctx;this.x=i,this.y=s,this.r=o,this.w=h,this.h=r,this.background=c,this.borderColor=e,this.borderWidth=a,this.ctx=x,this.draw()}return t.prototype.draw=function(){this.w<2*this.r&&(this.r=this.w/2),this.h<2*this.r&&(this.r=this.h/2),this.ctx.beginPath(),this.ctx.moveTo(this.x+this.r,this.y),this.ctx.arcTo(this.x+this.w,this.y,this.x+this.w,this.y+this.h,this.r),this.ctx.arcTo(this.x+this.w,this.y+this.h,this.x,this.y+this.h,this.r),this.ctx.arcTo(this.x,this.y+this.h,this.x,this.y,this.r),this.ctx.arcTo(this.x,this.y,this.x+this.w,this.y,this.r),this.ctx.closePath(),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill()},t}(),o=function(){function t(t){var i=t.x,s=t.y,h=t.size,r=t.font,o=void 0===r?"Arial":r,e=t.background,n=void 0===e?"#000":e,c=t.align,d=void 0===c?"left":c,a=t.baseline,x=void 0===a?"middle":a,l=t.text,u=t.ctx,f=t.weight,b=void 0===f?"400":f;this.x=i,this.y=s,this.size=h,this.font=o,this.background=n,this.align=d,this.baseline=x,this.weight=b,this.text=l,this.ctx=u,this.draw()}return t.prototype.draw=function(){this.ctx.font=this.weight+" "+this.size+"px "+this.font,this.ctx.fillStyle=this.background,this.ctx.textAlign=this.align,this.ctx.textBaseline=this.baseline,this.ctx.fillText(this.text,this.x,this.y)},t}();window.CanvasElements={Circle:s,Rect:r,Text:o,Ellipse:i},t.Circle=s,t.Rect=r,t.Text=o,t.Ellipse=i,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self)["canvas-elements"]={})}(this,function(t){"use strict";var s=function(t,i){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,i){t.__proto__=i}||function(t,i){for(var r in i)i.hasOwnProperty(r)&&(t[r]=i[r])})(t,i)};function i(t,i){function r(){this.constructor=t}s(t,i),t.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}var r=function(){function t(t,i,r,s,o,h,e){if(void 0===r&&(r=0),void 0===s&&(s="#000"),void 0===o&&(o=0),void 0===h&&(h="#000"),!t)throw new Error("X coordinate is not defined");if(!i)throw new Error("Y coordinate is not defined");if(!e)throw new Error("Canvas rendering context is not defined");this.x=t,this.y=i,this.rotation=r,this.background=s,this.borderWidth=o,this.borderColor=h,this.ctx=e}return t.prototype.rotate=function(t,i,r){void 0===r&&(r=!0),this.ctx.translate(t,i),this.ctx.rotate((r?1:-1)*this.rotation),this.ctx.translate(-t,-i)},t}(),o=function(l){function t(t){var i=this,r=t.x,s=t.y,o=t.radiusX,h=t.radiusY,e=t.rotation,n=void 0===e?0:e,c=t.background,d=t.borderColor,a=t.borderWidth,x=t.ctx;return(i=l.call(this,r,s,n,c,a,d,x)||this).radiusX=o,i.radiusY=h,i.draw(),i}return i(t,l),t.prototype.draw=function(){this.ctx.beginPath(),this.ctx.ellipse(this.x,this.y,this.radiusX,this.radiusY,this.rotation,0,2*Math.PI,!1),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.ctx.closePath()},t}(r),h=function(c){function t(t){var i=t.x,r=t.y,s=t.r,o=t.background,h=t.borderColor,e=t.borderWidth,n=t.ctx;return c.call(this,{x:i,y:r,radiusX:s,radiusY:s,rotation:0,background:o,borderColor:h,borderWidth:e,ctx:n})||this}return i(t,c),t}(o),e=function(f){function t(t){var i=t.x,r=t.y,s=t.w,o=t.h,h=t.r,e=void 0===h?0:h,n=t.rotation,c=void 0===n?0:n,d=t.borderColor,a=t.background,x=t.borderWidth,l=t.ctx,u=f.call(this,i,r,c,a,x,d,l)||this;return u.r=e,u.w=s,u.h=o,u.draw(),u}return i(t,f),t.prototype.draw=function(){this.rotate(this.w/2+this.x,this.h/2+this.y),this.w<2*this.r&&(this.r=this.w/2),this.h<2*this.r&&(this.r=this.h/2),this.ctx.beginPath(),this.ctx.moveTo(this.x+this.r,this.y),this.ctx.arcTo(this.x+this.w,this.y,this.x+this.w,this.y+this.h,this.r),this.ctx.arcTo(this.x+this.w,this.y+this.h,this.x,this.y+this.h,this.r),this.ctx.arcTo(this.x,this.y+this.h,this.x,this.y,this.r),this.ctx.arcTo(this.x,this.y,this.x+this.w,this.y,this.r),this.ctx.closePath(),this.ctx.fillStyle=this.background,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.stroke()),this.ctx.fill(),this.rotate(this.w/2+this.x,this.h/2+this.y,!1)},t}(r),n=function(k){function t(t){var i=this,r=t.x,s=t.y,o=t.size,h=void 0===o?18:o,e=t.rotation,n=void 0===e?0:e,c=t.font,d=void 0===c?"Arial":c,a=t.background,x=t.align,l=void 0===x?"left":x,u=t.baseline,f=void 0===u?"middle":u,y=t.text,b=t.ctx,p=t.borderColor,w=t.borderWidth,v=t.weight,g=void 0===v?"400":v;return(i=k.call(this,r,s,n,a,w,p,b)||this).size=h,i.font=d,i.background=a,i.align=l,i.baseline=f,i.weight=g,i.text=y,i.draw(),i}return i(t,k),t.prototype.draw=function(){this.rotate(this.x,this.y),this.ctx.font=this.weight+" "+this.size+"px "+this.font,this.ctx.fillStyle=this.background,this.ctx.textAlign=this.align,this.ctx.textBaseline=this.baseline,this.borderWidth&&(this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.borderColor,this.ctx.strokeText(this.text,this.x,this.y)),this.ctx.fillText(this.text,this.x,this.y),this.rotate(this.x,this.y,!1)},t}(r),c=function(b){function t(t){var i=this,r=t.x,s=t.y,o=t.x2,h=t.y2,e=t.r,n=t.angle,c=t.rotation,d=void 0===c?0:c,a=t.background,x=t.borderColor,l=t.borderWidth,u=t.lineCap,f=void 0===u?"square":u,y=t.ctx;if(i=b.call(this,r,s,d,a||x,l,x,y)||this,"number"==typeof o&&"number"==typeof h)i.x2=o,i.y2=h;else{if("number"!=typeof e||"number"!=typeof n)throw new Error("Insufficient values to draw a line");i.x2=i.x+e*Math.cos(n),i.y2=i.y+e*Math.sin(n)}return i.lineCap=f,i.draw(),i}return i(t,b),t.prototype.draw=function(){var t=(this.x+this.x2)/2,i=(this.y+this.y2)/2;this.rotate(t,i),this.ctx.beginPath(),this.ctx.moveTo(this.x,this.y),this.ctx.lineTo(this.x2,this.y2),this.borderWidth&&(this.ctx.lineCap=this.lineCap,this.ctx.lineWidth=this.borderWidth,this.ctx.strokeStyle=this.background),this.ctx.stroke(),this.rotate(t,i,!1)},t}(r);window.CanvasElements={Circle:h,Rect:e,Text:n,Ellipse:o,Line:c},t.Circle=h,t.Rect=e,t.Text=n,t.Ellipse=o,t.Line=c,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=canvas-elements.min.js.map

build/simple/rect.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var Rect = /** @class */ (function () {
+    /**
+     *
+     * @param {Object} options options to create rectangles
+     * @param {number} options.x x coordinate
+     * @param {number} options.y y coordinate
+     * @param {number} options.w rectangle width
+     * @param {number} options.h rectangle height
+     * @param {number} options.r border radius (roundness of corners)
+     * @param {string} options.borderColor border color
+     * @param {string} options.background fill color
+     * @param {number} options.borderWidth border width
+     * @param {CanvasRenderingContext2D} options.ctx canvas context where rectangle would be drawn
+     */
     function Rect(_a) {
@@ -5,0 +18,0 @@ var x = _a.x, y = _a.y, w = _a.w, h = _a.h, r = _a.r, borderColor = _a.borderColor, _b = _a.background, background = _b === void 0 ? '#000' : _b, _c = _a.borderWidth, borderWidth = _c === void 0 ? 0 : _c, ctx = _a.ctx;

package.json

 {
   "name": "canvas-elements",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Collection of easy to use elements with HTML5 Canvas",
@@ -8,3 +8,4 @@ "main": "build/index.js",
     "build": "tsc",
-    "bundle": "npm run build && gulp bundle"
+    "bundle": "npm run build && gulp bundle",
+    "dev": "gulp dev"
   },
@@ -22,2 +23,3 @@ "repository": {
   "devDependencies": {
+    "browser-sync": "^2.26.3",
     "gulp": "^4.0.0",
@@ -24,0 +26,0 @@ "rollup": "^1.6.0",

README.md

@@ -96,3 +96,6 @@ # Canvas Elements
 | ctx | `CanvasRenderingContext2D` (required) | Context of the canvas to which the element must be drawn |
-| background| `string` (optional) | Fill color. Eg. `#6ddad0`, `rgba(20, 30, 40, 0.5)` |
+| background | `string` (optional) | Fill color. Eg. `#6ddad0`, `rgba(20, 30, 40, 0.5)` |
+| borderWidth | `number` (optional) | Thickness of the border |
+| borderColor | `string` (optional) | Color of the border |
+| rotation | `number` (optional) | Rotation of the element in radians. Center is geometric center for shapes and starting coordinates for `Text` element
 
@@ -105,4 +108,2 @@ ### Circle
 | r | `number` (required) | Radius of the circle |
-| borderColor | `string` (optional) | Color of the border around the circle |
-| borderWidth | `number` (optional) | Thickness of the border |
 
@@ -116,5 +117,3 @@ ### Rect (Rectangle)
 | h | `number` (required) | Height of the rectangle |
-| r | `number` (required) | Roundness of every corner. Same as `border-radius` CSS property |
-| borderColor | `string` (optional) | Color of the border around the rectangle |
-| borderWidth | `number` (optional) | Thickness of the border |
+| r | `number` (optional) | Roundness of every corner. Same as `border-radius` CSS property |
 
@@ -128,5 +127,14 @@ ### Ellipse
 | radiusY | `number` (required) | Vertical radius of the ellipse |
-| borderColor | `string` (optional) | Color of the border around the ellipse |
-| borderWidth | `number` (optional) | Thickness of the border |
 
+### Line
+Some exclusive options for Line element.
+
+|Option| Type | Description |
+|:--:| -- | -- |
+| x2 | `number` (optional) | Ending x coordinate of the line |
+| y2 | `number` (optional) | Ending y coordinate of the line |
+| r | `number` (optional) | Distance from (x, y) for Polar system |
+| angle | `number` (optional) | Angle from the horizontal axis in radians (Clockwise is positive) for Polar system |
+| lineCap | `string` (optional) | Style for the ends of the line. Takes values `square (default)`, `round`, `butt` |
+
 ### Text
@@ -156,2 +164,11 @@ Some exclusive options for Text element to render text.
 
+### To run the development server
+Playground is included in the project in `playground` directory. This is used to test features of Canvas Elements during development.
+**Do not commit changes in playground.**
+
+```bash
+npm run dev
+```
+This will start a live development server on port `3030`.
+
 ### To build the project
@@ -158,0 +175,0 @@ ```bash

No alert changes

Improved metrics

Total package byte prevSize

37787

increased by34.8%

Lines of code

224

increased by9.8%

Number of lines in readme file

181

increased by10.37%

Worsened metrics

Dev dependency count

7

increased by16.67%

Number of package files

12

decreased by-7.69%

No dependency changes