Initial commit
commit
a1fbb7a4d5
@ -0,0 +1,2 @@
|
||||
/node_modules/
|
||||
/lib/
|
@ -0,0 +1 @@
|
||||
/node_modules/
|
@ -0,0 +1,37 @@
|
||||
# packagename
|
||||
|
||||
packagedescription
|
||||
|
||||
## License
|
||||
|
||||
[WTFPL](http://www.wtfpl.net/txt/copying/) or [CC0](https://creativecommons.org/publicdomain/zero/1.0/), whichever you prefer. A donation and/or attribution are appreciated, but not required.
|
||||
|
||||
## Donate
|
||||
|
||||
Maintaining open-source projects takes a lot of time, and the more donations I receive, the more time I can dedicate to open-source. If this module is useful to you, consider [making a donation](http://cryto.net/~joepie91/donate.html)!
|
||||
|
||||
You can donate using Bitcoin, PayPal, Flattr, cash-in-mail, SEPA transfers, and pretty much anything else. Thank you!
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests welcome. Please make sure your modifications are in line with the overall code style, and ensure that you're editing the files in `src/`, not those in `lib/`.
|
||||
|
||||
Build tool of choice is `gulp`; simply run `gulp` while developing, and it will watch for changes.
|
||||
|
||||
Be aware that by making a pull request, you agree to release your modifications under the licenses stated above.
|
||||
|
||||
## Usage
|
||||
|
||||
usagetext
|
||||
|
||||
```javascript
|
||||
usagecode
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### functionName(arg)
|
||||
|
||||
functiondescription
|
||||
|
||||
* __arg__: argumentdescription
|
@ -0,0 +1,18 @@
|
||||
var gulp = require("gulp");
|
||||
var presetES2015 = require("@joepie91/gulp-preset-es2015");
|
||||
|
||||
var source = ["src/**/*.js"]
|
||||
|
||||
gulp.task('babel', function() {
|
||||
return gulp.src(source)
|
||||
.pipe(presetES2015({
|
||||
basePath: __dirname
|
||||
}))
|
||||
.pipe(gulp.dest("lib/"));
|
||||
});
|
||||
|
||||
gulp.task("watch", function () {
|
||||
gulp.watch(source, ["babel"]);
|
||||
});
|
||||
|
||||
gulp.task("default", ["babel", "watch"]);
|
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = require("./lib");
|
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "canvassed-rectangle",
|
||||
"version": "1.0.0",
|
||||
"description": "Rectangle shape for `canvassed`",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"gulp": "gulp"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://git.cryto.net/joepie91/canvassed-rectangle.git"
|
||||
},
|
||||
"keywords": [
|
||||
"canvas",
|
||||
"drawing",
|
||||
"shape",
|
||||
"rectangle",
|
||||
"canvassed"
|
||||
],
|
||||
"author": "Sven Slootweg",
|
||||
"license": "WTFPL",
|
||||
"dependencies": {
|
||||
},
|
||||
"devDependencies": {
|
||||
"@joepie91/gulp-preset-es2015": "^1.0.1",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"gulp": "^3.9.1"
|
||||
}
|
||||
}
|
@ -0,0 +1,42 @@
|
||||
'use strict';
|
||||
|
||||
const canvassed = require("canvassed");
|
||||
|
||||
module.exports = function createRectangle(options = {}) {
|
||||
canvassed.validateSync(options, { // FIXME: Type/value validation?
|
||||
width: "required",
|
||||
height: "required"
|
||||
});
|
||||
|
||||
let rectangle = canvassed.createObject(Object.assign({
|
||||
type: "rectangle",
|
||||
cacheBustingProperties: ["fillColor", "strokeColor", "strokeWidth"],
|
||||
sizeBustingProperties: ["width", "height"],
|
||||
fillColor: "black",
|
||||
strokeColor: "red",
|
||||
strokeWidth: 0,
|
||||
onRender: function onRender(context) {
|
||||
context.fillStyle = this.fillColor;
|
||||
context.fillRect(0, 0, this.width, this.height);
|
||||
|
||||
if (this.strokeWidth > 0) {
|
||||
let offsetX = this.strokeWidth / 2;
|
||||
let offsetY = this.strokeWidth / 2;
|
||||
let adjustedWidth = this.width - this.strokeWidth;
|
||||
let adjustedHeight = this.height - this.strokeWidth;
|
||||
|
||||
context.strokeStyle = this.strokeColor;
|
||||
context.lineWidth = this.strokeWidth;
|
||||
context.strokeRect(offsetX, offsetY, adjustedWidth, adjustedHeight);
|
||||
}
|
||||
},
|
||||
onRecalculateSize: function onRecalculateSize() {
|
||||
return {
|
||||
width: this.width,
|
||||
height: this.height
|
||||
}
|
||||
}
|
||||
}, options));
|
||||
|
||||
return rectangle;
|
||||
}
|
Loading…
Reference in New Issue