From f22004e4c148dfe952569f9883a30edbb0aa5bc7 Mon Sep 17 00:00:00 2001 From: Gar Date: Sat, 25 Feb 2017 14:46:44 -0500 Subject: [PATCH] feat(stuff): stuff --- dist/index.umd.js | 220 ++++++++++++++++++++++++++++++++ dist/index.umd.js.map | 1 + dist/index.umd.min.js | 2 + dist/index.umd.min.js.map | 1 + package.json | 1 - src/{Render.js => Handwrite.js} | 4 +- src/dev.js | 8 +- webpack.config.babel.js | 2 +- 8 files changed, 231 insertions(+), 8 deletions(-) create mode 100644 dist/index.umd.js create mode 100644 dist/index.umd.js.map create mode 100644 dist/index.umd.min.js create mode 100644 dist/index.umd.min.js.map rename src/{Render.js => Handwrite.js} (97%) diff --git a/dist/index.umd.js b/dist/index.umd.js new file mode 100644 index 0000000..70506eb --- /dev/null +++ b/dist/index.umd.js @@ -0,0 +1,220 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(); + else if(typeof define === 'function' && define.amd) + define([], factory); + else if(typeof exports === 'object') + exports["Freckles"] = factory(); + else + root["Freckles"] = factory(); +})(this, function() { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; +/******/ +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // identity function for calling harmony imports with the correct context +/******/ __webpack_require__.i = function(value) { return value; }; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 1); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +var PI = Math.PI; +// const color = '#ff0000' + +function Circle(ctx, x, y) { + var r = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 8; + var color = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '#ff0000'; + + ctx.beginPath(); + ctx.arc(x, y, r, 0, 2 * PI, false); + ctx.fillStyle = color; + ctx.fill(); +} + +exports.Circle = Circle; + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _Helper = __webpack_require__(0); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var Handwrite = function () { + function Handwrite(canvas, image) { + _classCallCheck(this, Handwrite); + + this.image = image; + this.canvasArt = canvas; + this.canvasMask = this.canvasArt.cloneNode(); + // document.body.appendChild(this.canvasMask) + this.ctxArt = this.canvasArt.getContext('2d'); + this.ctxMask = this.canvasMask.getContext('2d'); + + this.WIDTH = this.canvasArt.width; + this.HEIGHT = this.canvasArt.height; + } + + _createClass(Handwrite, [{ + key: 'draw', + value: function draw(points, options) { + var _this = this; + + this.clear(); + var defaultOptions = { timeScale: 1, radius: 6 }; + var o = _extends({}, defaultOptions, options); + var timeScale = o.timeScale, + radius = o.radius; + + this.tl = new TimelineMax(); + var tlDraw = new TimelineMax({ onComplete: this.onDone.bind(this) }); + tlDraw.timeScale(timeScale); + + var size = 0; + points.map(function (item) { + tlDraw.addCallback(function () { + (0, _Helper.Circle)(_this.ctxMask, item.x, item.y, radius); + size++; + }, "+=.01"); + }); + + this.tl.add(tlDraw); + + this.tl.add('final'); + // this.tl.to(this.canvasArt, .001, {opacity:0}, 'final') + // this.tl.to(this.image, .001, {opacity:1}, 'final') + + + this.keepRendering = true; + this.render(); + return this.tl; + } + }, { + key: 'clear', + value: function clear() { + this.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT); + this.ctxMask.clearRect(0, 0, this.WIDTH, this.HEIGHT); + } + }, { + key: 'onDone', + value: function onDone() { + // this.keepRendering = false + // this.drawArt() + } + }, { + key: 'drawArt', + value: function drawArt() { + + this.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT); + this.ctxArt.drawImage(this.canvasMask, 0, 0); + + this.ctxArt.save(); + + this.ctxArt.globalCompositeOperation = 'source-in'; + + this.ctxArt.drawImage(this.image, 0, 0); + + this.ctxArt.restore(); + } + }, { + key: 'render', + value: function render() { + + this.drawArt(); + + if (!this.keepRendering) { + return; + } + requestAnimationFrame(this.render.bind(this)); + } + }]); + + return Handwrite; +}(); + +exports.default = Handwrite; + +/***/ }) +/******/ ]); +}); +//# sourceMappingURL=index.umd.js.map \ No newline at end of file diff --git a/dist/index.umd.js.map b/dist/index.umd.js.map new file mode 100644 index 0000000..52a02e1 --- /dev/null +++ b/dist/index.umd.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap a29a0e7411fdeb7e27bb","webpack:///./src/Helper.js","webpack:///./src/Handwrite.js"],"names":["PI","Math","Circle","ctx","x","y","r","color","beginPath","arc","fillStyle","fill","Handwrite","canvas","image","canvasArt","canvasMask","cloneNode","ctxArt","getContext","ctxMask","WIDTH","width","HEIGHT","height","points","options","clear","defaultOptions","timeScale","radius","o","tl","TimelineMax","tlDraw","onComplete","onDone","bind","size","map","addCallback","item","add","keepRendering","render","clearRect","drawImage","save","globalCompositeOperation","restore","drawArt","requestAnimationFrame"],"mappings":"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","file":"index.umd.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Freckles\"] = factory();\n\telse\n\t\troot[\"Freckles\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap a29a0e7411fdeb7e27bb","const PI = Math.PI\n// const color = '#ff0000'\n\nfunction Circle(ctx, x, y, r=8, color='#ff0000') {\n\tctx.beginPath();\n\tctx.arc(x, y, r, 0, 2 * PI, false);\n\tctx.fillStyle = color;\n\tctx.fill();\n}\n\nexport {Circle}\n\n\n// WEBPACK FOOTER //\n// ./src/Helper.js","import {Circle} from './Helper'\n\nclass Handwrite {\n\tconstructor(canvas, image) {\n\n\t\tthis.image = image\n\t\tthis.canvasArt = canvas\n\t\tthis.canvasMask = this.canvasArt.cloneNode()\n\t\t// document.body.appendChild(this.canvasMask)\n\t\tthis.ctxArt = this.canvasArt.getContext('2d')\n\t\tthis.ctxMask = this.canvasMask.getContext('2d')\n\n\t\tthis.WIDTH = this.canvasArt.width\n\t\tthis.HEIGHT = this.canvasArt.height\n\t}\n\n\tdraw(points, options) {\n\t\tthis.clear()\n\t\tconst defaultOptions = {timeScale:1, radius:6}\n\t\tconst o = {...defaultOptions, ...options}\n\t\tconst {timeScale, radius} = o\n\t\tthis.tl = new TimelineMax()\n\t\tconst tlDraw = new TimelineMax({onComplete:this.onDone.bind(this)})\n\t\ttlDraw.timeScale(timeScale)\n\n\t\tlet size = 0\n\t\tpoints.map(item=>{\n\t\t\ttlDraw.addCallback(()=>{\n\t\t\t\tCircle(this.ctxMask, item.x, item.y, radius)\n\t\t\t\tsize++\n\t\t\t}, \"+=.01\")\n\t\t})\n\n\t\tthis.tl.add(tlDraw)\n\n\t\tthis.tl.add('final')\n\t\t// this.tl.to(this.canvasArt, .001, {opacity:0}, 'final')\n\t\t// this.tl.to(this.image, .001, {opacity:1}, 'final')\n\n\n\t\tthis.keepRendering = true\n\t\tthis.render()\n\t\treturn this.tl\n\n\t}\n\n\tclear() {\n\t\tthis.ctxArt.clearRect(0,0,this.WIDTH, this.HEIGHT)\n\t\tthis.ctxMask.clearRect(0,0,this.WIDTH, this.HEIGHT)\n\t}\n\n\n\tonDone() {\n\t\t// this.keepRendering = false\n\t\t// this.drawArt()\n\t}\n\n\n\tdrawArt() {\n\n\t\tthis.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT)\n\t\tthis.ctxArt.drawImage(this.canvasMask, 0, 0);\n\n\t\tthis.ctxArt.save();\n\n\t\tthis.ctxArt.globalCompositeOperation = 'source-in';\n\n\t\tthis.ctxArt.drawImage(this.image, 0, 0);\n\n\t\tthis.ctxArt.restore();\n\n\t}\n\n\trender() {\n\n\t\tthis.drawArt()\n\n\t\tif(!this.keepRendering) {\n\t\t\treturn\n\t\t}\n\t\trequestAnimationFrame(this.render.bind(this))\n\n\t}\n}\n\nexport default Handwrite\n\n\n// WEBPACK FOOTER //\n// ./src/Handwrite.js"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/index.umd.min.js b/dist/index.umd.min.js new file mode 100644 index 0000000..3ae5477 --- /dev/null +++ b/dist/index.umd.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Freckles=e():t.Freckles=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,n){"use strict";function r(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:8,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"#ff0000";t.beginPath(),t.arc(e,n,r,0,2*i,!1),t.fillStyle=a,t.fill()}Object.defineProperty(e,"__esModule",{value:!0});var i=Math.PI;e.Circle=r},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=Object.assign||function(t){for(var e=1;e 3 && arguments[3] !== undefined ? arguments[3] : 8;\n\tvar color = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '#ff0000';\n\n\tctx.beginPath();\n\tctx.arc(x, y, r, 0, 2 * PI, false);\n\tctx.fillStyle = color;\n\tctx.fill();\n}\n\nexports.Circle = Circle;\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _Helper = __webpack_require__(0);\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar Handwrite = function () {\n\tfunction Handwrite(canvas, image) {\n\t\t_classCallCheck(this, Handwrite);\n\n\t\tthis.image = image;\n\t\tthis.canvasArt = canvas;\n\t\tthis.canvasMask = this.canvasArt.cloneNode();\n\t\t// document.body.appendChild(this.canvasMask)\n\t\tthis.ctxArt = this.canvasArt.getContext('2d');\n\t\tthis.ctxMask = this.canvasMask.getContext('2d');\n\n\t\tthis.WIDTH = this.canvasArt.width;\n\t\tthis.HEIGHT = this.canvasArt.height;\n\t}\n\n\t_createClass(Handwrite, [{\n\t\tkey: 'draw',\n\t\tvalue: function draw(points, options) {\n\t\t\tvar _this = this;\n\n\t\t\tthis.clear();\n\t\t\tvar defaultOptions = { timeScale: 1, radius: 6 };\n\t\t\tvar o = _extends({}, defaultOptions, options);\n\t\t\tvar timeScale = o.timeScale,\n\t\t\t radius = o.radius;\n\n\t\t\tthis.tl = new TimelineMax();\n\t\t\tvar tlDraw = new TimelineMax({ onComplete: this.onDone.bind(this) });\n\t\t\ttlDraw.timeScale(timeScale);\n\n\t\t\tvar size = 0;\n\t\t\tpoints.map(function (item) {\n\t\t\t\ttlDraw.addCallback(function () {\n\t\t\t\t\t(0, _Helper.Circle)(_this.ctxMask, item.x, item.y, radius);\n\t\t\t\t\tsize++;\n\t\t\t\t}, \"+=.01\");\n\t\t\t});\n\n\t\t\tthis.tl.add(tlDraw);\n\n\t\t\tthis.tl.add('final');\n\t\t\t// this.tl.to(this.canvasArt, .001, {opacity:0}, 'final')\n\t\t\t// this.tl.to(this.image, .001, {opacity:1}, 'final')\n\n\n\t\t\tthis.keepRendering = true;\n\t\t\tthis.render();\n\t\t\treturn this.tl;\n\t\t}\n\t}, {\n\t\tkey: 'clear',\n\t\tvalue: function clear() {\n\t\t\tthis.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT);\n\t\t\tthis.ctxMask.clearRect(0, 0, this.WIDTH, this.HEIGHT);\n\t\t}\n\t}, {\n\t\tkey: 'onDone',\n\t\tvalue: function onDone() {\n\t\t\t// this.keepRendering = false\n\t\t\t// this.drawArt()\n\t\t}\n\t}, {\n\t\tkey: 'drawArt',\n\t\tvalue: function drawArt() {\n\n\t\t\tthis.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT);\n\t\t\tthis.ctxArt.drawImage(this.canvasMask, 0, 0);\n\n\t\t\tthis.ctxArt.save();\n\n\t\t\tthis.ctxArt.globalCompositeOperation = 'source-in';\n\n\t\t\tthis.ctxArt.drawImage(this.image, 0, 0);\n\n\t\t\tthis.ctxArt.restore();\n\t\t}\n\t}, {\n\t\tkey: 'render',\n\t\tvalue: function render() {\n\n\t\t\tthis.drawArt();\n\n\t\t\tif (!this.keepRendering) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\trequestAnimationFrame(this.render.bind(this));\n\t\t}\n\t}]);\n\n\treturn Handwrite;\n}();\n\nexports.default = Handwrite;\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// index.umd.min.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap d0b231376c20741696f8","const PI = Math.PI\n// const color = '#ff0000'\n\nfunction Circle(ctx, x, y, r=8, color='#ff0000') {\n\tctx.beginPath();\n\tctx.arc(x, y, r, 0, 2 * PI, false);\n\tctx.fillStyle = color;\n\tctx.fill();\n}\n\nexport {Circle}\n\n\n// WEBPACK FOOTER //\n// ./src/Helper.js","import {Circle} from './Helper'\n\nclass Handwrite {\n\tconstructor(canvas, image) {\n\n\t\tthis.image = image\n\t\tthis.canvasArt = canvas\n\t\tthis.canvasMask = this.canvasArt.cloneNode()\n\t\t// document.body.appendChild(this.canvasMask)\n\t\tthis.ctxArt = this.canvasArt.getContext('2d')\n\t\tthis.ctxMask = this.canvasMask.getContext('2d')\n\n\t\tthis.WIDTH = this.canvasArt.width\n\t\tthis.HEIGHT = this.canvasArt.height\n\t}\n\n\tdraw(points, options) {\n\t\tthis.clear()\n\t\tconst defaultOptions = {timeScale:1, radius:6}\n\t\tconst o = {...defaultOptions, ...options}\n\t\tconst {timeScale, radius} = o\n\t\tthis.tl = new TimelineMax()\n\t\tconst tlDraw = new TimelineMax({onComplete:this.onDone.bind(this)})\n\t\ttlDraw.timeScale(timeScale)\n\n\t\tlet size = 0\n\t\tpoints.map(item=>{\n\t\t\ttlDraw.addCallback(()=>{\n\t\t\t\tCircle(this.ctxMask, item.x, item.y, radius)\n\t\t\t\tsize++\n\t\t\t}, \"+=.01\")\n\t\t})\n\n\t\tthis.tl.add(tlDraw)\n\n\t\tthis.tl.add('final')\n\t\t// this.tl.to(this.canvasArt, .001, {opacity:0}, 'final')\n\t\t// this.tl.to(this.image, .001, {opacity:1}, 'final')\n\n\n\t\tthis.keepRendering = true\n\t\tthis.render()\n\t\treturn this.tl\n\n\t}\n\n\tclear() {\n\t\tthis.ctxArt.clearRect(0,0,this.WIDTH, this.HEIGHT)\n\t\tthis.ctxMask.clearRect(0,0,this.WIDTH, this.HEIGHT)\n\t}\n\n\n\tonDone() {\n\t\t// this.keepRendering = false\n\t\t// this.drawArt()\n\t}\n\n\n\tdrawArt() {\n\n\t\tthis.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT)\n\t\tthis.ctxArt.drawImage(this.canvasMask, 0, 0);\n\n\t\tthis.ctxArt.save();\n\n\t\tthis.ctxArt.globalCompositeOperation = 'source-in';\n\n\t\tthis.ctxArt.drawImage(this.image, 0, 0);\n\n\t\tthis.ctxArt.restore();\n\n\t}\n\n\trender() {\n\n\t\tthis.drawArt()\n\n\t\tif(!this.keepRendering) {\n\t\t\treturn\n\t\t}\n\t\trequestAnimationFrame(this.render.bind(this))\n\n\t}\n}\n\nexport default Handwrite\n\n\n// WEBPACK FOOTER //\n// ./src/Handwrite.js"],"sourceRoot":""} \ No newline at end of file diff --git a/package.json b/package.json index 9ab5687..5c320b3 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "build:main": "babel src", "build:umd": "webpack --config webpack.config.babel.js --output-filename index.umd.js", "build:umd.min": "webpack --config webpack.config.babel.js --output-filename index.umd.min.js -p", - "build:utilities": "webpack --config webpack.config.utilities.babel.js --output-filename utilities.umd.min.js -p", "semantic-release": "semantic-release pre && npm publish && semantic-release post" }, "repository": { diff --git a/src/Render.js b/src/Handwrite.js similarity index 97% rename from src/Render.js rename to src/Handwrite.js index 3f27a5d..c4f05cf 100644 --- a/src/Render.js +++ b/src/Handwrite.js @@ -1,6 +1,6 @@ import {Circle} from './Helper' -class Render { +class Handwrite { constructor(canvas, image) { this.image = image @@ -83,4 +83,4 @@ class Render { } } -export default Render \ No newline at end of file +export default Handwrite \ No newline at end of file diff --git a/src/dev.js b/src/dev.js index 9f15d56..24132e3 100644 --- a/src/dev.js +++ b/src/dev.js @@ -1,6 +1,6 @@ import DragFile from './DragFile.js' import Capture from './Capture.js' -import Render from './Render.js' +import Handwrite from './Handwrite.js' const dragTarget = document.getElementById('dragTarget'); @@ -24,7 +24,7 @@ const startOver = document.getElementById('startOver'); class Dev { constructor() { - this.render = null + brushSize.addEventListener('change', this.brushUpdate.bind(this)) this.capture = new Capture(captureCanvas, brushSize.value) @@ -72,12 +72,12 @@ class Dev { this.capture.signals.pointsUpdated.add(this.pointsUpdated) - this.render = new Render(renderCanvas, renderImage) + this.handwrite = new Handwrite(renderCanvas, renderImage) } draw(points) { - this.render.draw(points, {radius:this.capture.radius}) + this.handwrite.draw(points, {radius:this.capture.radius}) } diff --git a/webpack.config.babel.js b/webpack.config.babel.js index dd432ce..e8c2b9c 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -3,7 +3,7 @@ import {join} from 'path' const include = join(__dirname, 'src') export default { - entry: './src/FrecklesHack.js', + entry: './src/Handwrite.js', output: { path: join(__dirname, 'dist'), libraryTarget: 'umd',