Initial commit
commit
935da294b4
@ -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",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "High-level canvas drawing primitives",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"gulp": "gulp"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "http://git.cryto.net/joepie91/canvassed.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"canvas",
|
||||||
|
"drawing",
|
||||||
|
"shapes"
|
||||||
|
],
|
||||||
|
"author": "Sven Slootweg",
|
||||||
|
"license": "WTFPL",
|
||||||
|
"dependencies": {
|
||||||
|
"checkit": "^0.7.0",
|
||||||
|
"default-value": "^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@joepie91/gulp-preset-es2015": "^1.0.1",
|
||||||
|
"babel-preset-es2015": "^6.6.0",
|
||||||
|
"gulp": "^3.9.1"
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,93 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const createEventEmitter = require("create-event-emitter");
|
||||||
|
const defaultValue = require("default-value");
|
||||||
|
|
||||||
|
const validateSync = require("./validate-sync");
|
||||||
|
|
||||||
|
module.exports = function createObject(options) {
|
||||||
|
validateSync(options, {
|
||||||
|
type: "required",
|
||||||
|
onRecalculateSize: "required"
|
||||||
|
});
|
||||||
|
|
||||||
|
let object = createEventEmitter(Object.assign({
|
||||||
|
isCached: false,
|
||||||
|
cacheCanvas: document.createElement("canvas"),
|
||||||
|
flipX: false,
|
||||||
|
flipY: false,
|
||||||
|
scaleX: 1,
|
||||||
|
scaleY: 1,
|
||||||
|
opacity: 1,
|
||||||
|
set: function setProperties(properties) {
|
||||||
|
Object.assign(this, properties);
|
||||||
|
|
||||||
|
if (properties.some(property => this.sizeBustingProperties.includes(property))) {
|
||||||
|
this.emit("bustedSize");
|
||||||
|
this.recalculateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (properties.some(property => this.cacheBustingProperties.includes(property))) {
|
||||||
|
this.emit("bustedCache");
|
||||||
|
this.isCached = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function renderObject(context, options = {}) {
|
||||||
|
if (this.isCached === false) {
|
||||||
|
this.renderToCache(this.cacheCanvas);
|
||||||
|
// TODO: render cached canvas
|
||||||
|
}
|
||||||
|
|
||||||
|
this.emit("rendering");
|
||||||
|
|
||||||
|
context.drawImage(this.cacheCanvas, defaultValue(options.x, 0), defaultValue(options.y, 0));
|
||||||
|
|
||||||
|
this.emit("rendered");
|
||||||
|
},
|
||||||
|
recalculateSize: function recalculateSize() {
|
||||||
|
this.emit("recalculatingSize");
|
||||||
|
|
||||||
|
let newSize = this.onRecalculateSize();
|
||||||
|
|
||||||
|
this.renderWidth = newSize.width * this.scaleX;
|
||||||
|
this.renderHeight = newSize.height * this.scaleY;
|
||||||
|
|
||||||
|
this.cacheCanvas.width = this.width;
|
||||||
|
this.cacheCanvas.height = this.height;
|
||||||
|
|
||||||
|
// TODO: bounding box?
|
||||||
|
|
||||||
|
this.emit("recalculatedSize");
|
||||||
|
},
|
||||||
|
renderToCache: function renderToCache(targetCanvas) {
|
||||||
|
let context = targetCanvas.getContext("2d", {
|
||||||
|
alpha: true
|
||||||
|
});
|
||||||
|
|
||||||
|
context.save();
|
||||||
|
|
||||||
|
this.emit("renderingToCache");
|
||||||
|
|
||||||
|
let scaleX = (this.flipX === false) ? this.scaleX : (0 - this.scaleX);
|
||||||
|
let scaleY = (this.flipY === false) ? this.scaleY : (0 - this.scaleY);
|
||||||
|
|
||||||
|
context.scale(scaleX, scaleY);
|
||||||
|
context.globalAlpha = this.opacity;
|
||||||
|
|
||||||
|
this.onRender(context);
|
||||||
|
|
||||||
|
this.emit("renderedToCache");
|
||||||
|
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
}, options, {
|
||||||
|
cacheBustingProperties: ["scaleX", "scaleY", "opacity", "flipX", "flipY"].concat(options.cacheBustingProperties),
|
||||||
|
sizeBustingProperties: ["scaleX", "scaleY"].concat(options.sizeBustingProperties)
|
||||||
|
}));
|
||||||
|
|
||||||
|
object.recalculateSize();
|
||||||
|
|
||||||
|
// ...
|
||||||
|
|
||||||
|
return object;
|
||||||
|
};
|
@ -0,0 +1,6 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
validateSync: require("./validate-sync"),
|
||||||
|
createObject: require("./create-object")
|
||||||
|
}
|
@ -0,0 +1,13 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const checkit = require("checkit");
|
||||||
|
|
||||||
|
module.exports = function(object, rules) {
|
||||||
|
let [error, validated] = checkit(rules).runSync(object);
|
||||||
|
|
||||||
|
if (error != null) {
|
||||||
|
throw error;
|
||||||
|
} else {
|
||||||
|
return validated;
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue