sample-editor-view
Version:
A Canvas Renderer / Editor UI for AudioBuffers
1 lines • 22.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("SampleEditorView",[],e):"object"==typeof exports?exports.SampleEditorView=e():t.SampleEditorView=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,o){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,r){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),i=r(3),s=function(t){return t&&t.__esModule?t:{default:t}}(i),a={width:640,height:320,hZoom:1,visible:!0,duration:"auto",color:"#fff",background:"#333",buffer:null},u=function(){function t(e,r){var n=this;o(this,t),this.props=new s.default(a,e,r),this.props.$on("change",function(t){n.dirty=!0}),this.dirty=!0,this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.ctx.imageSmoothingEnabled=!1}return n(t,[{key:"renderIfDirty",value:function(){return this.dirty?(this.clear(),this.props.visible?this.render():this):this}},{key:"clear",value:function(){this.canvas.width=this.props.width,this.canvas.height=this.props.height}},{key:"duration",get:function(){return"auto"===this.props.duration?this.props.buffer?this.props.buffer.duration:0:this.props.duration}},{key:"displayDuration",get:function(){return this.duration/this.props.hZoom}}]),t}();e.default=u,t.exports=e.default},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=r(2),n=function(t){return t&&t.__esModule?t:{default:t}}(o);window.SampleEditorView=n.default,e.default=n.default,t.exports=e.default},function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),u=r(0),p=o(u),l=r(5),f=o(l),h=r(6),c=o(h),d=r(7),v=o(d),y=r(8),b=o(y),m={hZoom:1,vZoom:2,offset:0,background:"#ddd",color:"#222",selectColor:"#ddd",selectBackground:"#222",width:640,height:320,channel:0,resolution:1,startPosition:42.1,uiZoomStickiness:.1,duration:"auto",visible:!0,loop:!0,loopStart:0,loopEnd:1,selectStart:0,selectEnd:0,quantize:.0125,buffer:null},g=function(t){function e(t){n(this,e);var r=i(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,m,t));return r.waveForm=new f.default({}),r.ruler=new c.default({}),r.startMarker=new v.default({}),r.zoomMarker=new v.default({visible:!1}),r.loopLengthMarker=new b.default({visible:!0}),r.loopStartMarker=new v.default({visible:!0}),r.loopEndMarker=new v.default({dir:-1,visible:!0}),r.waveForm.props.$link(r.props),r.ruler.props.$link(r.props,["hZoom","width","offset","quantize","buffer"]).$map(r.props,{height:function(t){return t/16}}),r.zoomMarker.props.$link(r.props,["height"]),r.loopEndMarker.props.$link(r.props,["height"]).$map(r.props,{width:function(t){return t/64}}),r.loopStartMarker.props.$link(r.props,["height"]).$map(r.props,{width:function(t){return t/64}}),r.loopLengthMarker.props.$map(r.props,{height:function(t){return t/32}}),r.startMarker.props.$link(r.props,["height"]).$map(r.props,{width:function(t){return t/64}}),r.render=r.render.bind(r),r._setupUI(),r.props.$on("defered_change",r.renderIfDirty,r),r.zoomMarker.props.$observe("visible",r.renderIfDirty,r),r.canvas.classList.add("SampleEditorView"),r}return s(e,t),a(e,[{key:"render",value:function(){var t=this.ctx;t.drawImage(this.waveForm.renderIfDirty().canvas,0,0),t.drawImage(this.zoomMarker.renderIfDirty().canvas,this.zoomMarker.position,0),t.drawImage(this.ruler.renderIfDirty().canvas,0,0),t.drawImage(this.startMarker.renderIfDirty().canvas,this._timeToPixel(this.props.startPosition),10),this.loopLengthMarker.props.width=this._timeToPixel(this.props.loopEnd)-this._timeToPixel(this.props.loopStart),t.drawImage(this.loopLengthMarker.renderIfDirty().canvas,this._timeToPixel(this.props.loopStart),20),t.drawImage(this.loopStartMarker.renderIfDirty().canvas,this._timeToPixel(this.props.loopStart),20),t.drawImage(this.loopEndMarker.renderIfDirty().canvas,this._timeToPixel(this.props.loopEnd)-this.loopEndMarker.props.width,20)}},{key:"_timeToPixel",value:function(t){t-=this.props.offset;var e=t/this.displayDuration*this.props.width;return Math.round(e)}},{key:"_pixelToTime",value:function(t){return t/this.props.width*this.displayDuration}},{key:"_getLoopRect",value:function(){return{x1:this._timeToPixel(this.props.loopStart),y1:20,x2:this._timeToPixel(this.props.loopEnd),y2:this.props.height-20}}},{key:"_hitTest",value:function(t){if(t.y<this.ruler.props.height){if(this.props.loop){var e=this._getLoopRect();if(t.y>=e.y1&&t.y<e.y2){if(Math.abs(t.x-e.x1)<5)return this.loopStartMarker;if(Math.abs(t.x-e.x2)<5)return this.loopEndMarker;if(t.x>=e.x1&&t.x<e.x2)return this.loopLengthMarker}}if(t.x)return this.ruler}return this.waveForm}},{key:"_updateCursor",value:function(t,e){t===this.ruler?this.canvas.style.cursor="pointer":t===this.loopStartMarker?this.canvas.style.cursor="e-resize":t===this.loopEndMarker?this.canvas.style.cursor="w-resize":t===this.loopLengthMarker?this.canvas.style.cursor="move":t===this.waveForm&&e.altKey?this.canvas.style.cursor="zoom-in":this.canvas.style.cursor="auto"}},{key:"_setupUI",value:function(){var t=this,e=!1,r=0,o=0,n=null,i=!1,s={x:0,y:0},a=0,u=function(e){var r=t.canvas.getBoundingClientRect(),o=t.pixelRatio;return{rect:r,x:(e.pageX-r.left)*o.x,y:(e.pageY-r.top)*o.y,movementX:e.movementX?e.movementX*o.x:0,movementY:e.movementY?e.movementY*o.y:0}},p=function(e){var r=e.x,o=e.y;if(!t.props.quantize)return{x:r,y:o};var n=t.props.offset/t.displayDuration*t.props.width,i=t.props.quantize/t.displayDuration*t.props.width;return r+=n,r=Math.round(r/i)*i,r-=n,{x:r,y:o}};this.canvas.addEventListener("mousedown",function(l){e=!0,r=null,o=0,i=!1;var f=u(l);n=t._hitTest(f),t._updateCursor(n,l),n===t.waveForm&&l.altKey&&(i=!0,t.zoomMarker.position=f.x,t.zoomMarker.props.visible=!0,t.canvas.requestPointerLock()),i||(f=p(f)),a=t._pixelToTime(f.x)+t.props.offset,!i&&(t.props.selectEnd=t.props.selectStart=a),s=f}),document.addEventListener("mouseup",function(){e=!1,i&&(t.zoomMarker.props.visible=!1,document.exitPointerLock(),i=!1)}),document.addEventListener("mousemove",function(l){if(e){var f=u(l),h=f.x,c=f.y,d=f.movementX,v=f.movementY,y=f.rect,b={x:h,y:c};i||(b.x=Math.max(0,Math.min(t.props.width,b.x)),b=p(b),n===t.ruler&&t.updateStartPos(b.x));var m=(i&&void 0!==d?d:b.x-s.x)/y.width,g=(i&&void 0!==v?v:b.y-s.y)/y.height,_=t._pixelToTime(b.x)+t.props.offset,k=t._pixelToTime(m)*t.props.width/t.pixelRatio.x;if(Object.assign(s,b),i){null===r&&(r=b.y),r=b.y,o+=Math.abs(g);var w=Math.max(1,t.props.hZoom+g*t.props.hZoom);if(o>t.props.uiZoomStickiness){var x=w-t.props.hZoom;if(0!==x&&w>=.5){var M=x/t.props.hZoom,P=b.x/(y.width*t.pixelRatio.x);t.props.hZoom=w,t.offset+=M*P*t.displayDuration}}t.offset-=10*m/w}else n===t.waveForm?_<a?t.updateSelection(t.props.selectStart+k,a):t.updateSelection(a,t.props.selectEnd+k):n===t.ruler?b.x>=0&&b.x<y.width?t.updateStartPos(b.x):b.x<0?t.offset=Math.max(0,t.props.offset-Math.abs(.1*b.x)):t.offset=Math.min(t.duration,t.props.offset+.1*(b.x-y.width)):n===t.loopLengthMarker?t.updateLoopPos(t.props.loopStart+k,t.props.loopEnd+k):n===t.loopStartMarker?_<=t.props.loopEnd?t.updateLoopPos(t.props.loopStart+k,t.props.loopEnd):t.updateLoopPos(t.props.loopEnd,t.props.loopEnd):n===t.loopEndMarker&&(_>=t.props.loopStart?t.updateLoopPos(t.props.loopStart,t.props.loopEnd+k):t.updateLoopPos(t.props.loopStart,t.props.loopStart))}else t._updateCursor(t._hitTest(u(l)),l)})}},{key:"updateSelection",value:function(t,e){t=Math.max(0,t),e=Math.min(this.duration,e),this.props.selectStart=t,this.props.selectEnd=e}},{key:"updateLoopPos",value:function(t,e){if(t<0){var r=Math.abs(t);e=Math.min(this.duration,e+r),t+=r}if(e>this.duration){var o=this.duration-e;t=Math.max(0,t+o),e+=o}t>e&&(t=e),t>=0&&e<=this.duration&&(this.props.loopStart=t,this.props.loopEnd=e)}},{key:"updateStartPos",value:function(t){var e=t/this.canvas.width*this.duration/this.props.hZoom+this.props.offset;this.props.startPosition=e}},{key:"offset",get:function(){return this.props.offset},set:function(t){this.props.offset=Math.max(0,Math.min(this.duration-this.displayDuration,t))}},{key:"buffer",get:function(){return this.props.buffer},set:function(t){this.props.buffer=t}},{key:"pixelRatio",get:function(){var t=this.canvas.getBoundingClientRect();return{x:this.props.width/t.width,y:this.props.height/t.height}}}]),e}(p.default);e.default=g,t.exports=e.default},function(t,e,r){"use strict";function o(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),s=r(4),a=function(t){return t&&t.__esModule?t:{default:t}}(s),u=function(){function t(){for(var e=this,r=arguments.length,o=Array(r),i=0;i<r;i++)o[i]=arguments[i];n(this,t),o=o.filter(function(t){return!!t});var s=o.reduce(function(t,e){return Object.assign(t,e)},{});Object.keys(s).forEach(function(t){Object.defineProperty(e,t,{get:function(){return s[t]},set:function(e){var r=s[t];s[t]=e,this.$triggerDeferred("defered_change"),this.$trigger("change",t,e),this.$trigger("change:"+t,e,r)}})}),this.$privateProps=s,this.$keys=Object.keys(s)}return i(t,[{key:"$observe",value:function(t,e){var r=this,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this;if(Array.isArray(t))return t.forEach(function(t){return r.$observe(t,e,o)}),this;if(void 0===this.$privateProps[t])throw new Error("Can' observe undefined prop "+t);return e.call(o,this.$privateProps[t]),this.$on("change:"+t,e,o),this}},{key:"$unobserve",value:function(t,e,r){var o=this;return Array.isArray(t)?(t.forEach(function(t){return o.$unobserve(t,e,r)}),this):(this.$off("change:"+t,e,r),this)}},{key:"$bind",value:function(t){for(var e=this,r=arguments.length,o=Array(r>1?r-1:0),n=1;n<r;n++)o[n-1]=arguments[n];return o.forEach(function(r){e.$observe(r,function(e){t[r]=e})}),this}},{key:"$unbind",value:function(t){for(var e=this,r=arguments.length,o=Array(r>1?r-1:0),n=1;n<r;n++)o[n-1]=arguments[n];return o&&o.length?o.forEach(function(r){e.$unobserve(r,null,t)}):this.$off(null,null,t),this}},{key:"$map",value:function(t,e){var r=this;return Object.keys(e).forEach(function(o){t.$observe(o,function(t){r[o]=e[o](t)})}),this}},{key:"$link",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return e=e||Object.keys(this.$privateProps).filter(function(e){return void 0!==t.$privateProps[e]}),t.$bind.apply(t,[this].concat(o(e))),this}},{key:"$unlink",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return e=e||Object.keys(this.$privateProps).filter(function(e){return void 0!==t.$privateProps[e]}),t.$unbind.apply(t,[this].concat(o(Object.keys(this.$privateProps)))),this}}]),t}();Object.assign(u.prototype,a.default),e.default=u,t.exports=e.default},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={$on:function(t,e,r){return this._events=this._events||{},(this._events[t]||(this._events[t]=[])).push({callback:e,ctxArg:r,context:r||this}),this},$off:function(t,e,r){var o=this,n=void 0,i=void 0,s=void 0,a=void 0;if(!this._events||!this._events[t])return this;t||e||r||(this._events={});var u=this._events[t];if(u){if(a=[],e&&r)for(n=0,i=u.length;n<i;n++)s=u[n],e!==s.callback&&r!==s.ctxArg&&a.push(u[n]);else if(e)for(n=0,i=u.length;n<i;n++)s=u[n],e!==s.callback&&a.push(u[n]);else if(r)for(n=0,i=u.length;n<i;n++)s=u[n],r!==s.ctxArg&&a.push(u[n]);this._events[t]=a}else(r||e)&&Object.keys(this._events).forEach(function(t){o.$off(t,e,r)});return this._events[t].length||delete this._events[t],this},$trigger:function(t){if(!this._events||!this._events[t])return this;var e=void 0,r=void 0,o=void 0,n=void 0;for(n=this._events[t],r=[].splice.call(arguments,1),e=n.length-1;e>=0;e--)o=n[e],o.callback.apply(o.context,r);return this},$triggerDeferred:function(t){var e=this;this._changeBatchTimers=this._changeBatchTimers||{},null==this._changeBatchTimers[t]&&(this._changeBatchTimers[t]=setTimeout(function(){e.$trigger(t),e._changeBatchTimers[t]=null},50))}},t.exports=e.default},function(t,e,r){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e,r){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,n=arguments.length>4&&void 0!==arguments[4]&&arguments[4];arguments[5];o=Math.max(1,o),r=Math.min(t.length,r),r=Math.min(e+100,r);for(var i=0,s=e;s<r;s+=o)i+=n?Math.abs(t[s]):t[s];return i/(r-e)*o}Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),u=r(0),p=function(t){return t&&t.__esModule?t:{default:t}}(u),l={vZoom:1,offset:0,background:"#ddd",color:"#222",selectColor:"#ddd",selectBackground:"#222",width:640,height:320,selectStart:0,selectEnd:0,channel:0,resolution:1},f=function(t){function e(t){return o(this,e),n(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,l,t))}return i(e,t),a(e,[{key:"render",value:function(){var t=this,e=this.props.buffer;if(!e)return this;var r=this.props.width,o=this.props.height,n=this.ctx;n.fillStyle=this.props.background,n.fillRect(0,0,r,o);var i=e.getChannelData(this.props.channel),a=i.length/this.props.hZoom,u=Math.min(r/this.props.resolution,a),p=a/u,l=r/u,f=o/2,h=this.props.offset*e.sampleRate;n.fillStyle=this.props.color;var c=p>l;n.beginPath(),n.moveTo(0,f),n.lineTo(r,f),n.stroke(),n.moveTo(0,f);var d=function(e,r,a,d){e=Math.max(0,Math.min(e,u)),r=Math.max(0,Math.min(r,u));var v=0,y=[];n.beginPath();var b=e*l;if(d){var m=(r-e)*l;n.fillStyle=d,n.fillRect(b,0,m,o)}for(var g=e;g<r;g++){var _=Math.floor((g+1)*p+h);if(c){var k=_>=0?s(i,v,_,1,!0):0;if(k>=0){var w=k*t.props.vZoom*f;g===e&&n.moveTo(b,f-w),n.lineTo(b,f-w),y.push(b,w)}}else{var x=_>=0?s(i,v,_,1,!1):0,M=x*t.props.vZoom*f;g===e&&n.moveTo(0,f-M),n.lineTo(b,f-M)}b+=l,v=_}if(c){for(var P=y.length-1;P>0;P-=2){var O=y[P-1],E=y[P];n.lineTo(O,f+E)}n.fillStyle=a,n.fill()}else n.strokeStyle=a,n.stroke()};if(this.props.selectStart!==this.props.selectEnd){var v=this.duration/this.props.hZoom/u,y=this.props.selectStart-this.props.offset,b=Math.floor(y/v),m=this.props.selectEnd-this.props.offset,g=Math.floor(m/v);g>0&&b<u?(b>0&&d(0,b,this.props.color,this.props.background),d(Math.max(0,b),Math.min(u,g),this.props.selectColor,this.props.selectBackground),g<u&&d(g,u,this.props.color,this.props.background)):d(0,u,this.props.color,this.props.background)}else d(0,u,this.props.color,this.props.background);return this}}]),e}(p.default);e.default=f,t.exports=e.default},function(t,e,r){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),a=r(0),u=function(t){return t&&t.__esModule?t:{default:t}}(a),p={vZoom:1,offset:0,background:"#AAA",color:"#222",interval:"auto",unit:"s",duration:"auto",quantize:0,height:40},l=function(t){function e(t){return o(this,e),n(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,p,t))}return i(e,t),s(e,[{key:"render",value:function(){var t=this.ctx,e=this.props.width,r=this.props.height;t.fillStyle=this.props.background,t.fillRect(0,0,e,r),t.strokeStyle=t.fillStyle=this.props.color,t.lineWidth=.5;var o=this.displayDuration,n=o/e,i=this.props.interval;"auto"===i&&(i=this.quantizeRuler(o)),i=Math.max(.001,i);for(var s=Math.max(2,Math.min(3,Math.round(1/i))),a=1/n*i,u=e/a,p=-this.props.offset/i%5*a,l=this.props.offset,f=0;f<u+5;f++){var h=f%5==0;if(t.beginPath(),h?(t.moveTo(p,0),t.lineTo(p,r)):(t.moveTo(p,r),t.lineTo(p,.63*r)),t.stroke(),h){var c=this.props.width/71;t.font=c+"px Arial",t.fillText((l+p/a*i).toFixed(s)+this.props.unit,p+5,c)}p+=a}return this}},{key:"quantizeRuler",value:function(t){var e=this.props.width/t,r=5/e,o=-Math.floor(Math.log(r)/Math.log(10)+1),n=Math.pow(10,o),i=void 0;if(this.props.quantize){for(i=this.props.quantize;i*e<20;)i+=this.props.quantize;for(;i*e>60;)i/=5}else{i=[1,2,5][Math.round(r*n*2)]/n}return i}}]),e}(u.default);e.default=l,t.exports=e.default},function(t,e,r){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),a=r(0),u=function(t){return t&&t.__esModule?t:{default:t}}(a),p={background:"#999",color:"#222",width:10,dir:1},l=function(t){function e(t){return o(this,e),n(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,p,t))}return i(e,t),s(e,[{key:"render",value:function(){var t=this.ctx,e=this.props.width,r=this.props.height;t.fillStyle=this.props.background,t.strokeStyle=this.props.color,t.beginPath();var o=r/64,n=2*o;return 1===this.props.dir?(t.lineTo(e,o),t.lineTo(0,n),t.lineTo(0,0),t.lineTo(e,o),t.fill(),t.stroke(),t.strokeRect(0,0,1,r)):(t.moveTo(e,0),t.lineTo(0,o),t.lineTo(e,n),t.lineTo(e,0),t.lineTo(0,o),t.fill(),t.stroke(),t.strokeRect(e,0,1,r)),this}}]),e}(u.default);e.default=l,t.exports=e.default},function(t,e,r){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),a=r(0),u=function(t){return t&&t.__esModule?t:{default:t}}(a),p={height:10,color:"#222"},l=function(t){function e(t){return o(this,e),n(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,p,t))}return i(e,t),s(e,[{key:"render",value:function(){var t=this.ctx,e=this.props.width,r=this.props.height;return t.fillStyle=this.props.color,t.fillRect(0,0,e,r),this}}]),e}(u.default);e.default=l,t.exports=e.default}])});