(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{5471:function(e,t,n){e.exports=n(5699)},5476:function(e,t,n){},5477:function(e,t,n){},5489:function(e,t,n){},5492:function(e,t,n){},5498:function(e,t,n){},5581:function(e,t,n){},5582:function(e,t,n){},5583:function(e,t,n){},5584:function(e,t,n){},5585:function(e,t,n){},5586:function(e,t,n){},5587:function(e,t,n){},5588:function(e,t,n){},5699:function(e,t,n){"use strict";n.r(t);var i=n(0),a=n.n(i),r=n(27),o=n.n(r),s=(n(5476),n(6)),l=n(5),c=n(4),u=n(7),h=n(8),d=n(9),f=n(2),v=n(14),m=n(35),p=(n(5477),n(17)),g=function(e){function t(){return Object(l.a)(this,t),Object(u.a)(this,Object(h.a)(t).apply(this,arguments))}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement(v.c,{to:this.props.path,className:"link",activeClassName:"active",exact:!0},a.a.createElement(p.a,{icon:this.props.icon}),a.a.createElement("span",{className:"text"},this.props.text))}}]),t}(i.Component),b=(n(5489),function(e){function t(){return Object(l.a)(this,t),Object(u.a)(this,Object(h.a)(t).apply(this,arguments))}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("section",{className:"topbar"},a.a.createElement(g,{path:"/",icon:"home",text:"Home"}),a.a.createElement(g,{path:"/paint",icon:"pen",text:"Paint"}),a.a.createElement(g,{path:"/list",icon:"image",text:"List"}),a.a.createElement(g,{path:"/history",icon:"calendar-alt",text:"History"}))}}]),t}(i.Component)),y=n(52),E=n(29),w=n(12),C=n.n(w),k=n(26);function O(e,t){return{x:e.x+t.x,y:e.y+t.y}}function x(e,t){return{x:e.x-t.x,y:e.y-t.y}}function R(e,t){return{x:e.x*t,y:e.y*t}}function j(e,t){return{x:e.x/t,y:e.y/t}}function S(e){return{x:e.x,y:-e.y}}function T(e){return{x:e.width,y:e.height}}function M(e,t){return O(e,j(x(t,e),2))}function F(e){return Math.sqrt(e.x*e.x+e.y*e.y)}var L=function(){function e(t,n,i,a){Object(l.a)(this,e),this._offset=void 0,this._size=void 0,this._right=void 0,this._bottom=void 0,this._offset={x:t,y:n},this._size={width:i,height:a},this._right=t+i,this._bottom=n+a}return Object(c.a)(e,[{key:"x",get:function(){return this.offset.x}},{key:"y",get:function(){return this.offset.y}},{key:"width",get:function(){return this.size.width}},{key:"height",get:function(){return this.size.height}},{key:"offset",get:function(){return this._offset}},{key:"size",get:function(){return this._size}},{key:"right",get:function(){return this._right}},{key:"bottom",get:function(){return this._bottom}}]),Object(c.a)(e,[{key:"isEmpty",value:function(){return 0==this.width||0==this.height}},{key:"intersect",value:function(t){var n=function(e){return{left:e.x,top:e.y,right:e.x+e.size.width,bottom:e.y+e.size.height}},i=n(this),a=n(t);if(i.right<a.left||i.left>a.right||i.bottom<a.top||i.top>a.bottom)return e.Empty;var r=Math.max(i.left,a.left),o=Math.max(i.top,a.top),s={width:Math.min(i.right,a.right)-r,height:Math.min(i.bottom,a.bottom)-o};return new e(r,o,s.width,s.height)}},{key:"merge",value:function(t){if(this.isEmpty())return t;if(t.isEmpty())return this;var n=function(e){return{left:e.x,top:e.y,right:e.x+e.size.width,bottom:e.y+e.size.height}},i=n(this),a=n(t),r=Math.min(i.left,a.left),o=Math.min(i.top,a.top),s={width:Math.max(i.right,a.right)-r,height:Math.max(i.bottom,a.bottom)-o};return new e(r,o,s.width,s.height)}},{key:"transform",value:function(t,n){return new e(this.x*t+n.x,this.y*t+n.y,this.width*t,this.height*t)}},{key:"align",value:function(){var t=Math.floor(this.x),n=Math.floor(this.y);return new e(t,n,Math.ceil(this.right)-t,Math.ceil(this.bottom)-n)}}]),e}();L.Empty=new L(0,0,0,0);var P,A=function(){function e(t,n,i,a){Object(l.a)(this,e),this._r=void 0,this._g=void 0,this._b=void 0,this._a=void 0,this._r=t,this._g=n,this._b=i,this._a=a}return Object(c.a)(e,[{key:"r",get:function(){return this._r}},{key:"g",get:function(){return this._g}},{key:"b",get:function(){return this._b}},{key:"a",get:function(){return this._a}}]),Object(c.a)(e,[{key:"getRawColor",value:function(e,t){e[t]=255*this._r,e[t+1]=255*this._g,e[t+2]=255*this._b,e[t+3]=255*this._a}}],[{key:"fromRawColor",value:function(t,n){return new e(t[n]/255,t[n+1]/255,t[n+2]/255,t[n+3]/255)}}]),e}(),_=function e(){Object(l.a)(this,e)};function G(e,t,n,i,a){if(e!==n||t!==i)for(var r=0;r<a;r++)e[t++]=n[i++]}function U(e,t,n){return{memory:e,offset:t,length:n}}function V(e,t,n,i,a){return{memory:e,offset:t,stride:n,width:i,height:a}}function B(e,t){var n=(1-t.a)*e.a,i=t.a+n;if(0==i)return new A(e.r,e.g,e.b,0);var a=(t.r*t.a+e.r*n)/i,r=(t.g*t.a+e.g*n)/i,o=(t.b*t.a+e.b*n)/i;return new A(a,r,o,i)}function N(e){switch(e){case P.AlphaBlend:return D;case P.Erase:return function(e,t,n,i,a,r){if(a[r+3]>0){var o=n[i+3]-a[r+3];o<=0?_.Transparent.getRawColor(e,t):(G(e,t,n,i,3),e[t+3]=o)}else G(e,t,n,i,4)};case P.Mask:return function(e,t,n,i,a,r){n[i+3]>0?D(e,t,n,i,a,r):_.Transparent.getRawColor(e,t)};case P.DirectBase:return function(e,t,n,i,a,r){G(e,t,n,i,4)};case P.DirectTop:return function(e,t,n,i,a,r){G(e,t,a,r,4)};default:return D}}function D(e,t,n,i,a,r){var o=a[r+3];if(0!==o){var s=n[i+3];if(0!==s){var l=a[r],c=a[r+1],u=a[r+2],h=n[i],d=n[i+1],f=n[i+2],v=(1-o/255)*s,m=o+v;e[t]=(l*o+h*v)/m,e[t+1]=(c*o+d*v)/m,e[t+2]=(u*o+f*v)/m,e[t+3]=m}else G(e,t,a,r,4)}else G(e,t,n,i,4)}_.White=new A(1,1,1,1),_.Black=new A(0,0,0,1),_.Red=new A(1,0,0,1),_.Green=new A(0,1,0,1),_.Blue=new A(0,0,1,1),_.Gray=new A(.5,.5,.5,1),_.Yellow=new A(1,1,0,1),_.Purple=new A(1,0,1,1),_.Transparent=new A(0,0,0,0),function(e){e[e.AlphaBlend=0]="AlphaBlend",e[e.Erase=1]="Erase",e[e.Mask=2]="Mask",e[e.DirectBase=3]="DirectBase",e[e.DirectTop=4]="DirectTop"}(P||(P={}));var z=new Uint8Array(0);function I(e,t,n,i){var a,r,o=n.getSize(),s=t.getSize(),l=Math.min(o.width,s.width),c=Math.min(o.height,s.height);if(void 0===i)a=0,r=0;else{if(a=i.x,r=i.y,a>=l||r>=c)return;l=Math.min(l-a,i.width),c=Math.min(c-r,i.height)}i=new L(a,r,l,c);var u=!1,h=t.getRawColorsRef(i),d=n.getRawColorsReadOnlyRef(i),f=4*l;if(null===h&&null===d){var v=l*c,m=2*v;z.length<m&&(z=new Uint8Array(m)),h=V(z,0,f,f,c),t.getRawColors(i,h),d=V(z,v,f,f,c),n.getRawColors(i,d),u=!0}else if(null===h||null===d){var p=l*c;z.length<p&&(z=new Uint8Array(p)),null===h?(h=V(z,0,f,f,c),d=d,t.getRawColors(i,h),u=!0):(d=V(z,0,f,f,c),n.getRawColors(i,d))}for(var g=N(e),b=0;b<i.height;b++)for(var y=h.offset+h.stride*b,E=d.offset+d.stride*b,w=y+4*i.width;y<w;y+=4,E+=4)g(h.memory,y,h.memory,y,d.memory,E);u&&t.setRawColors(i,h)}var Y=function(){function e(t,n,i,a,r){Object(l.a)(this,e),this.activeLayer=t,this.drawingLayer=n,this.paintTool=i,this.view=a,this.undoManager=r,this.isFinished=!1,this.dirtyRect=void 0,this.paintToolContext=void 0,this.canvas=void 0,this.points=[],this.dirtyRect=L.Empty,this.paintToolContext=this.paintTool.beginPaiting(this),n.setBlendMode(this.paintToolContext.getBakeMode()),this.canvas=this.view.getCanvas()}return Object(c.a)(e,[{key:"getView",value:function(){return this.view}},{key:"start",value:function(e,t,n){this.render(this.paintToolContext.start(e,t,n)),this.points.push({x:e,y:t}),this.points.push({x:e,y:t})}},{key:"update",value:function(e,t,n){this.isFinished||(this.points.shift(),this.points.forEach(function(n){e+=n.x,t+=n.y}),e/=this.points.length+1,t/=this.points.length+1,this.points.push({x:e,y:t}),this.render(this.paintToolContext.update(e,t,n)))}},{key:"end",value:function(){this.isFinished||this.render(this.paintToolContext.end())}},{key:"cancel",value:function(){this.isFinished||this.dirtyRect.isEmpty()||(this.drawingLayer.fill(_.Transparent,this.dirtyRect),this.canvas.render(!1,this.dirtyRect),this.isFinished=!0)}},{key:"render",value:function(e){this.dirtyRect=this.dirtyRect.merge(e.dirtyRect),this.dirtyRect.isEmpty()||(e.isFinished?(void 0!==this.undoManager&&this.undoManager.push(this.activeLayer,this.dirtyRect),I(this.drawingLayer.getBlendMode(),this.activeLayer,this.drawingLayer,this.dirtyRect),this.drawingLayer.fill(_.Transparent,this.dirtyRect),this.canvas.render(!1,this.dirtyRect),this.isFinished=!0):this.canvas.render(!0,e.dirtyRect))}}]),e}();function H(e,t,n,i,a){for(var r=Math.floor(t-i),o=Math.floor(n-i),s=Math.floor(t+i),l=Math.floor(n+i),c=i*i,u=!1,h=0,d=0,f=0,v=0,m=e.getSize(),p=o;p<=l;p++)for(var g=r;g<=s;g++)if(!(g<0||g>=m.width||p<0||p>=m.height)){for(var b=0,y=0;y<8;y++)for(var E=p-n+y*(1/8),w=0;w<8;w++){var C=g-t+w*(1/8);(C*C+E*E)/c<1&&(b+=1)}var k=b/64;if(k>0){u?(h>g?h=g:f<g&&(f=g),d>p?d=p:v<p&&(v=p)):(u=!0,h=g,d=p,f=g,v=p);var O=B(e.getColor(g,p),new A(a.r,a.g,a.b,k));e.setColor(g,p,O)}}return u?new L(h,d,f-h+1,v-d+1):L.Empty}var W,X,q=function(){function e(t,n,i){Object(l.a)(this,e),this.size=void 0,this.buffer=void 0,this.blendMode=P.AlphaBlend,this.size={width:t,height:n},this.buffer=void 0===i?new Uint8Array(t*n*4):new Uint8Array(i)}return Object(c.a)(e,[{key:"getSize",value:function(){return this.size}},{key:"getColor",value:function(e,t){return A.fromRawColor(this.buffer,this.getByteOffset(e,t))}},{key:"getBlendMode",value:function(){return this.blendMode}},{key:"getRawColor",value:function(e,t,n,i){G(n,i,this.buffer,this.getByteOffset(e,t),4)}},{key:"getRawColors",value:function(e,t){for(var n=4*e.width,i=t.offset,a=0;a<e.height;a++){var r=this.getByteOffset(e.x,e.y+a);G(t.memory,i,this.buffer,r,n),i+=t.stride}}},{key:"setColor",value:function(e,t,n){n.getRawColor(this.buffer,this.getByteOffset(e,t))}},{key:"fill",value:function(e,t){void 0===t&&(t=new L(0,0,this.size.width,this.size.height));for(var n=4*t.width,i=255*e.r,a=255*e.g,r=255*e.b,o=255*e.a,s=0;s<t.height;s++)for(var l=this.getByteOffset(t.x,t.y+s),c=l+n;l<c;)this.buffer[l++]=i,this.buffer[l++]=a,this.buffer[l++]=r,this.buffer[l++]=o}},{key:"getRawColorsReadOnlyRef",value:function(e){return this.getRawColorsRef(e)}},{key:"getRawColorsRef",value:function(e){return{memory:this.buffer,offset:this.getByteOffset(e.x,e.y),stride:4*this.size.width,width:4*e.width,height:e.height}}},{key:"setRawColor",value:function(e,t,n,i){G(this.buffer,this.getByteOffset(e,t),n,i,4)}},{key:"setRawColors",value:function(e,t){for(var n=4*e.width,i=t.offset,a=0;a<e.height;a++){var r=this.getByteOffset(e.x,e.y+a);G(this.buffer,r,t.memory,i,n),i+=t.stride}}},{key:"setBlendMode",value:function(e){this.blendMode=e}},{key:"getByteOffset",value:function(e,t){return 4*(t*this.size.width+e)}}]),e}(),Q=function(){function e(t){Object(l.a)(this,e),this.ctx=t,this.layer=void 0,this.imageData=void 0;var n={width:t.canvas.width,height:t.canvas.height};this.imageData=t.getImageData(0,0,n.width,n.height),this.layer=new q(n.width,n.height,this.imageData.data.buffer)}return Object(c.a)(e,[{key:"getSize",value:function(){return this.layer.getSize()}},{key:"getColor",value:function(e,t){return this.layer.getColor(e,t)}},{key:"getBlendMode",value:function(){return this.layer.getBlendMode()}},{key:"getRawColorsReadOnlyRef",value:function(e){return this.layer.getRawColorsReadOnlyRef(e)}},{key:"getRawColor",value:function(e,t,n,i){this.getRawColor(e,t,n,i)}},{key:"getRawColors",value:function(e,t){this.layer.getRawColors(e,t)}},{key:"setColor",value:function(e,t,n){this.layer.setColor(e,t,n)}},{key:"fill",value:function(e,t){this.layer.fill(e,t)}},{key:"getRawColorsRef",value:function(e){return this.layer.getRawColorsRef(e)}},{key:"setRawColor",value:function(e,t,n,i){this.layer.setRawColor(e,t,n,i)}},{key:"setRawColors",value:function(e,t){this.layer.setRawColors(e,t)}},{key:"getContext",value:function(){return this.ctx}},{key:"apply",value:function(e){var t=this.getSize(),n=new L(0,0,t.width,t.height);(e=void 0===e?n:e.intersect(n)).isEmpty()||this.ctx.putImageData(this.imageData,0,0,e.x,e.y,e.width,e.height)}}]),e}();function J(e,t,n,i,a,r,o){var s=e.getSize(),l=new L(0,0,s.width,s.height);if((o=void 0===o?l:o.intersect(l)).isEmpty())return o;var c=t.getSize(),u=new L(0,0,c.width,c.height).transform(n,a).align(),h=o.intersect(u).align();if(h.isEmpty())e.fill(r.color,o);else{var d=Math.max(Math.floor((h.x-a.x)/n),0),f=Math.max(Math.floor((h.y-a.y)/n),0),v=Math.min(Math.ceil((h.right-a.x)/n),c.width)-d,m=Math.min(Math.ceil((h.bottom-a.y)/n),c.height)-f,p=e.getRawColorsRef(o);if(null===p)return console.error("can not get dst RawColorsRef : ".concat(e)),L.Empty;var g=t.getRawColorsReadOnlyRef(new L(d,f,v,m));if(null===g)return console.error("can not get src RawColorsReadOnlyRef : ".concat(t)),L.Empty;var b=o.right,y=o.bottom,E=h.right,w=h.bottom;if(i.method===W.OverSampling){if(null===i.overSamplingOption)return console.error("Missing OverSamplingOption."),L.Empty;for(var C=1/i.overSamplingOption.subpixels,k=o.y;k<y;k++)for(var O=p.offset+p.stride*(k-o.y),x=o.x;x<b;x++)if(x===h.x&&k>=h.y&&k<w){for(;x<E;x++){for(var R=0,j=0,S=0,T=0,M=0,F=0;F<1;F+=C){var P=Math.floor((k+F-a.y)/n)-f;if(!(P<0||P>=m))for(var A=g.offset+g.stride*P,_=0;_<1;_+=C){var U=Math.floor((x+_-a.x)/n)-d;if(!(U<0||U>=v)){var V=A+4*U;j+=g.memory[V],S+=g.memory[V+1],T+=g.memory[V+2],M+=g.memory[V+3],R++}}}R>0?(p.memory[O]=j/R,p.memory[O+1]=S/R,p.memory[O+2]=T/R,p.memory[O+3]=M/R):r.color.getRawColor(p.memory,O),O+=4}x--}else r.color.getRawColor(p.memory,O),O+=4}else for(var B=o.y;B<y;B++)for(var N=p.offset+p.stride*(B-o.y),D=o.x;D<b;D++)if(D===h.x&&B>=h.y&&B<w){for(var z=Math.floor((B-a.y)/n)-f,I=g.offset+g.stride*z;D<E;D++){var Y=Math.floor((D-a.x)/n)-d;if(z>=0&&z<m&&Y>=0&&Y<v){var H=I+4*Y;G(p.memory,N,g.memory,H,4)}else r.color.getRawColor(p.memory,N);N+=4}D--}else r.color.getRawColor(p.memory,N),N+=4}return o}!function(e){e[e.NearestNeighbor=0]="NearestNeighbor",e[e.OverSampling=1]="OverSampling"}(W||(W={})),function(e){e[e.Color=0]="Color"}(X||(X={}));var K={scale:1,scaleOption:{method:W.OverSampling,overSamplingOption:{subpixels:2}},offset:{x:0,y:0}};function $(e){var t=void 0!==e.scaleOption.overSamplingOption?Object(s.a)({},e.scaleOption.overSamplingOption):void 0;return{scale:e.scale,scaleOption:{method:e.scaleOption.method,overSamplingOption:t},offset:Object(s.a)({},e.offset)}}var Z=function(){function e(t,n){Object(l.a)(this,e),this.size=t,this.background=n,this.prevParam=$(K)}return Object(c.a)(e,[{key:"getSize",value:function(){return this.size}},{key:"setSize",value:function(e){this.size=e,this.onSizeChange()}},{key:"getBackground",value:function(){return this.background}},{key:"setBackground",value:function(e){this.background=e}},{key:"render",value:function(e,t,n){if(void 0===n){var i=t.getSize();n=new L(0,0,i.width,i.height)}var a=this.renderCore(this.prevParam,e,!function(e,t){if(e.scale!==t.scale)return!1;if(e.scaleOption.method!==t.scaleOption.method)return!1;if(void 0!==e.scaleOption.overSamplingOption&&void 0!==t.scaleOption.overSamplingOption){if(e.scaleOption.overSamplingOption.subpixels!==t.scaleOption.overSamplingOption.subpixels)return!1}else if(void 0===e.scaleOption.overSamplingOption&&void 0!==t.scaleOption.overSamplingOption)return!1;return e.offset.x===t.offset.x&&e.offset.y===t.offset.y}(this.prevParam,e),t,n);return this.prevParam=$(e),a}},{key:"invalidate",value:function(e,t){}}]),e}(),ee=function(e){function t(e,n,i,a,r,o,s){var c;return Object(l.a)(this,t),(c=Object(u.a)(this,Object(h.a)(t).call(this,e,s))).gl=n,c.program=i,c.texture=a,c.matrixUniLoc=r,c.matrix=o,c.buffer=void 0,c.isTextureCreated=!1,c.isDirtyViewport=!1,c.buffer=new Uint8Array(e.width*e.height*4),c}return Object(d.a)(t,e),Object(c.a)(t,null,[{key:"createGPURenderer",value:function(e,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:_.Gray,a=[],r=function(){for(var e=a.length-1;e>=0;e--)a[e]();a.length=0},o=t.createProgram(n);if(null===o)return null;a.push(function(){return n.deleteProgram(o)});var s=n.createBuffer(),l=n.createBuffer(),c=n.createBuffer();if(a.push(function(){n.deleteBuffer(s),n.deleteBuffer(l),n.deleteBuffer(c)}),null===s||null===l||null===c)return r(),null;n.bindBuffer(n.ARRAY_BUFFER,s);n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,1,0,-1,-1,0,1,1,0,1,-1,0]),n.STATIC_DRAW),n.bindBuffer(n.ARRAY_BUFFER,l);n.bufferData(n.ARRAY_BUFFER,new Float32Array([0,0,0,1,1,0,1,1]),n.STATIC_DRAW),n.bindBuffer(n.ARRAY_BUFFER,null),n.bindBuffer(n.ELEMENT_ARRAY_BUFFER,c);n.bufferData(n.ELEMENT_ARRAY_BUFFER,new Int16Array([0,1,2,1,2,3]),n.STATIC_DRAW),n.bindBuffer(n.ELEMENT_ARRAY_BUFFER,null);var u=n.getAttribLocation(o,"position"),h=n.getAttribLocation(o,"texCoord"),d=n.getUniformLocation(o,"mvpMatrix"),f=n.getUniformLocation(o,"texture");if(null===u||null===h||null===d)return console.warn("invalid vertex shader."),r(),null;if(null===f)return console.warn("invalid fragment shader."),r(),null;n.bindBuffer(n.ARRAY_BUFFER,s),n.enableVertexAttribArray(u),n.vertexAttribPointer(u,3,n.FLOAT,!1,0,0),n.bindBuffer(n.ARRAY_BUFFER,l),n.enableVertexAttribArray(h),n.vertexAttribPointer(h,2,n.FLOAT,!1,0,0),n.bindBuffer(n.ARRAY_BUFFER,null),n.uniform1i(f,0);var v=t.createTexture(n);if(a.push(function(){n.bindTexture(n.TEXTURE_2D,null),n.deleteTexture(v)}),null===v)return r(),null;n.activeTexture(n.TEXTURE0),n.uniform1i(f,0),n.bindBuffer(n.ELEMENT_ARRAY_BUFFER,c);var m=i;n.clearColor(m.r,m.g,m.b,m.a),n.clear(n.COLOR_BUFFER_BIT),n.flush();var p=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);return new t(e,n,o,v,d,p,m)}}]),Object(c.a)(t,[{key:"onSizeChange",value:function(){this.gl.canvas.width=this.size.width,this.gl.canvas.height=this.size.height,this.gl.viewport(0,0,this.size.width,this.size.height),this.isDirtyViewport=!0}},{key:"onBackgroundChange",value:function(){}},{key:"renderCore",value:function(e,t,n,i,a){var r=this.gl,o=this.background;if(r.clearColor(o.r,o.g,o.b,o.a),r.clear(r.COLOR_BUFFER_BIT),a.isEmpty()||this.uploadLayerToGPU(this.gl,this.texture,i,a),n||this.isDirtyViewport){this.fillMatrixFromRenderParameter(i.getSize(),t),r.uniformMatrix4fv(this.matrixUniLoc,!1,this.matrix);var s=i.getSize();a=new L(0,0,s.width,s.height),this.isDirtyViewport=!1}return r.drawElements(r.TRIANGLES,6,r.UNSIGNED_SHORT,0),r.flush(),a.transform(t.scale,t.offset).align()}},{key:"invalidate",value:function(e,t){var n=t.getSize();this.renderCore(e,e,!0,t,new L(0,0,n.width,n.height))}},{key:"fillMatrixFromRenderParameter",value:function(e,t){var n=this.size,i=n.width,a=n.height,r=e.width,o=e.height/a,s=r/i*t.scale,l=o*t.scale;this.matrix[0]=s,this.matrix[5]=l,this.matrix[12]=t.offset.x/i*2,this.matrix[13]=t.offset.y/a*2}},{key:"uploadLayerToGPU",value:function(e,t,n,i){var a=n.getSize();if(this.isTextureCreated){var r=n.getRawColorsReadOnlyRef(i),o=0,s=r.width,l=s*r.height;this.buffer.length<l&&(this.buffer=new Uint8Array(l));for(var c=0;c<r.height;c++)G(this.buffer,o,r.memory,r.offset+c*r.stride,s),o+=s;e.texSubImage2D(e.TEXTURE_2D,0,i.x,i.y,i.width,i.height,e.RGBA,e.UNSIGNED_BYTE,this.buffer)}else e.texImage2D(e.TEXTURE_2D,0,e.RGBA,a.width,a.height,0,e.RGBA,e.UNSIGNED_BYTE,n.getRawColorsReadOnlyRef(i).memory),this.isTextureCreated=!0}}],[{key:"createProgram",value:function(e){var n=t.createShader(e,e.VERTEX_SHADER,"\nattribute vec3 position;\nattribute vec2 texCoord;\nuniform mat4 mvpMatrix;\nvarying vec2 vTexCoord;\n\nvoid main(void) {\n    vTexCoord = texCoord;\n    gl_Position = mvpMatrix * vec4(position, 1);\n}\n"),i=t.createShader(e,e.FRAGMENT_SHADER,"\nprecision mediump float;\n\nuniform sampler2D texture;\nvarying vec2 vTexCoord;\n\nvoid main(void) {\n    // vec4 p = texture2D(texture, vTexCoord);\n    // gl_FragColor = vec4(vTexCoord,p.x,1);\n    gl_FragColor = texture2D(texture, vTexCoord);\n}\n");if(null===n||null===i)return e.deleteShader(n),e.deleteShader(i),null;var a=e.createProgram();if(null===a)return e.deleteShader(n),e.deleteShader(i),console.warn("can not create program."),null;if(e.attachShader(a,n),e.attachShader(a,i),e.linkProgram(a),e.getProgramParameter(a,e.LINK_STATUS))return e.useProgram(a),e.detachShader(a,n),e.detachShader(a,i),e.deleteShader(n),e.deleteShader(i),a;var r=e.getProgramInfoLog(a);return console.warn("can not link program."),console.warn(r),e.detachShader(a,n),e.detachShader(a,i),e.deleteShader(n),e.deleteShader(i),e.deleteProgram(a),null}},{key:"createShader",value:function(e,t,n){var i=e.createShader(t);if(null===i)return console.warn("can not create shader type : ".concat(t)),!1;if(e.shaderSource(i,n),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS))return i;var a=e.getShaderInfoLog(i);return console.warn("can not compile shader type : ".concat(t)),console.warn(a),e.deleteShader(i),null}},{key:"createTexture",value:function(e){var t=e.createTexture();return null===t?(console.log("can not create shader."),null):(e.bindTexture(e.TEXTURE_2D,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),t)}}]),t}(Z),te=function(e){function t(e,n){var i,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:_.Gray;return Object(l.a)(this,t),(i=Object(u.a)(this,Object(h.a)(t).call(this,e,a))).htmlCanvasLayer=void 0,n.canvas.width=e.width,n.canvas.height=e.height,i.htmlCanvasLayer=new Q(n),i.htmlCanvasLayer.fill(a),i.htmlCanvasLayer.apply(),i}return Object(d.a)(t,e),Object(c.a)(t,[{key:"onSizeChange",value:function(){var e=this.htmlCanvasLayer.getContext();e.canvas.width=this.size.width,e.canvas.height=this.size.height,this.htmlCanvasLayer=new Q(e),this.htmlCanvasLayer.fill(this.background),this.htmlCanvasLayer.apply()}},{key:"onBackgroundChange",value:function(){this.htmlCanvasLayer=new Q(this.htmlCanvasLayer.getContext()),this.htmlCanvasLayer.fill(this.background),this.htmlCanvasLayer.apply()}},{key:"renderCore",value:function(e,t,n,i,a){var r,o=this,s=i.getSize(),l=function(e,t){return o.toLayerCoord(e,t,s)};if(n){var c=new L(0,0,s.width,s.height),u=c.transform(e.scale,l(e.offset,e.scale)).align(),h=c.transform(t.scale,l(t.offset,t.scale)).align();r=u.merge(h)}else r=a.transform(t.scale,l(t.offset,t.scale)).align();var d={method:X.Color,color:this.background},f=J(this.htmlCanvasLayer,i,t.scale,t.scaleOption,l(t.offset,t.scale),d,r);return r.isEmpty()||this.htmlCanvasLayer.apply(f),f}},{key:"invalidate",value:function(e,t){var n={method:X.Color,color:this.background};J(this.htmlCanvasLayer,t,e.scale,e.scaleOption,this.toLayerCoord(e.offset,e.scale,t.getSize()),n),this.htmlCanvasLayer.apply()}},{key:"toLayerCoord",value:function(e,t,n){return{x:e.x+this.size.width/2-n.width/2*t,y:-e.y+this.size.height/2-n.height/2*t}}}]),t}(Z);function ne(e,t,n,i){return O(R(S(x(e,i)),t),n)}function ie(e,t,n,i){return O(i,S(j(x(e,n),t)))}var ae,re=function(){},oe=function(){function e(t){Object(l.a)(this,e),this.elem=t,this.oneFingerGestureContext=null,this.twoFingerGestureContext=null,this._onOneFingerGestureStart=re,this._onOneFingerGestureMove=re,this._onOneFingerGestureEnd=re,this._onOneFingerGestureCancel=re,this._onTwoFingerGesutureStart=re,this._onTwoFingerGesutureMove=re,this._onTwoFingerGesutureEnd=re,this._onTwoFingerGesutureCancel=re,this.onTouchStart=this.onTouchStart.bind(this),this.onTouchMove=this.onTouchMove.bind(this),this.onTouchEnd=this.onTouchEnd.bind(this),this.onTouchCancel=this.onTouchCancel.bind(this),this.elem.addEventListener("touchstart",this.onTouchStart),this.elem.addEventListener("touchmove",this.onTouchMove),this.elem.addEventListener("touchend",this.onTouchEnd),this.elem.addEventListener("touchcancel",this.onTouchCancel)}return Object(c.a)(e,[{key:"onOneFingerGestureStart",value:function(e){this._onOneFingerGestureStart=e}},{key:"onOneFingerGestureMove",value:function(e){this._onOneFingerGestureMove=e}},{key:"onOneFingerGestureEnd",value:function(e){this._onOneFingerGestureEnd=e}},{key:"onOneFingerGestureCancel",value:function(e){this._onOneFingerGestureCancel=e}},{key:"onTwoFingerGesutureStart",value:function(e){this._onTwoFingerGesutureStart=e}},{key:"onTwoFingerGesutureMove",value:function(e){this._onTwoFingerGesutureMove=e}},{key:"onTwoFingerGesutureEnd",value:function(e){this._onTwoFingerGesutureEnd=e}},{key:"onTwoFingerGesutureCancel",value:function(e){this._onTwoFingerGesutureCancel=e}},{key:"onTouchStart",value:function(e){if(e.cancelable){if(e.preventDefault(),null!==this.oneFingerGestureContext){var t=!1,n=!0,i=!1,a=void 0;try{for(var r,o=e.touches[Symbol.iterator]();!(n=(r=o.next()).done);n=!0){if(r.value.identifier===this.oneFingerGestureContext.touch.id){t=!0;break}}}catch(w){i=!0,a=w}finally{try{n||null==o.return||o.return()}finally{if(i)throw a}}t||(this._onOneFingerGestureCancel(this.oneFingerGestureContext.touch),this.oneFingerGestureContext=null)}else if(null!==this.twoFingerGestureContext){var s=0,l=!0,c=!1,u=void 0;try{for(var h,d=e.touches[Symbol.iterator]();!(l=(h=d.next()).done);l=!0){var f=h.value;f.identifier!==this.twoFingerGestureContext.first.id&&f.identifier!==this.twoFingerGestureContext.second.id||s++}}catch(w){c=!0,u=w}finally{try{l||null==d.return||d.return()}finally{if(c)throw u}}2!==s&&(this._onTwoFingerGesutureCancel(this.twoFingerGestureContext.first,this.twoFingerGestureContext.second),this.twoFingerGestureContext=null)}var v=this.elem.getBoundingClientRect();if(1===e.touches.length){var m=e.touches[0],p={x:m.clientX-v.left,y:m.clientY-v.top};this.oneFingerGestureContext={touch:{id:m.identifier,position:p}},this._onOneFingerGestureStart(this.oneFingerGestureContext.touch)}else if(null===this.twoFingerGestureContext){null!==this.oneFingerGestureContext&&(this._onOneFingerGestureCancel(this.oneFingerGestureContext.touch),this.oneFingerGestureContext=null);var g=e.touches[0],b={x:g.clientX-v.left,y:g.clientY-v.top},y={id:g.identifier,position:b};b={x:(g=e.touches[1]).clientX-v.left,y:g.clientY-v.top};var E={id:g.identifier,position:b};this.twoFingerGestureContext={first:y,second:E},this._onTwoFingerGesutureStart(this.twoFingerGestureContext.first,this.twoFingerGestureContext.second)}}}},{key:"onTouchMove",value:function(e){if(e.cancelable){e.preventDefault();var t=!1,n=this.elem.getBoundingClientRect(),i=!0,a=!1,r=void 0;try{for(var o,s=e.changedTouches[Symbol.iterator]();!(i=(o=s.next()).done);i=!0){var l=o.value,c={x:l.clientX-n.left,y:l.clientY-n.top};if(null!==this.oneFingerGestureContext){if(l.identifier===this.oneFingerGestureContext.touch.id){t=!0,this.oneFingerGestureContext.touch.position=c;break}}else if(null!==this.twoFingerGestureContext&&(l.identifier===this.twoFingerGestureContext.first.id||l.identifier===this.twoFingerGestureContext.second.id)){var u=l.identifier===this.twoFingerGestureContext.first.id?this.twoFingerGestureContext.first:this.twoFingerGestureContext.second;t=!0,u.position=c}}}catch(h){a=!0,r=h}finally{try{i||null==s.return||s.return()}finally{if(a)throw r}}t&&(null!==this.oneFingerGestureContext?this._onOneFingerGestureMove(this.oneFingerGestureContext.touch):null!==this.twoFingerGestureContext&&this._onTwoFingerGesutureMove(this.twoFingerGestureContext.first,this.twoFingerGestureContext.second))}}},{key:"onTouchEnd",value:function(e){if(e.cancelable&&e.preventDefault(),null!==this.oneFingerGestureContext){var t=!1,n=!0,i=!1,a=void 0;try{for(var r,o=e.touches[Symbol.iterator]();!(n=(r=o.next()).done);n=!0){if(r.value.identifier===this.oneFingerGestureContext.touch.id){t=!0;break}}}catch(v){i=!0,a=v}finally{try{n||null==o.return||o.return()}finally{if(i)throw a}}t||(this._onOneFingerGestureEnd(this.oneFingerGestureContext.touch),this.oneFingerGestureContext=null)}else if(null!==this.twoFingerGestureContext){var s=0,l=!0,c=!1,u=void 0;try{for(var h,d=e.touches[Symbol.iterator]();!(l=(h=d.next()).done);l=!0){var f=h.value;f.identifier!==this.twoFingerGestureContext.first.id&&f.identifier!==this.twoFingerGestureContext.second.id||s++}}catch(v){c=!0,u=v}finally{try{l||null==d.return||d.return()}finally{if(c)throw u}}2!==s&&(this._onTwoFingerGesutureEnd(this.twoFingerGestureContext.first,this.twoFingerGestureContext.second),this.twoFingerGestureContext=null)}}},{key:"onTouchCancel",value:function(e){if(e.cancelable&&e.preventDefault(),null!==this.oneFingerGestureContext){var t=!1,n=!0,i=!1,a=void 0;try{for(var r,o=e.touches[Symbol.iterator]();!(n=(r=o.next()).done);n=!0){if(r.value.identifier===this.oneFingerGestureContext.touch.id){t=!0;break}}}catch(v){i=!0,a=v}finally{try{n||null==o.return||o.return()}finally{if(i)throw a}}t||(this._onOneFingerGestureCancel(this.oneFingerGestureContext.touch),this.oneFingerGestureContext=null)}else if(null!==this.twoFingerGestureContext){var s=0,l=!0,c=!1,u=void 0;try{for(var h,d=e.touches[Symbol.iterator]();!(l=(h=d.next()).done);l=!0){var f=h.value;f.identifier!==this.twoFingerGestureContext.first.id&&f.identifier!==this.twoFingerGestureContext.second.id||s++}}catch(v){c=!0,u=v}finally{try{l||null==d.return||d.return()}finally{if(c)throw u}}2!==s&&(this._onTwoFingerGesutureCancel(this.twoFingerGestureContext.first,this.twoFingerGestureContext.second),this.twoFingerGestureContext=null)}}},{key:"dispose",value:function(){this.elem.removeEventListener("touchstart",this.onTouchStart),this.elem.removeEventListener("touchmove",this.onTouchMove),this.elem.removeEventListener("touchend",this.onTouchEnd),this.elem.removeEventListener("touchcancel",this.onTouchCancel)}}]),e}(),se=function(){function e(t,n,i,a,r,o,s){var c=this;Object(l.a)(this,e),this.canvas=n,this.undoManager=a,this.paintToolProvider=r,this._disableEdit=o,this.disableAutoAdjust=s,this.renderVersion=0,this.isCPURenderer=!1,this.renderer=void 0,this.htmlCanvas=void 0,this.unSubscribeEvents=void 0,this.renderParameter=$(K),this.onViewRenders=[],this.onCanvasRender=this.onCanvasRender.bind(this),this.canvas.onRender(this.onCanvasRender);var u=document.createElement("canvas");u.width=t.width,u.height=t.height;var h=null,d=new A(.8,.8,.8,1);if(!i){var f=u.getContext("webgl");if(null!==f&&null===(h=ee.createGPURenderer(t,f,d))){var v=document.createElement("canvas");v.width=t.width,v.height=t.height}}null===h&&(h=new te(t,u.getContext("2d"),d),this.isCPURenderer=!0),this.renderer=h,this.htmlCanvas=u;var m=null,p={x:0,y:0},g=function(e){var t=j(T(c.getSize()),2);return ne(e,1,p,t)},b=function(e){var t=j(T(c.canvas.getSize()),2);return ie(e,c.renderParameter.scale,c.renderParameter.offset,t)},y=function(e){return b(g(e))},E=function(e,t,n,i){null!==m&&(m.cancel(),m=null);var a=c.canvas.getActiveLayer(),r=c.canvas.getDrawingLayer(),o=y({x:t,y:n}),s=o.x,l=o.y;return null!==a&&null!==e&&((m=new Y(a,r,e,c,c.undoManager)).start(s,l,i),!0)},w=function(e,t,n){if(null===m)return!1;var i=y({x:e,y:t}),a=i.x,r=i.y;return m.update(a,r,n),!0},C=function(){return null!==m&&(m.end(),m=null,!0)};if(-1==navigator.userAgent.indexOf("iPhone")&&-1==navigator.userAgent.indexOf("iPad")&&-1==navigator.userAgent.indexOf("Android")){var k=function(e){if(!c._disableEdit&&void 0!==c.paintToolProvider&&e.cancelable){e.preventDefault();var t=g({x:e.offsetX,y:e.offsetY}),n=b(t);e.deltaY<0?c.setScale(Math.min(c.renderParameter.scale+.2,10)):c.setScale(Math.max(c.renderParameter.scale-.2,.2));var i=ne(n,c.renderParameter.scale,p,j(T(c.canvas.getSize()),2));c.setOffset(x(t,i)),c.adjustOffset()}},O=function(e){if(!c._disableEdit&&void 0!==c.paintToolProvider){var t;t=1===e.button?"middle":"";var n=c.paintToolProvider.getPaintTool(t);null!==n&&E(n,e.offsetX,e.offsetY,e.pressure)&&(u.setPointerCapture(e.pointerId),e.preventDefault())}},R=function(e){e.preventDefault(),w(e.offsetX,e.offsetY,e.pressure)},S=function(e){e.preventDefault(),C()};u.addEventListener("wheel",k),u.addEventListener("pointerdown",O),u.addEventListener("pointermove",R),u.addEventListener("pointerup",S),this.unSubscribeEvents=function(){u.removeEventListener("wheel",k),u.removeEventListener("pointerdown",O),u.removeEventListener("pointermove",R),u.removeEventListener("pointerup",S)}}else{var L=new oe(u);L.onOneFingerGestureStart(function(e){if(!c._disableEdit&&void 0!==c.paintToolProvider){var t=c.paintToolProvider.getPaintTool("touch");null!==t&&E(t,e.position.x,e.position.y,5)}}),L.onOneFingerGestureMove(function(e){c._disableEdit||void 0===c.paintToolProvider||w(e.position.x,e.position.y,5)}),L.onOneFingerGestureEnd(function(e){c._disableEdit||void 0===c.paintToolProvider||C()}),L.onOneFingerGestureCancel(function(e){null!==m&&(m.cancel(),m=null)});var P=p,_=p,G=this.getScaleOption(),U=1,V=0;L.onTwoFingerGesutureStart(function(e,t){c._disableEdit||void 0===c.paintToolProvider||(G=c.getScaleOption(),U=c.renderParameter.scale,P=g(M(e.position,t.position)),_=b(P),V=F(x(t.position,e.position)),c.setScaleOption({method:W.NearestNeighbor}))}),L.onTwoFingerGesutureMove(function(e,t){if(!c._disableEdit&&void 0!==c.paintToolProvider){var n=g(M(e.position,t.position)),i=F(x(e.position,t.position))/V;c.setScale(U*i);var a=ne(_,c.renderParameter.scale,p,j(T(c.canvas.getSize()),2));c.setOffset(x(n,a)),c.adjustOffset()}}),L.onTwoFingerGesutureEnd(function(e,t){c._disableEdit||void 0===c.paintToolProvider||c.setScaleOption(G)}),L.onTwoFingerGesutureCancel(function(e,t){c._disableEdit||void 0===c.paintToolProvider||c.setScaleOption(G)}),this.unSubscribeEvents=function(){L.dispose()}}}return Object(c.a)(e,[{key:"getHTMLCanvas",value:function(){return this.htmlCanvas}},{key:"onCanvasRender",value:function(e,t){this.render(t)}},{key:"render",value:function(e){var t=this;this.incRenderVersion();var n=this.renderer.render(this.renderParameter,this.canvas.getRenderedLayer(),e);n.isEmpty()||this.onViewRenders.forEach(function(e){return e(t,t.renderParameter,n)})}},{key:"incRenderVersion",value:function(){this.renderVersion++,this.renderVersion>1e4&&(this.renderVersion=0)}},{key:"reset",value:function(){void 0!==this.undoManager&&this.undoManager.clear(),this.invalidate(!0)}},{key:"toBlob",value:function(){var e=Object(k.a)(C.a.mark(function e(){var t,n,i,a;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return t=document.createElement("canvas"),n=this.canvas.getSize(),t.width=n.width,t.height=n.height,i=t.getContext("2d"),this.canvas.render(!1),a=new Q(i),I(P.DirectTop,a,this.canvas.getRenderedLayer()),a.apply(),e.abrupt("return",new Promise(function(e,t){i.canvas.toBlob(function(n){null!==n?e(n):t("can not toBlob.")})}));case 10:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"getSize",value:function(){return this.renderer.getSize()}},{key:"setSize",value:function(e){this.renderer.setSize(e),this.disableAutoAdjust||this.adjustOffset(),this.render()}},{key:"disableEdit",value:function(e){this._disableEdit=e}},{key:"getCanvas",value:function(){return this.canvas}},{key:"getOffset",value:function(){return this.renderParameter.offset}},{key:"getScaleOption",value:function(){return this.renderParameter.scaleOption}},{key:"setScaleOption",value:function(e){this.renderParameter.scaleOption=e,this.delayRender()}},{key:"canUndo",value:function(){return void 0!==this.undoManager&&this.undoManager.canUndo()}},{key:"undo",value:function(){if(void 0===this.undoManager)return!1;var e=this.undoManager.undo();e.dirtyRect.isEmpty()||this.canvas.render(!1,e.dirtyRect)}},{key:"canRedo",value:function(){return void 0!==this.undoManager&&this.undoManager.canRedo()}},{key:"redo",value:function(){if(void 0===this.undoManager)return!1;var e=this.undoManager.redo();e.dirtyRect.isEmpty()||this.canvas.render(!1,e.dirtyRect)}},{key:"setOffset",value:function(e){this.renderParameter.offset=e,this.delayRender()}},{key:"getScale",value:function(){return this.renderParameter.scale}},{key:"setScale",value:function(e){this.renderParameter.scale=e,this.delayRender()}},{key:"setPaintToolProvider",value:function(e){this.paintToolProvider=e}},{key:"onViewRender",value:function(e){this.onViewRenders.push(e)}},{key:"removeOnViewRender",value:function(e){var t=this.onViewRenders.indexOf(e);t<0||this.onViewRenders.splice(t,1)}},{key:"adjustOffset",value:function(){var e=j(R(T(this.canvas.getSize()),this.renderParameter.scale),2),t=this.getSize(),n=j(T(t),2),i=Math.min(Math.min(t.width,t.height)/10,100),a=Object(s.a)({},this.renderParameter.offset);this.renderParameter.offset.x<0?e.x+this.renderParameter.offset.x<-n.x+i&&(a.x=-n.x+i-e.x):-e.x+this.renderParameter.offset.x>n.x-i&&(a.x=n.x-i+e.x);this.renderParameter.offset.y<0?e.y+this.renderParameter.offset.y<-n.y+i&&(a.y=-n.y+i-e.y):-e.y+this.renderParameter.offset.y>n.y-i&&(a.y=n.y-i+e.y);if(null!=document.scrollingElement&&(0!==document.scrollingElement.scrollTop||0!==document.scrollingElement.scrollLeft)){var r=x(a,this.renderParameter.offset);0===r.x&&0===r.y||document.scrollingElement.scrollBy(r.x,-r.y)}this.setOffset(a)}},{key:"delayRender",value:function(){var e=this,t=this.renderVersion;if(this.isCPURenderer){setTimeout(function(){t===e.renderVersion&&e.render()},32)}else requestAnimationFrame(function(){t===e.renderVersion&&e.render()})}},{key:"invalidate",value:function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&this.canvas.render(!1),this.incRenderVersion(),this.renderer.invalidate(this.renderParameter,this.canvas.getRenderedLayer())}},{key:"dispose",value:function(){this.canvas.removeOnRender(this.onCanvasRender),this.unSubscribeEvents()}}]),e}(),le=function(){function e(t){Object(l.a)(this,e),this.size=t,this.buffer=void 0,this.top=void 0,this.bottom=void 0,this.buffer=new Uint8Array(t)}return Object(c.a)(e,[{key:"getRemain",value:function(){if(void 0===this.top||void 0===this.bottom)return this.buffer.length;var e=this.bottom.span.offset+this.bottom.span.length;if(this.top.span.offset>this.bottom.span.offset)return this.top.span.offset-e;var t=this.buffer.length-e,n=this.top.span.offset;return Math.max(t,n)}},{key:"retain",value:function(e){if(this.getRemain()<e)return null;if(void 0===this.top||void 0===this.bottom)this.bottom={span:U(this.buffer,0,e)},this.top=this.bottom;else{var t=this.bottom.span.offset+this.bottom.span.length,n=this.bottom;this.top.span.offset<=this.bottom.span.offset&&this.buffer.length-t<e&&(t=0),this.bottom={prev:n,span:U(this.buffer,t,e)},n.next=this.bottom}return this.bottom.span}},{key:"push",value:function(e){var t=this.retain(e.length);return null!==t&&(G(t.memory,t.offset,e.memory,e.offset,e.length),!0)}},{key:"pop",value:function(){if(void 0===this.bottom)return null;var e=this.bottom.span;return this.bottom=this.bottom.prev,void 0===this.bottom?this.top=void 0:this.bottom.next=void 0,e}},{key:"shift",value:function(){if(void 0===this.top)return null;var e=this.top.span;return this.top=this.top.next,void 0===this.top?this.bottom=void 0:this.top.prev=void 0,e}},{key:"count",value:function(){for(var e=0,t=this.top;void 0!==t;)t=t.next,e++;return e}}]),e}(),ce=function(){function e(t,n){Object(l.a)(this,e),this.entryMaxCount=n,this.ringBuffer=void 0,this.index=-1,this.headers=[],this.ringBuffer=new le(t),this.entryMaxCount=Math.max(this.entryMaxCount,1)}return Object(c.a)(e,[{key:"push",value:function(e,t){for(;this.index+1<this.headers.length;)this.headers.pop(),this.ringBuffer.pop();for(var n=4*t.width,i=n*t.height*2;0!==this.headers.length&&(this.headers.length>=this.entryMaxCount||i>this.ringBuffer.getRemain());)this.headers.shift(),this.ringBuffer.shift(),this.index--;var a=this.ringBuffer.retain(i);if(null===a)return!1;var r=V(a.memory,a.offset,n,n,t.height),o=V(a.memory,a.offset+n*t.height,n,n,t.height);return e.getRawColors(t,r),this.headers.push({layer:e,rect:t,undoMemoryRect:r,redoMemoryRect:o,redoMemoryInitialized:!1}),this.index++,!0}},{key:"canUndo",value:function(){return this.index>=0&&this.headers.length>this.index}},{key:"undo",value:function(){if(!this.canUndo())return{dirtyRect:L.Empty};var e=this.headers[this.index];return this.index--,e.redoMemoryInitialized||(e.layer.getRawColors(e.rect,e.redoMemoryRect),e.redoMemoryInitialized=!0),e.layer.setRawColors(e.rect,e.undoMemoryRect),{layer:e.layer,dirtyRect:e.rect}}},{key:"canRedo",value:function(){return this.index+1<this.headers.length}},{key:"redo",value:function(){if(!this.canRedo())return{dirtyRect:L.Empty};var e=this.headers[this.index+1];return this.index++,e.layer.setRawColors(e.rect,e.redoMemoryRect),{layer:e.layer,dirtyRect:e.rect}}},{key:"clear",value:function(){for(;this.headers.length>0;)this.headers.pop(),this.ringBuffer.pop();this.index=-1}}]),e}(),ue=function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).unmounted=!1,n.onWindowResize=n.onWindowResize.bind(Object(f.a)(Object(f.a)(n))),n.prepareDOM=n.prepareDOM.bind(Object(f.a)(Object(f.a)(n))),n.state={},window.addEventListener("resize",n.onWindowResize),n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e={width:this.props.width,height:this.props.height?this.props.height:"100%",position:"relative",overflow:"hidden"};return a.a.createElement("div",{className:this.props.className,style:e,ref:this.prepareDOM})}},{key:"componentDidUpdate",value:function(e){e.canvas===this.props.canvas&&e.forceDisableGPU===this.props.forceDisableGPU?void 0!==this.state.view&&(e.width===this.props.width&&e.height===this.props.height||this.state.view.setSize(this.calcViewSize()),e.disableEdit!==this.props.disableEdit&&this.state.view.disableEdit(!!this.props.disableEdit&&this.props.disableEdit),this.props.scale!==e.scale&&this.state.view.setScale(this.props.scale),this.props.offset.x===e.offset.x&&this.props.offset.y===e.offset.y||this.state.view.setOffset(this.props.offset),e.activeLayer!==this.props.activeLayer&&(void 0!==this.props.activeLayer&&this.props.canvas.setActiveLayer(this.props.activeLayer),this.props.canvas.render())):this.prepareView()}},{key:"componentWillUnmount",value:function(){void 0!==this.state.view&&this.state.view.dispose(),this.unmounted=!0}},{key:"onWindowResize",value:function(){var e=this;void 0!==this.state.view&&void 0!==this.state.container&&requestAnimationFrame(function(){if(!e.unmounted&&void 0!==e.state.view){var t=e.state.view;t.setSize(e.calcViewSize()),void 0!==e.props.onSizeChange&&e.props.onSizeChange(t,t.getSize())}})}},{key:"calcViewSize",value:function(){var e=void 0!==this.state.container?{width:this.state.container.clientWidth,height:this.state.container.clientHeight}:{width:100,height:100};return{width:void 0!==this.props.width?this.props.width:e.width,height:void 0!==this.props.height?this.props.height:e.height}}},{key:"prepareDOM",value:function(e){var t=this;null!==e?this.setState(function(t){return Object(s.a)({},t,{container:e})},function(){return t.prepareView()}):void 0!==this.state.view&&this.state.view.dispose()}},{key:"prepareView",value:function(){var e=this;if(void 0!==this.state.container){void 0!==this.state.view&&this.state.container.removeChild(this.state.view.getHTMLCanvas());var t=new ce(20971520,100),n=void 0!==this.props.forceDisableGPU&&this.props.forceDisableGPU,i=new se(this.calcViewSize(),this.props.canvas,n,t,this,!!this.props.disableEdit&&this.props.disableEdit);i.getHTMLCanvas().style.position="absolute",this.state.container.appendChild(i.getHTMLCanvas()),void 0!==this.props.activeLayer&&this.props.canvas.setActiveLayer(this.props.activeLayer),i.setScale(this.props.scale),i.setOffset(this.props.offset),i.invalidate(!0),this.setState(function(e){return void 0!==e.view&&e.view.dispose(),Object(s.a)({},e,{view:i})},function(){void 0!==e.props.onViewCreate&&e.props.onViewCreate(e.state.view),void 0!==e.props.onSizeChange&&e.props.onSizeChange(e.state.view,e.state.view.getSize()),i.onViewRender(function(t,n,i){void 0!==e.props.onViewRender&&e.props.onViewRender(t,n,i)})})}}},{key:"getPaintTool",value:function(e){var t=void 0;return"middle"===e?t=this.props.moveTool:"eraser"===e&&(t=this.props.eraserTool),t||this.props.activeTool||null}}]),t}(i.Component),he=function(){function e(t,n){Object(l.a)(this,e),this.width=t,this.height=n,this.layers=[],this.activeLayer=void 0,this.renderedLayer=void 0,this.drawingLayer=void 0,this.tempLayer=void 0,this.onRenders=[],this.renderedLayer=new q(t,n),this.drawingLayer=new q(t,n),this.tempLayer=new q(t,n)}return Object(c.a)(e,[{key:"getSize",value:function(){return{width:this.width,height:this.height}}},{key:"pushLayer",value:function(e){this.layers.push(e)}},{key:"clearLayer",value:function(){this.layers.length=0}},{key:"getLayers",value:function(){return this.layers}},{key:"getActiveLayer",value:function(){return this.activeLayer||null}},{key:"setActiveLayer",value:function(e){this.activeLayer=e}},{key:"getDrawingLayer",value:function(){return this.drawingLayer}},{key:"getRenderedLayer",value:function(){return this.renderedLayer}},{key:"render",value:function(e,t){var n=this;void 0===t&&(t=new L(0,0,this.width,this.height));var i=!0;this.layers.forEach(function(a){e&&a===n.activeLayer&&void 0!==n.drawingLayer?(I(P.DirectTop,n.tempLayer,a,t),I(n.drawingLayer.getBlendMode(),n.tempLayer,n.drawingLayer,t),I(i?P.DirectTop:a.getBlendMode(),n.renderedLayer,n.tempLayer,t)):I(i?P.DirectTop:a.getBlendMode(),n.renderedLayer,a,t),i=!1}),this.onRenders.forEach(function(e){return e(n,t)})}},{key:"onRender",value:function(e){this.onRenders.push(e)}},{key:"removeOnRender",value:function(e){var t=this.onRenders.indexOf(e);t<0||this.onRenders.splice(t,1)}}]),e}(),de=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:3,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:_.Black;Object(l.a)(this,e),this.radius=t,this.color=n}return Object(c.a)(e,[{key:"getName",value:function(){return"Pen"}},{key:"setRadius",value:function(e){this.radius=e}},{key:"setColor",value:function(e){this.color=e}},{key:"beginPaiting",value:function(e){return new ve(e,this.radius,this.color,P.AlphaBlend)}}]),e}(),fe=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:10;Object(l.a)(this,e),this.radius=t}return Object(c.a)(e,[{key:"getName",value:function(){return"Eraser"}},{key:"beginPaiting",value:function(e){return new ve(e,this.radius,_.Black,P.Erase)}}]),e}(),ve=function(){function e(t,n,i,a){Object(l.a)(this,e),this.paintingContext=t,this.penRadius=n,this.color=i,this.bakeMode=a,this.prevX=0,this.prevY=0,this.lastT=0,this.drawingLayer=void 0,this.drawingLayer=this.paintingContext.getView().getCanvas().getDrawingLayer()}return Object(c.a)(e,[{key:"start",value:function(e,t,n){return this.prevX=e,this.prevY=t,{isFinished:!1,dirtyRect:H(this.drawingLayer,e,t,this.getPenRadius(),this.color)}}},{key:"update",value:function(e,t,n){var i=function(e,t,n,i,a,r,o,s){var l=i-t,c=a-n,u=L.Empty,h=Math.sqrt(l*l+c*c);if(0==h)return{lastT:s,dirtyRect:u};for(var d=.5/h,f=s/h;f<1;){var v=t+l*f,m=n+c*f;u=u.merge(H(e,v,m,r,o));var p=r*d;p<1e-4&&(p=1e-4),f+=p}return{lastT:h*(f-1),dirtyRect:u}}(this.drawingLayer,this.prevX,this.prevY,e,t,this.getPenRadius(),this.color,this.lastT),a=i.lastT,r=i.dirtyRect;return this.prevX=e,this.prevY=t,this.lastT=a,{isFinished:!1,dirtyRect:r}}},{key:"end",value:function(){return{isFinished:!0,dirtyRect:L.Empty}}},{key:"cancel",value:function(){}},{key:"getBakeMode",value:function(){return this.bakeMode}},{key:"getPenRadius",value:function(){return this.penRadius}}]),e}(),me=function(){function e(){Object(l.a)(this,e)}return Object(c.a)(e,[{key:"getName",value:function(){return"Move"}},{key:"beginPaiting",value:function(e){return new pe(e)}}]),e}(),pe=function(){function e(t){Object(l.a)(this,e),this.paintingContext=t,this.startOffset={x:0,y:0},this.startViewOffset={x:0,y:0},this.view=void 0,this.scaleOption=void 0,this.view=this.paintingContext.getView(),this.scaleOption=this.view.getScaleOption(),this.view.setScaleOption({method:W.NearestNeighbor})}return Object(c.a)(e,[{key:"start",value:function(e,t,n){return t=-t,this.startViewOffset=this.view.getOffset(),this.startOffset={x:e*this.view.getScale()+this.startViewOffset.x,y:t*this.view.getScale()+this.startViewOffset.y},{isFinished:!1,dirtyRect:L.Empty}}},{key:"update",value:function(e,t,n){t=-t;var i=this.view.getOffset(),a=e*this.view.getScale()+i.x,r=t*this.view.getScale()+i.y,o=a-this.startOffset.x,s=r-this.startOffset.y,l={x:this.startViewOffset.x+o,y:this.startViewOffset.y+s};return this.view.setOffset(l),this.view.adjustOffset(),{isFinished:!1,dirtyRect:L.Empty}}},{key:"end",value:function(){return this.view.setScaleOption(this.scaleOption),{isFinished:!0,dirtyRect:L.Empty}}},{key:"cancel",value:function(){this.view.setScaleOption(this.scaleOption)}},{key:"getBakeMode",value:function(){return P.AlphaBlend}}]),e}(),ge=(n(5492),a.a.createContext({topBarVisible:!0,setTopBarVisibility:function(e){}})),be=function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).onPenToolClick=n.onPenToolClick.bind(Object(f.a)(Object(f.a)(n))),n.onEraserToolClick=n.onEraserToolClick.bind(Object(f.a)(Object(f.a)(n))),n.onUndoClick=n.onUndoClick.bind(Object(f.a)(Object(f.a)(n))),n.onRedoClick=n.onRedoClick.bind(Object(f.a)(Object(f.a)(n))),n.onClearAllClick=n.onClearAllClick.bind(Object(f.a)(Object(f.a)(n))),n.onPostClick=n.onPostClick.bind(Object(f.a)(Object(f.a)(n))),n.onResetParameter=n.onResetParameter.bind(Object(f.a)(Object(f.a)(n))),n.state={},n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e=T(this.props.canvas.getSize()),t=j(e,2),n=new L(0,0,e.x,e.y),i=T(this.props.mainViewSize),r=ie(R(S(j(i,2)),-1),this.props.mainViewScale,this.props.mainViewOffset,t),o=j(i,this.props.mainViewScale),s=new L(r.x,r.y,o.x,o.y),l=j({x:100,y:100},2),c={x:0,y:0},u=s.intersect(n),h=u.isEmpty()?"hidden":"visible",d=100/Math.max(e.x,e.y),f=ie(ne(u.offset,d,c,t),1,c,l),v=f.x,m=f.y,g=u.width*d,b=u.height*d;return a.a.createElement("div",{className:"toolbox"},a.a.createElement("div",null,a.a.createElement("h3",null,"Preview"),a.a.createElement("div",{className:"mini-map-container"},a.a.createElement("div",{className:"mini-map"},a.a.createElement("div",{className:"canvas-container"},a.a.createElement(ue,{width:100,height:100,scale:d,offset:c,canvas:this.props.canvas,forceDisableGPU:!0,disableEdit:!0})),a.a.createElement("div",{className:"show-rect",style:{visibility:h,left:v,top:m,width:g,height:b}})))),a.a.createElement("div",{className:"toolbox-menu"},a.a.createElement("div",null,a.a.createElement("h3",null,"\u30c4\u30fc\u30eb"),a.a.createElement("button",{onClick:this.onPenToolClick,disabled:this.props.activeTool===this.props.penTool},a.a.createElement(p.a,{icon:"pen"}),"\u30da\u30f3"),a.a.createElement("button",{onClick:this.onEraserToolClick,disabled:this.props.activeTool===this.props.eraserTool},a.a.createElement(p.a,{icon:"eraser"}),"\u6d88\u3057\u30b4\u30e0"),a.a.createElement("h3",null,"\u30a2\u30af\u30b7\u30e7\u30f3"),a.a.createElement("div",null,a.a.createElement("button",{onClick:this.onUndoClick,disabled:!this.props.canUndo},a.a.createElement(p.a,{icon:"undo"}),"\u623b\u3059"),a.a.createElement("button",{onClick:this.onRedoClick,disabled:!this.props.canRedo},a.a.createElement(p.a,{icon:"redo"}),"\u9032\u3081\u308b")),a.a.createElement("button",{onClick:this.onClearAllClick},a.a.createElement(p.a,{icon:"bomb"}),"\u5168\u6d88\u3057"),a.a.createElement("h3",null,"\u305d\u306e\u4ed6"),a.a.createElement(ge.Consumer,null,function(e){return e.topBarVisible?a.a.createElement("button",{onClick:function(){e.setTopBarVisibility(!1)}},"\u5168\u753b\u9762\u8868\u793a"):a.a.createElement("button",{onClick:function(){e.setTopBarVisibility(!0)}},"\u5168\u753b\u9762\u8868\u793a\u89e3\u9664")}),a.a.createElement("button",{onClick:this.onPostClick},"\u6295\u7a3f"))))}},{key:"onPenToolClick",value:function(){void 0!==this.props.onActiveToolChange&&this.props.onActiveToolChange(this.props.penTool)}},{key:"onEraserToolClick",value:function(){void 0!==this.props.onActiveToolChange&&this.props.onActiveToolChange(this.props.eraserTool)}},{key:"onUndoClick",value:function(){void 0!==this.props.onUndo&&this.props.onUndo()}},{key:"onRedoClick",value:function(){void 0!==this.props.onRedo&&this.props.onRedo()}},{key:"onClearAllClick",value:function(){void 0!==this.props.onClearAll&&this.props.onClearAll()}},{key:"onResetParameter",value:function(){void 0!==this.props.onResetParameter&&this.props.onResetParameter()}},{key:"onPostClick",value:function(){void 0!==this.props.onPost&&this.props.onPost()}}]),t}(i.Component),ye=n(45),Ee=n.n(ye),we=(n(5498),function(e){function t(){return Object(l.a)(this,t),Object(u.a)(this,Object(h.a)(t).apply(this,arguments))}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("div",{className:"loading"},a.a.createElement(p.a,{icon:"circle-notch",spin:!0,size:"4x"}))}}]),t}(i.Component)),Ce=n(71);n(5581);!function(e){e[e.Close=0]="Close",e[e.Post=1]="Post",e[e.Confirm=2]="Confirm",e[e.Posting=3]="Posting",e[e.Result=4]="Result",e[e.Error=5]="Error"}(ae||(ae={}));var ke=function(e){function t(e){var n;Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).unmounted=!1;var i=new q(955,500),a=new q(955,500);i.fill(_.White),a.fill(_.White);var r=new he(955,500);r.pushLayer(i),r.pushLayer(a),n.onSizeChange=n.onSizeChange.bind(Object(f.a)(Object(f.a)(n))),n.onViewCreate=n.onViewCreate.bind(Object(f.a)(Object(f.a)(n))),n.onViewRender=n.onViewRender.bind(Object(f.a)(Object(f.a)(n))),n.onActiveToolChange=n.onActiveToolChange.bind(Object(f.a)(Object(f.a)(n))),n.onUndo=n.onUndo.bind(Object(f.a)(Object(f.a)(n))),n.onRedo=n.onRedo.bind(Object(f.a)(Object(f.a)(n))),n.onClearAll=n.onClearAll.bind(Object(f.a)(Object(f.a)(n))),n.onReset=n.onReset.bind(Object(f.a)(Object(f.a)(n))),n.openModal=n.openModal.bind(Object(f.a)(Object(f.a)(n))),n.onRequestCloseModal=n.onRequestCloseModal.bind(Object(f.a)(Object(f.a)(n))),n.onCloseModal=n.onCloseModal.bind(Object(f.a)(Object(f.a)(n))),n.onCheckPost=n.onCheckPost.bind(Object(f.a)(Object(f.a)(n))),n.onPost=n.onPost.bind(Object(f.a)(Object(f.a)(n))),n.onTagChange=n.onTagChange.bind(Object(f.a)(Object(f.a)(n))),n.onAnswerChange=n.onAnswerChange.bind(Object(f.a)(Object(f.a)(n)));var o=new de(5),s=localStorage.getItem("tag");if(null===s)s="";else{var c=parseInt(localStorage.getItem("tag-time")||"0");(!Number.isFinite(c)||Date.now()-c>864e5)&&(s="",localStorage.removeItem("tag"),localStorage.removeItem("tag-time"))}return n.state={viewHeight:600,actualViewSize:{width:100,height:600},scale:1,offset:{x:0,y:0},dirty:!1,rawCanvas:r,activeLayer:a,penTool:o,moveTool:new me,eraserTool:new fe(10),activeTool:o,forceDisableGPU:!1,modalState:ae.Close,tag:s,answer:"",resultId:""},n.onBeforeUnload=n.onBeforeUnload.bind(Object(f.a)(Object(f.a)(n))),window.addEventListener("beforeunload",n.onBeforeUnload),n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e=this;return a.a.createElement("div",{className:"main-canvas-with-tool tool-box-right expand-height"},a.a.createElement("div",{className:"paint-grid-1"},a.a.createElement(ue,{scale:this.state.scale,offset:this.state.offset,canvas:this.state.rawCanvas,activeLayer:this.state.activeLayer,activeTool:this.state.activeTool,moveTool:this.state.moveTool,onSizeChange:this.onSizeChange,onViewCreate:this.onViewCreate,onViewRender:this.onViewRender})),a.a.createElement("div",{className:"paint-grid-2"},a.a.createElement(be,{canvas:this.state.rawCanvas,mainViewOffset:this.state.offset,mainViewScale:this.state.scale,mainViewSize:this.state.actualViewSize,penTool:this.state.penTool,eraserTool:this.state.eraserTool,activeTool:this.state.activeTool,onActiveToolChange:this.onActiveToolChange,canUndo:this.canUndo(),canRedo:this.canRedo(),onUndo:this.onUndo,onRedo:this.onRedo,onClearAll:this.onClearAll,onPost:this.openModal,onResetParameter:this.onReset})),a.a.createElement("div",{className:"paint-grid-3 menu-buttons"},a.a.createElement("button",{disabled:this.state.activeTool===this.state.penTool,onClick:function(){return e.onActiveToolChange(e.state.penTool)}},a.a.createElement(p.a,{icon:"pen"})),a.a.createElement("button",{disabled:this.state.activeTool===this.state.eraserTool,onClick:function(){return e.onActiveToolChange(e.state.eraserTool)}},a.a.createElement(p.a,{icon:"eraser"})),a.a.createElement("button",{disabled:!this.canUndo(),onClick:this.onUndo},a.a.createElement(p.a,{icon:"undo"})),a.a.createElement("button",{disabled:!this.canRedo(),onClick:this.onRedo},a.a.createElement(p.a,{icon:"redo"})),a.a.createElement("button",{onClick:this.onClearAll},a.a.createElement(p.a,{icon:"bomb"})),a.a.createElement("button",{onClick:this.openModal},a.a.createElement(p.a,{icon:"bars"})),a.a.createElement(Ee.a,{isOpen:this.state.modalState!==ae.Close,onRequestClose:this.onRequestCloseModal,shouldCloseOnEsc:!0},this.renderModal())),a.a.createElement(m.a,{when:this.state.dirty,message:"\u3053\u306e\u30da\u30fc\u30b8\u3092\u96e2\u308c\u307e\u3059\u304b\uff1f\u304a\u7d75\u63cf\u304d\u4e2d\u306e\u5185\u5bb9\u306f\u5931\u308f\u308c\u307e\u3059\u3002"}))}},{key:"componentWillUnmount",value:function(){this.unmounted=!0,window.removeEventListener("beforeunload",this.onBeforeUnload)}},{key:"openModal",value:function(){var e=this;this.state.rawView.toBlob().then(function(t){e.unmounted||e.setState(function(e){return void 0!==e.canvasBlobURL&&URL.revokeObjectURL(e.canvasBlobURL),Object(s.a)({},e,{canvasBlobURL:URL.createObjectURL(t),modalState:ae.Post})})})}},{key:"renderModal",value:function(){switch(this.state.modalState){case ae.Post:return this.renderPostModal();case ae.Confirm:return this.renderConfirmModal();case ae.Posting:return this.renderPostingModal();case ae.Result:return this.renderResultModal();case ae.Error:return this.renderErrorModal();default:return this.renderPostModal()}}},{key:"renderPostModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,void 0!==this.state.canvasBlobURL?a.a.createElement("img",{className:"pic",src:this.state.canvasBlobURL}):a.a.createElement("div",null)),a.a.createElement("form",{onSubmit:this.onCheckPost},a.a.createElement("div",{className:"paint-modal-field"},a.a.createElement("div",null,"\u30bf\u30b0",a.a.createElement("input",{className:"input-text",placeholder:"\u30bf\u30b0(\u52d5\u753bID\u306a\u3069)",value:this.state.tag,onChange:this.onTagChange})),a.a.createElement("div",null,"\u89e3\u7b54",a.a.createElement("input",{className:"input-text",placeholder:"\u3042\u306a\u305f\u306e\u89e3\u7b54",value:this.state.answer,onChange:this.onAnswerChange}))),a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{type:"button",onClick:this.onCloseModal},"\u9589\u3058\u308b"),a.a.createElement("button",null,"\u6295\u7a3f"))))}},{key:"renderConfirmModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u6295\u7a3f\u3057\u307e\u3059\u304b\uff1f"),a.a.createElement("div",null,void 0!==this.state.canvasBlobURL?a.a.createElement("img",{className:"pic",src:this.state.canvasBlobURL}):a.a.createElement("div",null)),a.a.createElement("div",{className:"paint-modal-field"},a.a.createElement("div",null,"\u30bf\u30b0",a.a.createElement("div",{className:"input-text"},this.state.tag)),a.a.createElement("div",null,"\u89e3\u7b54",a.a.createElement("div",{className:"input-text"},this.state.answer))),a.a.createElement("form",{onSubmit:this.onPost},a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{type:"button",onClick:this.onCloseModal},"\u9589\u3058\u308b"),a.a.createElement("button",null,"OK"))))}},{key:"renderPostingModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u6295\u7a3f\u4e2d..."),a.a.createElement(we,null))}},{key:"renderResultModal",value:function(){var e="/p/".concat(this.state.resultId),t={text:""===this.state.answer?"\u7d75\u3092\u6295\u7a3f\u3057\u307e\u3057\u305f":"\u7d75\u3092\u6295\u7a3f\u3057\u307e\u3057\u305f\n\u89e3\u7b54\u306f\u300c".concat(this.state.answer,"\u300d\u3067\u3059"),hashtags:"\u8af8\u8aac\u3042\u308b\u304a\u7d75\u63cf\u304d"},n=""===this.state.tag?"/list":"/list?t=".concat(this.state.tag),i="".concat(location.origin).concat(e);return a.a.createElement("div",null,a.a.createElement("div",null,"\u6295\u7a3f\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f"),a.a.createElement("div",null,a.a.createElement(v.b,{to:e,target:"new"},"\u6295\u7a3f\u3092\u78ba\u8a8d\u3059\u308b")),a.a.createElement("div",null,a.a.createElement(v.b,{to:n,target:"new"},"\u4ed6\u306e\u4eba\u306e\u6295\u7a3f\u3092\u898b\u308b")),a.a.createElement("div",{className:"share-button"},a.a.createElement(Ce.Share,{url:i,options:t})),a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{onClick:this.onCloseModal},"\u9589\u3058\u308b")))}},{key:"renderErrorModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u6295\u7a3f\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f"),a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{onClick:this.onCloseModal},"\u9589\u3058\u308b")))}},{key:"onSizeChange",value:function(e,t){this.setState(function(e){return Object(s.a)({},e,{actualViewSize:t})})}},{key:"onViewCreate",value:function(e){var t=this;this.setState(function(n){var i=e.getSize(),a=e.getCanvas().getSize(),r=t.state.scale,o=i.width/a.width*.9,l=i.height/a.height*.9;return r=Math.min(Math.max(o,l),1),Object(s.a)({},n,{rawView:e,scale:r})})}},{key:"onViewRender",value:function(e,t){this.setState(function(n){return Object(s.a)({},n,{scale:t.scale,offset:t.offset,dirty:e.canUndo()||e.canRedo()})})}},{key:"onActiveToolChange",value:function(e){this.setState(function(t){return Object(s.a)({},t,{activeTool:e})})}},{key:"canUndo",value:function(){return void 0!==this.state.rawView&&this.state.rawView.canUndo()}},{key:"canRedo",value:function(){return void 0!==this.state.rawView&&this.state.rawView.canRedo()}},{key:"onUndo",value:function(){void 0!==this.state.rawView&&this.state.rawView.undo()}},{key:"onRedo",value:function(){void 0!==this.state.rawView&&this.state.rawView.redo()}},{key:"onClearAll",value:function(){void 0!==this.state.rawView&&(window.confirm("\u5168\u6d88\u3057\u3057\u307e\u3059\u304b\uff1f\u3053\u306e\u64cd\u4f5c\u306f\u623b\u305b\u307e\u305b\u3093\u3002")&&(this.state.activeLayer.fill(_.White),this.state.rawView.reset()))}},{key:"post",value:function(){var e=Object(k.a)(C.a.mark(function e(){var t,n,i,a;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(void 0!==this.state.rawView){e.next=2;break}throw new Error("ravView is undefined.");case 2:return localStorage.setItem("tag",this.state.tag),localStorage.setItem("tag-time",Date.now().toString()),e.next=6,this.state.rawView.toBlob();case 6:return t=e.sent,(n=new FormData).append("file",t),n.append("tag",this.state.tag),n.append("answer",this.state.answer),n.append("author",this.getOrCreateValue("author",Oe)),n.append("signature",this.getOrCreateValue("signature",Oe)),e.next=15,fetch("/api/post",{method:"POST",body:n});case 15:if((i=e.sent).ok){e.next=18;break}throw new Error("http error.");case 18:return console.log("done"),e.next=21,i.json();case 21:if(void 0!==(a=e.sent).id){e.next=24;break}throw new Error("invalid response.");case 24:return e.abrupt("return",a.id);case 25:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"getOrCreateValue",value:function(e,t){var n=localStorage.getItem(e);return null!==n?n:(n=t(),localStorage.setItem(e,n),n)}},{key:"onReset",value:function(){this.setState(function(e){return Object(s.a)({},e,{offset:{x:0,y:0},scale:1})})}},{key:"onTagChange",value:function(e){var t=e.currentTarget.value;this.setState(function(e){return Object(s.a)({},e,{tag:t.substring(0,20)})})}},{key:"onAnswerChange",value:function(e){var t=e.currentTarget.value;this.setState(function(e){return Object(s.a)({},e,{answer:t.substring(0,20)})})}},{key:"onRequestCloseModal",value:function(){switch(this.state.modalState){case ae.Post:case ae.Confirm:case ae.Result:case ae.Error:return void this.onCloseModal();default:return}}},{key:"onCloseModal",value:function(){this.setState(function(e){return Object(s.a)({},e,{modalState:ae.Close,answer:""})})}},{key:"onCheckPost",value:function(e){e.preventDefault(),this.setState(function(e){return Object(s.a)({},e,{modalState:ae.Confirm})})}},{key:"onPost",value:function(e){var t=this;e.preventDefault(),this.post().then(function(e){t.unmounted||t.setState(function(t){return Object(s.a)({},t,{modalState:ae.Result,resultId:e})})}).catch(function(e){t.unmounted||(console.error(e),t.setState(function(e){return Object(s.a)({},e,{modalState:ae.Error})}))}),this.setState(function(e){return Object(s.a)({},e,{modalState:ae.Posting})})}},{key:"checkDirty",value:function(){return void 0!==this.state.rawView&&this.state.dirty}},{key:"onBeforeUnload",value:function(e){this.checkDirty()&&(e.preventDefault(),e.returnValue="")}}]),t}(i.Component);function Oe(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(e){var t=Number(e);return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})}var xe,Re=n(109),je=(n(5582),n(5583),function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).onChange=n.onChange.bind(Object(f.a)(Object(f.a)(n))),n.onSubmit=n.onSubmit.bind(Object(f.a)(Object(f.a)(n))),n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("form",{className:"searchbox",onSubmit:this.onSubmit},a.a.createElement("div",{className:"searchbox-container"},a.a.createElement("input",{type:"text",value:this.props.value,onChange:this.onChange,placeholder:this.props.placeholder}),a.a.createElement("button",null,a.a.createElement(p.a,{icon:"search"}))))}},{key:"onChange",value:function(e){this.props.onChange(e.currentTarget.value)}},{key:"onSubmit",value:function(e){e.preventDefault(),this.props.onSubmit()}}]),t}(i.Component)),Se=function(e){function t(e){var n;Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).timer=0,n.unmounted=!1,n.onAllClick=n.onAllClick.bind(Object(f.a)(Object(f.a)(n))),n.onMineClick=n.onMineClick.bind(Object(f.a)(Object(f.a)(n))),n.onTagChange=n.onTagChange.bind(Object(f.a)(Object(f.a)(n))),n.onSubmit=n.onSubmit.bind(Object(f.a)(Object(f.a)(n)));var i=n.parseQueryString(n.props.history.location.search),a=i.get("t")||"",r=i.get("a")||"";return n.state={entries:[],firstFetch:!0,tag:a,pollingTag:a,mine:"mine"===r,pollingVersion:0},n.polling(n.state.pollingTag,n.state.mine,0),n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"componentWillUnmount",value:function(){clearTimeout(this.timer),this.unmounted=!0}},{key:"polling",value:function(){var e=Object(k.a)(C.a.mark(function e(t,n,i){var a,r,o,l,c,u,h=this;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(e.prev=0,a="/api/list",r=new URLSearchParams,!n){e.next=11;break}if(null!==(o=localStorage.getItem("author"))){e.next=8;break}return this.setState(function(e){return Object(s.a)({},e,{firstFetch:!1,entries:[]})}),e.abrupt("return");case 8:r.set("a",o),e.next=13;break;case 11:""!==t&&r.set("t",t),this.state.entries.length>0&&r.set("r",this.state.entries[0].picture.id);case 13:return""!==(l=r.toString())&&(a+="?"+l),console.log("fetch:".concat(a)),e.next=18,fetch(a);case 18:if(!(c=e.sent).ok){e.next=26;break}return e.next=22,c.json();case 22:if(u=e.sent,!this.unmounted&&this.state.pollingVersion===i){e.next=25;break}return e.abrupt("return");case 25:this.setState(function(e){var t=[].concat(Object(Re.a)(u.map(function(t){return{picture:t,new:!e.firstFetch}})),Object(Re.a)(e.entries));return t.length>100&&(t=t.slice(0,100)),Object(s.a)({},e,{firstFetch:!1,entries:t})});case 26:if(e.prev=26,!this.unmounted&&this.state.pollingVersion===i&&!n){e.next=29;break}return e.abrupt("return");case 29:return this.timer=window.setTimeout(function(){return h.polling(t,!1,i)},1e4),e.finish(26);case 31:case"end":return e.stop()}},e,this,[[0,,26,31]])}));return function(t,n,i){return e.apply(this,arguments)}}()},{key:"render",value:function(){var e=this.state.mine?" mine":"";return a.a.createElement("div",{className:"piclist".concat(e)},a.a.createElement("nav",{className:"piclist-tab"},a.a.createElement("button",{className:"piclist-tab-button"+(this.state.mine?"":" active"),onClick:this.onAllClick},"\u3059\u3079\u3066"),a.a.createElement("button",{className:"piclist-tab-button"+(this.state.mine?" active":""),onClick:this.onMineClick},"\u81ea\u5206\u306e\u6295\u7a3f")),a.a.createElement("div",{className:"tag-search"},a.a.createElement(je,{value:this.state.tag,placeholder:"\u30bf\u30b0\u3067\u691c\u7d22",onChange:this.onTagChange,onSubmit:this.onSubmit})),a.a.createElement("div",{className:"picgrid"},this.state.firstFetch?a.a.createElement(we,null):this.renderPictureList()))}},{key:"componentDidUpdate",value:function(e,t){var n=this;if(e.location.search!==this.props.location.search){var i=this.parseQueryString(this.props.history.location.search),a=i.get("t")||"",r=i.get("a")||"";this.setState(function(e){return Object(s.a)({},e,{mine:"mine"===r,tag:a})},function(){return n.startPolling()})}}},{key:"renderPictureList",value:function(){var e=this;return this.state.entries.map(function(t){var n="/p/".concat(t.picture.id),i=""===t.picture.tag?"/list":"/list?t=".concat(t.picture.tag),r=e.nameToURL(t.picture.name),o="picgrid-item".concat(t.new?" new":"");return a.a.createElement("div",{key:r,className:o},a.a.createElement(v.b,{to:n},a.a.createElement("img",{className:"pic",src:r})),a.a.createElement("div",{className:"info"},a.a.createElement("div",{className:"answer"},a.a.createElement(v.b,{to:n},t.picture.answer)),a.a.createElement("div",{className:"tag"},a.a.createElement(v.b,{to:i},"#",t.picture.tag))))})}},{key:"onTagChange",value:function(e){this.setState(function(t){return Object(s.a)({},t,{tag:e})})}},{key:"onSubmit",value:function(){var e=this;this.state.pollingTag!==this.state.tag&&this.setState(function(e){return Object(s.a)({},e,{pollingTag:e.tag})},function(){return e.pushHistory()})}},{key:"pushHistory",value:function(){var e="/list";if(this.state.mine)e+="?a=mine";else{var t=this.state.pollingTag;""!==t&&(e+="?t="+t)}this.props.history.push(e)}},{key:"startPolling",value:function(){var e=this;clearTimeout(this.timer),this.setState(function(e){var t=e.pollingVersion+1;return Object(s.a)({},e,{pollingTag:e.tag,entries:[],firstFetch:!0,pollingVersion:t>100?0:t})},function(){return e.polling(e.state.pollingTag,e.state.mine,e.state.pollingVersion)})}},{key:"onAllClick",value:function(){var e=this;this.state.mine&&this.setState(function(e){return Object(s.a)({},e,{mine:!1})},function(){return e.pushHistory()})}},{key:"onMineClick",value:function(){var e=this;this.state.mine||this.setState(function(e){return Object(s.a)({},e,{mine:!0})},function(){return e.pushHistory()})}},{key:"nameToURL",value:function(e){return"https://storage.googleapis.com/yamatoiori-kawaii-oekaki.appspot.com/".concat(e)}},{key:"parseQueryString",value:function(e){var t=new Map;return e.length<2?t:(decodeURIComponent(e.substr(1)).split("&").forEach(function(e){var n=e.split("=");2==n.length&&t.set(n[0],n[1])}),t)}}]),t}(i.Component),Te=function(e){function t(){return Object(l.a)(this,t),Object(u.a)(this,Object(h.a)(t).apply(this,arguments))}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("div",null,"Not found.")}}]),t}(i.Component);n(5584);!function(e){e[e.Close=0]="Close",e[e.Confirm=1]="Confirm",e[e.Deleting=2]="Deleting",e[e.Result=3]="Result",e[e.Error=4]="Error"}(xe||(xe={}));var Me=function(e){function t(e){var n;Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).unmounted=!1;var i=window,a=e.match.params.id;if(void 0===a)return n.state={notFound:!0,isMine:!1,authorHash:"",loading:!1,modalState:xe.Close},Object(u.a)(n);var r=i.INITIAL_STATE;if(void 0!==r&&r.id!==a&&(r=void 0),n.onOpenModal=n.onOpenModal.bind(Object(f.a)(Object(f.a)(n))),n.onCloseModal=n.onCloseModal.bind(Object(f.a)(Object(f.a)(n))),n.onRequestModalClose=n.onRequestModalClose.bind(Object(f.a)(Object(f.a)(n))),n.onDelete=n.onDelete.bind(Object(f.a)(Object(f.a)(n))),n.onExit=n.onExit.bind(Object(f.a)(Object(f.a)(n))),void 0===r){n.state={notFound:!1,isMine:!1,authorHash:"",loading:!0,modalState:xe.Close};var o="/api/picture?id=".concat(a),c=localStorage.getItem("author");null!==c&&(o+="&self=".concat(c)),fetch(o).then(function(){var e=Object(k.a)(C.a.mark(function e(t){var i;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.json();case 2:if(i=e.sent,!n.unmounted){e.next=5;break}return e.abrupt("return");case 5:n.setState(function(e){return Object(s.a)({},e,{pic:i.picture,notFound:void 0===i.picture,loading:!1,authorHash:i.authorHash})},function(){return n.checkIsMine()});case 6:case"end":return e.stop()}},e)}));return function(t){return e.apply(this,arguments)}}()).catch(function(e){n.unmounted||n.setState(function(e){return Object(s.a)({},e,{notFound:!0,loading:!1})})})}else n.state={pic:r.picture,notFound:void 0===r.picture,isMine:!1,authorHash:r.authorHash,loading:!1,modalState:xe.Close},n.checkIsMine();return n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){if(this.state.loading)return a.a.createElement(we,null);if(this.state.notFound)return a.a.createElement(Te,null);var e=this.state.pic,t=this.nameToURL(e.name),n=location.href,i={text:""!==e.answer?"\u300c".concat(e.answer,"\u300d"):"\u30bf\u30a4\u30c8\u30eb\u306a\u3057",hashtags:"\u8af8\u8aac\u3042\u308b\u304a\u7d75\u63cf\u304d"};return a.a.createElement("div",{className:"picture"},a.a.createElement("div",null,a.a.createElement("img",{className:"pic",src:t})),a.a.createElement("div",{className:"info"},a.a.createElement("div",{className:"answer"},e.answer),a.a.createElement("div",{className:"tag"},"#",e.tag),a.a.createElement("div",{className:"share-button"},a.a.createElement(Ce.Share,{url:n,options:i})),this.state.isMine?this.renderDeleteForm():""),a.a.createElement(Ee.a,{isOpen:this.state.modalState!==xe.Close,onRequestClose:this.onRequestModalClose,shouldCloseOnEsc:!0},this.renderModal()))}},{key:"renderDeleteForm",value:function(){return a.a.createElement("form",{onSubmit:this.onOpenModal},a.a.createElement("button",{className:"delete"},"\u524a\u9664"))}},{key:"renderModal",value:function(){switch(this.state.modalState){case xe.Confirm:return this.renderConfirmModal();case xe.Deleting:return this.renderDeletingModal();case xe.Result:return this.renderResultModal();case xe.Error:return this.renderErrorModal();default:return a.a.createElement("div",null)}}},{key:"renderConfirmModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u672c\u5f53\u306b\u524a\u9664\u3057\u307e\u3059\u304b\uff1f"),a.a.createElement("div",null,a.a.createElement("strong",null,"\u3053\u306e\u64cd\u4f5c\u306f\u53d6\u308a\u6d88\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093")),a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{onClick:this.onCloseModal},"\u9589\u3058\u308b"),a.a.createElement("button",{onClick:this.onDelete,className:"delete"},"\u524a\u9664")))}},{key:"renderDeletingModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u524a\u9664\u4e2d..."),a.a.createElement(we,null))}},{key:"renderResultModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u524a\u9664\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f"),a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{onClick:this.onExit},"\u9589\u3058\u308b")))}},{key:"renderErrorModal",value:function(){return a.a.createElement("div",null,a.a.createElement("div",null,"\u524a\u9664\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f"),a.a.createElement("div",{className:"modal-buttons"},a.a.createElement("button",{onClick:this.onCloseModal},"\u9589\u3058\u308b")))}},{key:"onRequestModalClose",value:function(){switch(this.state.modalState){case xe.Confirm:this.onCloseModal()}}},{key:"onOpenModal",value:function(e){e.preventDefault(),this.setState(function(e){return Object(s.a)({},e,{modalState:xe.Confirm})})}},{key:"onCloseModal",value:function(){this.setState(function(e){return Object(s.a)({},e,{modalState:xe.Close})})}},{key:"onDelete",value:function(e){var t=this;e.preventDefault(),this.setState(function(e){return Object(s.a)({},e,{modalState:xe.Deleting})}),this.delete().then(function(){t.unmounted||t.setState(function(e){return Object(s.a)({},e,{modalState:xe.Result})})}).catch(function(){t.unmounted||t.setState(function(e){return Object(s.a)({},e,{modalState:xe.Error})})})}},{key:"onExit",value:function(){this.props.history.push("/list?a=mine")}},{key:"delete",value:function(){var e=Object(k.a)(C.a.mark(function e(){var t;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(this.state.isMine&&void 0!==this.state.pic){e.next=2;break}return e.abrupt("return");case 2:return(t=new FormData).append("id",this.state.pic.id),t.append("signature",localStorage.getItem("signature")||""),e.next=7,fetch("/api/delete",{method:"POST",body:t});case 7:if(e.sent.ok){e.next=10;break}throw new Error("http error.");case 10:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"checkIsMine",value:function(){var e=Object(k.a)(C.a.mark(function e(){var t,n,i,a,r;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(null!==(t=localStorage.getItem("author"))){e.next=3;break}return e.abrupt("return");case 3:for(n=new Uint8Array(t.length),i=0;i<t.length;i++)n[i]=t.charCodeAt(i);return e.next=7,crypto.subtle.digest("SHA-256",n);case 7:if(a=e.sent,!this.unmounted){e.next=10;break}return e.abrupt("return");case 10:r=new Uint8Array(a).reduce(function(e,t){var n=t.toString(16);return e+(1===n.length?"0"+n:n)},"").toLowerCase(),console.log(r),this.setState(function(e){return Object(s.a)({},e,{isMine:e.authorHash.toLowerCase()===r})});case 13:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"nameToURL",value:function(e){return"https://storage.googleapis.com/yamatoiori-kawaii-oekaki.appspot.com/".concat(e)}},{key:"componentWillUnmount",value:function(){this.unmounted=!0}}]),t}(i.Component),Fe=(n(5585),function(e){function t(){return Object(l.a)(this,t),Object(u.a)(this,Object(h.a)(t).apply(this,arguments))}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("div",{className:"home-top common-content-body"},this.renderAbout(),this.renderContentDescription(),this.renderHowToUse(),this.renderTips(),this.renderTermsOfService())}},{key:"renderAbout",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"\u3053\u306e\u30b5\u30a4\u30c8\u306b\u3064\u3044\u3066"),a.a.createElement("p",null,"\u3053\u306e\u30b5\u30a4\u30c8\u306f.LIVE\u6240\u5c5e\u306eVTuber\u3001\u30e4\u30de\u30c8\xa0\u30a4\u30aa\u30ea\u3055\u3093(",a.a.createElement("a",{href:"https://www.youtube.com/channel/UCyb-cllCkMREr9de-hoiDrg",target:"_blank"},"Youtube"),",",a.a.createElement("a",{href:"https://twitter.com/YamatoIori",target:"_blank"},"Twitter"),")\u306e\u975e\u516c\u5f0f\u30d5\u30a1\u30f3\u30b5\u30a4\u30c8\u3067\u3059\u3002"),a.a.createElement("p",null,"\u7d75\u63cf\u304d\u6b4c\u7528\u306e\u304a\u7d75\u63cf\u304d\u3092\u6295\u7a3f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"PC/\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u304b\u3089\u624b\u8efd\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u5229\u7528\u3059\u308b\u524d\u306b\u3053\u306e\u30da\u30fc\u30b8\u4e0b\u90e8\u306e\u5229\u7528\u898f\u7d04\u306b\u76ee\u3092\u901a\u3057\u3066\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null)),a.a.createElement("p",null,"\u306a\u306b\u304b\u3042\u308c\u3070",a.a.createElement("a",{href:"https://twitter.com/fi_n_o"},"@fi_n_o"),"\u304b",a.a.createElement("a",{href:"https://github.com/yaegaki/yamatoiori-kawaii-oekaki"},"github"),"\u306b\u9023\u7d61\u304f\u3060\u3055\u3044\u3002"))}},{key:"renderContentDescription",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"\u30b3\u30f3\u30c6\u30f3\u30c4"),a.a.createElement("h3",null,a.a.createElement(v.b,{to:"/paint"},"\u304a\u7d75\u63cf\u304d")),a.a.createElement("p",null,"\u7d75\u3092\u63cf\u304f\u30c4\u30fc\u30eb\u3067\u3059\u3002",a.a.createElement("br",null),"PC/\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u3069\u3061\u3089\u3067\u3082\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002",a.a.createElement("br",null),"\u63cf\u3044\u305f\u7d75\u3092\u6295\u7a3f\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,a.a.createElement(v.b,{to:"/list"},"\u30ea\u30b9\u30c8")),a.a.createElement("p",null,"\u4ed6\u306e\u4eba\u306e\u63cf\u3044\u305f\u7d75\u3092\u95b2\u89a7\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u30ea\u30b9\u30c8\u306f(\u307b\u307c)\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u66f4\u65b0\u3055\u308c\u307e\u3059\u3002",a.a.createElement("br",null)))}},{key:"renderHowToUse",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"\u4f7f\u3044\u65b9"),a.a.createElement("p",null,"\u3053\u3053\u3067\u306f\u5f53\u30b5\u30a4\u30c8\u306e\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\u7c21\u5358\u306b\u8aac\u660e\u3057\u307e\u3059\u3002"),a.a.createElement("h3",null,"\u304a\u7d75\u63cf\u304d\u3092\u3059\u308b(PC)"),a.a.createElement("p",null,a.a.createElement(v.b,{to:"/paint"},"\u304a\u7d75\u63cf\u304d\u306e\u30da\u30fc\u30b8"),"\u3092\u958b\u304f\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u306b\u306a\u308a\u307e\u3059\u3002"),a.a.createElement("p",null,a.a.createElement("img",{className:"ss",src:"/img/paint-pc.png"})),a.a.createElement("p",null,"\u767d\u3044\u5834\u6240\u304c\u30ad\u30e3\u30f3\u30d0\u30b9\u3067\u3053\u3053\u306b\u7d75\u3092\u63cf\u3044\u3066\u3044\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u30de\u30a6\u30b9\u3084\u30da\u30f3\u30bf\u30d6\u3067\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u7dda\u3092\u5f15\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u30de\u30a6\u30b9\u306e\u30db\u30a4\u30fc\u30eb\u3067\u62e1\u5927\u7e2e\u5c0f\u3001\u30db\u30a4\u30fc\u30eb\u306e\u30c9\u30e9\u30c3\u30b0\u3067\u79fb\u52d5\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("p",null,"\u53f3\u5074\u306e\u30c4\u30fc\u30eb\u30dc\u30c3\u30af\u30b9\u304b\u3089\u6d88\u3057\u30b4\u30e0\u3084\u4e00\u3064\u623b\u308b\u3001\u4e00\u3064\u9032\u3080\u6a5f\u80fd\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u63cf\u3044\u305f\u7d75\u306e\u6295\u7a3f\u3082\u3053\u306e\u30c4\u30fc\u30eb\u30dc\u30c3\u30af\u30b9\u304b\u3089\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,"\u304a\u7d75\u63cf\u304d\u3092\u3059\u308b(\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3)"),a.a.createElement("p",null,a.a.createElement(v.b,{to:"/paint"},"\u304a\u7d75\u63cf\u304d\u306e\u30da\u30fc\u30b8"),"\u3092\u958b\u304f\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u306b\u306a\u308a\u307e\u3059\u3002"),a.a.createElement("p",null,a.a.createElement("img",{className:"ss",src:"/img/paint-sp.png"})),a.a.createElement("p",null,"\u767d\u3044\u5834\u6240\u304c\u30ad\u30e3\u30f3\u30d0\u30b9\u3067\u3053\u3053\u306b\u7d75\u3092\u63cf\u3044\u3066\u3044\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u30bf\u30c3\u30c1\u3067\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u7dda\u3092\u5f15\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u30d4\u30f3\u30c1\u64cd\u4f5c\u3067\u62e1\u5927\u7e2e\u5c0f\u30012\u672c\u6307\u306e\u30c9\u30e9\u30c3\u30b0\u3067\u79fb\u52d5\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("p",null,"\u753b\u9762\u4e0b\u90e8\u306e\u30dc\u30bf\u30f3\u304b\u3089\u6d88\u3057\u30b4\u30e0\u3084\u4e00\u3064\u623b\u308b\u3001\u4e00\u3064\u9032\u3080\u6a5f\u80fd\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u63cf\u3044\u305f\u7d75\u306e\u6295\u7a3f\u3082\u3053\u306e\u30dc\u30bf\u30f3\u304b\u3089\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,"\u753b\u50cf\u306e\u6295\u7a3f"),a.a.createElement("p",null,"\u6295\u7a3f\u30dc\u30bf\u30f3(\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306f\u4e00\u756a\u53f3\u5074\u306e\u30dc\u30bf\u30f3)\u3092\u62bc\u3059\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u304c\u51fa\u3066\u304d\u307e\u3059\u3002"),a.a.createElement("p",null,a.a.createElement("img",{className:"ss",src:"/img/post-modal.png"})),a.a.createElement("p",null,"\u3053\u3053\u3067\u306f\u30bf\u30b0\u3068\u89e3\u7b54\u304c\u5165\u529b\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u30bf\u30b0\u306f\u63cf\u3044\u305f\u7d75\u3092\u30bf\u30b0\u4ed8\u3051\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002",a.a.createElement("br",null),"\u901a\u5e38\u306f\u7d75\u63cf\u304d\u6b4c\u56de\u306e\u52d5\u753bID\u3067\u554f\u984c\u306a\u3044\u3067\u3059\u304c\u81ea\u7531\u306b\u5165\u529b\u53ef\u80fd\u3067\u3059\u3002",a.a.createElement("br",null),"\u30c6\u30b9\u30c8\u3067\u6295\u7a3f\u3057\u305f\u3044\u5834\u5408\u306f\u30bf\u30b0\u3092\u300c",a.a.createElement(v.b,{to:"/list?t=\u30c6\u30b9\u30c8"},"\u30c6\u30b9\u30c8"),"\u300d\u306b\u3057\u3066\u4e0b\u3055\u3044\u3002",a.a.createElement("br",null),"\u89e3\u7b54\u306f\u63cf\u3044\u305f\u7d75\u304c\u4f55\u306a\u306e\u304b\u3092\u8a18\u5165\u3059\u308b\u90e8\u5206\u3067\u3059\u3002",a.a.createElement("br",null),"\u81ea\u7531\u306b\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null),"\u3069\u3061\u3089\u3082\u5165\u529b\u3057\u305f\u5f8c\u306b\u6295\u7a3f\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u6295\u7a3f\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,"\u6295\u7a3f\u3055\u308c\u305f\u7d75\u3092\u898b\u308b"),a.a.createElement("p",null,a.a.createElement(v.b,{to:"/list"},"\u30ea\u30b9\u30c8\u306e\u30da\u30fc\u30b8"),"\u3067\u6295\u7a3f\u3055\u308c\u305f\u7d75\u306e\u4e00\u89a7\u3092\u307f\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u4e00\u89a7\u306f\u4e00\u5b9a\u6642\u9593\u3067\u81ea\u52d5\u3067\u30ea\u30ed\u30fc\u30c9\u3055\u308c\u3001\u5e38\u306b\u6700\u65b0\u306e\u72b6\u614b\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002",a.a.createElement("br",null),"\u30bf\u30b0\u3067\u7d75\u3092\u7d5e\u308a\u8fbc\u3080\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u6295\u7a3f\u3055\u308c\u305f\u7d75\u306f\u6700\u65b0100\u4ef6\u306e\u307f\u95b2\u89a7\u53ef\u80fd\u3067\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,"\u6295\u7a3f\u3057\u305f\u7d75\u3092\u524a\u9664\u3059\u308b"),a.a.createElement("p",null,"\u81ea\u5206\u304c\u6295\u7a3f\u3057\u305f\u7d75\u306e\u6295\u7a3f\u30da\u30fc\u30b8\u306b\u306f\u524a\u9664\u30dc\u30bf\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002",a.a.createElement("br",null),"\u3053\u306e\u30dc\u30bf\u30f3\u304b\u3089\u6295\u7a3f\u3057\u305f\u7d75\u306e\u524a\u9664\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null)),a.a.createElement("p",null,"\u524a\u9664\u306f\u6295\u7a3f\u3057\u305f\u3068\u304d\u306b\u4f7f\u7528\u3057\u305f\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u306e\u307f\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002",a.a.createElement("br",null),"\u305f\u3060\u3057\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u6d88\u3059\u306a\u3069\u3092\u884c\u3063\u305f\u5834\u5408\u524a\u9664\u3067\u304d\u306a\u304f\u306a\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002",a.a.createElement("br",null),"\u524a\u9664\u3067\u304d\u306a\u304f\u306a\u3063\u3066\u56f0\u308b\u3088\u3046\u306a\u3082\u306e\u306f\u6295\u7a3f\u3057\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null)),a.a.createElement("p",null,a.a.createElement("img",{className:"ss",src:"/img/picture-detail-mine.png"})))}},{key:"renderTips",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"Tips"),a.a.createElement("h3",null,"\u63a8\u5968\u52d5\u4f5c\u74b0\u5883"),a.a.createElement("p",null,"PC: Chrome, Firefox",a.a.createElement("br",null),"\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3(iPhone): Safari",a.a.createElement("br",null),"\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3(Android): Chrome",a.a.createElement("br",null),"\u30bf\u30d6\u30ec\u30c3\u30c8(iPad): Safari",a.a.createElement("br",null),"\u3044\u305a\u308c\u3082\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u63a8\u5968\u3057\u307e\u3059\u3002",a.a.createElement("br",null),"\u304a\u305d\u3089\u304fIE\u3067\u306f\u52d5\u304d\u307e\u305b\u3093\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,"\u30ef\u30b3\u30e0\u306e\u30da\u30f3\u30bf\u30d6\u30ec\u30c3\u30c8\u3092\u4f7f\u7528\u3059\u308b(Windows)"),a.a.createElement("p",null,"\u30c7\u30b8\u30bf\u30eb\u30a4\u30f3\u30af\u6a5f\u80fd\u304c\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u308b\u3068\u3046\u307e\u304f\u52d5\u4f5c\u3057\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002",a.a.createElement("br",null),"\u30da\u30f3\u30bf\u30d6\u30ec\u30c3\u30c8\u306e\u8a2d\u5b9a\u753b\u9762\u3092\u958b\u304d\u30c7\u30b8\u30bf\u30eb\u30a4\u30f3\u30af\u6a5f\u80fd\u3092\u7121\u52b9\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null)),a.a.createElement("p",null,a.a.createElement("img",{className:"ss",src:"/img/wacom-setting.png"})),a.a.createElement("h3",null,"\u304a\u7d75\u63cf\u304d\u306e\u52d5\u4f5c\u304c\u304a\u304b\u3057\u304f\u306a\u3063\u305f\u5834\u5408"),a.a.createElement("p",null,"\u7533\u3057\u8a33\u3042\u308a\u307e\u305b\u3093\u304c\u30da\u30fc\u30b8\u3092\u30ea\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null)),a.a.createElement("h3",null,"\u30c4\u30a4\u30fc\u30c8\u3059\u308b\u3068\u304d\u306b\u5225\u306e\u30cf\u30c3\u30b7\u30e5\u30bf\u30b0\u3092\u3064\u3051\u308b\u5834\u5408"),a.a.createElement("p",null,"\u65e2\u5b58\u306e\u5185\u5bb9\u3092\u6d88\u3059\u304b\u8ffd\u52a0\u3067\u81ea\u5206\u306e\u597d\u304d\u306a\u30cf\u30c3\u30b7\u30e5\u30bf\u30b0\u3092\u3064\u3051\u3066\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null)))}},{key:"renderTermsOfService",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"\u5229\u7528\u898f\u7d04"),a.a.createElement("p",null,"\u3053\u306e\u30b5\u30a4\u30c8\u306f\u4e3b\u306b\u30a4\u30aa\u30ea\u30f3\u306e\u7d75\u63cf\u304d\u6b4c\u7528\u3068\u3057\u3066\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null),"\u7bc0\u5ea6\u3092\u5b88\u3063\u3066\u3044\u305f\u3060\u3051\u308c\u3070\u4ed6\u306e\u7528\u9014\u306b\u4f7f\u3063\u3066\u3044\u305f\u3060\u3044\u3066\u3082\u304b\u307e\u3044\u307e\u305b\u3093\u3002",a.a.createElement("br",null),"\u305f\u3060\u3057\u3001\u30c9\u30c3\u30c8\u30e9\u30a4\u30d6\u3068\u5168\u304f\u95a2\u4fc2\u306a\u3044\u3082\u306e\u306b\u3064\u3044\u3066\u306f\u3054\u9060\u616e\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null),"(\u30c6\u30b9\u30c8\u30bf\u30b0\u306b\u3064\u3044\u3066\u306f\u6bd4\u8f03\u7684\u306a\u3093\u3067\u3082\u3044\u3044\u3067\u3059\u304c\u5e38\u8b58\u306e\u7bc4\u56f2\u5185\u3067\u304a\u9858\u3044\u3057\u307e\u3059\u3002)",a.a.createElement("br",null)),a.a.createElement("p",null,"\u6295\u7a3f\u3055\u308c\u305f\u7d75\u306b\u3064\u3044\u3066\u7ba1\u7406\u8005\u306e\u90fd\u5408(\u30b5\u30fc\u30d0\u8ca0\u8377\u3084\u305d\u306e\u4ed6\u4e8b\u60c5)\u3067\u524a\u9664\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002",a.a.createElement("br",null),"\u524a\u9664\u3055\u308c\u3066\u56f0\u308b\u3082\u306e\u306b\u3064\u3044\u3066\u306f\u30ed\u30fc\u30ab\u30eb\u306b\u4fdd\u5b58\u3057\u3066\u304a\u304f\u304b\u305d\u3082\u305d\u3082\u6295\u7a3f\u3057\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002",a.a.createElement("br",null)))}}]),t}(i.Component));function Le(e,t){var n="https://www.youtube.com/watch?v=".concat(e);if(void 0!==t){var i=Math.floor(t/1e3-10);t>0&&(n+="&t=".concat(i))}return n}n(5586);var Pe=function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).state={},n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e=this.props,t=e.id,n=e.title,i=e.linkTo;return a.a.createElement("section",{className:"video-item"},a.a.createElement("div",null,a.a.createElement("div",{className:"thumbnail"},this.getThumbnailBody(t)),a.a.createElement("div",{className:"video-link"}),a.a.createElement("div",{className:"info-link"})),a.a.createElement("div",{className:"summary"},a.a.createElement("div",{className:"title"},void 0===i?n:a.a.createElement(v.b,{to:i},n)),a.a.createElement("div",null,this.props.children)))}},{key:"getThumbnailBody",value:function(e){var t=Le(e),n=function(e){return"https://img.youtube.com/vi/".concat(e,"/0.jpg")}(e);return a.a.createElement("a",{href:t,target:"_blank",rel:"noopener"},a.a.createElement("img",{src:n,width:150}))}}]),t}(a.a.Component),Ae=n(28),_e=n(108),Ge=(n(5587),n(5588),function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).vivus=void 0,n.prepareVivus=n.prepareVivus.bind(Object(f.a)(Object(f.a)(n))),n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("div",{className:"vivus-view",ref:this.prepareVivus})}},{key:"componentDidUpdate",value:function(e){e.progress===this.props.progress&&e.highlight===this.props.highlight||void 0!==this.vivus&&this.setFrameProgress(this.vivus)}},{key:"prepareVivus",value:function(e){var t=this;void 0===this.vivus&&null!==e&&(this.vivus=new Vivus(e,{type:"oneByOne",duration:1e3,start:"manual",file:this.props.file,onReady:function(e){return t.setFrameProgress(e)}}))}},{key:"setFrameProgress",value:function(e){if(e.setFrameProgress(this.props.progress),this.props.highlight){var t=this.props.progress*e.duration,n=0;e.map.forEach(function(i){var a=Math.min(n+i.duration,e.duration);t>n&&t<=a?i.el.classList.contains("hightlight")||i.el.classList.add("highlight"):i.el.classList.remove("highlight"),n=a})}else e.map.forEach(function(e){e.el.classList.remove("highlight")})}}]),t}(i.Component));function Ue(e){return new Promise(function(t){setTimeout(t,e)})}function Ve(){return new Promise(function(e){requestAnimationFrame(e)})}var Be=function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).unmounted=!1,n.prevDate=0,n.animation(),n.state={progress:0,highlight:!1},n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"componentWillUnmount",value:function(){this.unmounted=!0}},{key:"render",value:function(){var e=this.props.file,t=this.state,n=t.progress,i=t.highlight;return a.a.createElement(Ge,{file:e,highlight:i,progress:n})}},{key:"animation",value:function(){var e=Object(k.a)(C.a.mark(function e(){var t,n,i;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(this.unmounted){e.next=29;break}return t=0,e.next=4,Ue(500);case 4:this.prevDate=Date.now();case 5:if(!(t<1)){e.next=17;break}return e.next=8,Ve();case 8:if(!this.unmounted){e.next=10;break}return e.abrupt("return");case 10:n=Date.now(),i=(n-this.prevDate)/1e3/5,this.prevDate=n,t+=i,this.setState(Object(s.a)({},this.state,{progress:t,highlight:!0})),e.next=5;break;case 17:return e.next=19,Ve();case 19:if(!this.unmounted){e.next=21;break}return e.abrupt("return");case 21:return this.setState(Object(s.a)({},this.state,{progress:1,highlight:!1})),e.next=24,Ue(3e3);case 24:if(!this.unmounted){e.next=26;break}return e.abrupt("return");case 26:this.setState(Object(s.a)({},this.state,{progress:0,highlight:!1})),e.next=0;break;case 29:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()}]),t}(i.Component),Ne=function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).onLyricMenuClick=function(e){var t=e.currentTarget;n.setState(function(e){return Object(s.a)({},e,{anchorElem:t})})},n.onLyricMenuClose=function(){n.setState(function(e){return Object(s.a)({},e,{anchorElem:void 0})})},n.onAnswerExpansionChange=function(e,t){n.setState(function(e){return Object(s.a)({},e,{answerExpanded:t})})},n.state={answerVisible:!1,answerExpanded:!1,selectedIndex:0},n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e=this.props,t=e.ekakiuta,n=e.file,i=t.answer,r=t.lyrics;return a.a.createElement("section",{className:"ekakiuta"},r.length>1?a.a.createElement(Ae.d,null,a.a.createElement(Ae.e,{button:!0},a.a.createElement(Ae.f,{primary:a.a.createElement("span",{className:"lyric-list"},"".concat(this.state.selectedIndex+1,"\u56de\u76ee"),a.a.createElement(_e.a,null)),onClick:this.onLyricMenuClick}))):"",a.a.createElement(Ae.g,{anchorEl:this.state.anchorElem,open:void 0!==this.state.anchorElem,onClose:this.onLyricMenuClose},this.renderMenuItems(r.length)),a.a.createElement(Ae.i,{className:"lyric"},this.renderLyric(r[this.state.selectedIndex])),a.a.createElement(Ae.a,{onChange:this.onAnswerExpansionChange},a.a.createElement(Ae.c,{expandIcon:a.a.createElement(_e.b,null)},a.a.createElement(Ae.i,{className:"answer-header"},"\u6b63\u89e3\u3092\u898b\u308b")),a.a.createElement(Ae.b,{className:"answer"},a.a.createElement("div",{className:"vivus-container"},this.state.answerExpanded?a.a.createElement(Be,{file:n}):""),a.a.createElement("div",{className:"answer-title"},i))))}},{key:"renderMenuItems",value:function(e){for(var t=this,n=[],i=function(e){var i=e,r=a.a.createElement(Ae.h,{key:e,onClick:function(){return t.setState(Object(s.a)({},t.state,{anchorElem:void 0,selectedIndex:i}))},selected:t.state.selectedIndex==e},e+1,"\u56de\u76ee");n.push(r)},r=0;r<e;r++)i(r);return n}},{key:"renderLyric",value:function(e){for(var t=[],n=e.split("\n"),i=0;i<n.length;i++)i>0&&t.push(a.a.createElement("br",{key:"".concat(i,"-br")})),t.push(n[i]);return t}}]),t}(i.Component),De=[{id:"GO4_NJLVNfk",title:"\u3010\u7d75\u63cf\u304d\u6b4c\u3011\u4e00\u7dd2\u306b\u63cf\u3044\u3066\u3042\u3066\u3063\u3066\u306d\uff01\u3010\u30a2\u30a4\u30c9\u30eb\u90e8\u3011",date:"2018/11/28",desc:"\u8a18\u5ff5\u3059\u3079\u304d\u7b2c1\u56de\u914d\u4fe1\u3002"},{id:"yh7CLv2IEh4",title:"\u3010\u7d75\u63cf\u304d\u6b4c\u3011\u30a4\u30aa\u30ea\u304c\u6b4c\u3046\u304b\u3089\u5f53\u3066\u3066\u306d\uff01",date:"2018/12/24",desc:"\u7b2c2\u56de\u914d\u4fe1\u3002\u524d\u56de\u306b\u6bd4\u3079\u3066\u96e3\u6613\u5ea6\u4f4e\u3081\u3001\u7d50\u69cb\u7c21\u5358(\u30a4\u30aa\u30ea\u30f3\u6bd4)"},{id:"MM0QIjqHeiY",title:"\u3010\u7d75\u63cf\u304d\u6b4c\u3011\u30a4\u30aa\u30ea\u304c\u3046\u305f\u3046\u304b\u3089\u66f8\u3044\u3066\u306d\uff01\uff01",date:"2019/01/31",desc:"\u7b2c3\u56de\u914d\u4fe1\u3002\u5f53\u305f\u308b\u304b\u3069\u3046\u304b\u306f\u60f3\u50cf\u529b\u306e\u554f\u984c\u3002\u30a4\u30aa\u30ea\u30f3\u304c\u8a00\u3063\u305f\u3068\u304a\u308a\u306b\u63cf\u3051\u3070\u7d76\u5bfe\u306b\u5f53\u305f\u308b\u304b\u3089\u3042\u304d\u3089\u3081\u306a\u3044\u3067\u81ea\u4fe1\u3092\u6301\u3064\u3002"},{id:"k7C_dRsdwVQ",title:"\u3010\u7d75\u63cf\u304d\u6b4c\u3011\u65b0\u66f2\u4ed5\u5165\u308c\u307e\u3057\u305f\uff01\uff01\uff01\u30a4\u30aa\u30ea\u304c\u6b4c\u3046\u304b\u3089\u66f8\u3044\u3066\u306d\uff01\uff01",date:"2018/04/03",desc:"\u7b2c4\u56de\u914d\u4fe1\u3002\u7d75\u63cf\u304d\u6b4c\u3092\u4e8b\u524d\u306b\u9332\u97f3\u3057\u3066\u304a\u304f\u3053\u3068\u3067\u4e00\u56de\u76ee\u3068\u4e8c\u56de\u76ee\u3067\u5dee\u304c\u306a\u304f\u306a\u3063\u305f\u3002\u30cf\u30c3\u30d4\u30fc\u30bf\u30fc\u30f3\u3068\u4e09\u89d2\u30c1\u30e7\u30b3\u30d1\u30a4\u304c\u6765\u308b\u3068\u52d5\u7269\u3060\u3068\u308f\u304b\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u3002"}],ze={answer:"\u5bdd\u5e8a\u3092\u8972\u3063\u3066\u304f\u308b\u304a\u5316\u3051",lyrics:["\u3076\u3093\u3076\u3093\u3076\u3093\u3001\u7d75\u3092\u63cf\u304f\u3088\n\u305d\u3053\u306b\u306f\u5927\u304d\u306a\u56db\u89d2\u3044\u77f3\u304c\u3042\u308b\u3093\u3060\u3088\u3001\u77f3\u304c\u3042\u308b\n\u305d\u3057\u305f\u3089\u305d\u306e\u77f3\u306e\u4e2d\u306b\u3082\u3046\u4e00\u500b\u4e2d\u304f\u3089\u3044\u306e\u77f3\u304c\u3042\u308b\n\u305d\u3057\u305f\u3089\u305d\u306e\u77f3\u306e\u4e0a\u304b\u3089\u4f55\u304b\u68d2\u304c\u4e8c\u672c\u3001\u751f\u3048\u3066\u304d\u305f\n\u305d\u306e\u68d2\u306e\u4e0a\u306b\u307e\u3042\u308b\u3044\u30dc\u30fc\u30eb\u304c\u4e57\u3063\u304b\u3063\u305f\u3001\u30dc\u30fc\u30eb\u304c\u4e57\u308b\n\u305d\u3057\u305f\u3089\u305d\u306e\u4e2d\u306e\u77f3\u306e\u4e0b\u304b\u3089\u30cf\u30c3\u30d4\u30fc\u30bf\u30fc\u30f3\u306e\u534a\u5206\u3053\n\u4e8c\u500b\u3064\u3044\u305f\u3089\u6b21\u306f\u77f3\u306e\u4e0a\u304b\u3089\u30cf\u30c3\u30d4\u30fc\u30bf\u30fc\u30f3\u306e\u534a\u5206\u3053\u304c\u4e8c\u500b\u3064\u304f\u3088\u30fc\n(\u3082\u3046\u3059\u3050\u7d42\u308f\u308b\u3088)\n\u305d\u3057\u305f\u3089\u4e2d\u306e\u77f3\u306e\u53f3\u4e0b\u304b\u3089\u96eb\u5782\u308c\u3066\u304d\u305f\n\u305d\u306e\u96eb\u306e\u4e2d\u306bU\u304c\u4e8c\u3064\u4ed8\u3044\u305f\u3089\u306d\u3001\u9854\u3092\u4ed8\u3051\u308b"]},Ie=function(e){function t(){return Object(l.a)(this,t),Object(u.a)(this,Object(h.a)(t).apply(this,arguments))}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){return a.a.createElement("div",{className:"common-content-body"},this.renderAbout(),this.renderYoutubeEntries(),this.renderOtherEntries())}},{key:"renderAbout",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"\u904e\u53bb\u306e\u7d75\u63cf\u304d\u6b4c"),a.a.createElement("p",null,"\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u904e\u53bb\u306e\u7d75\u63cf\u304d\u6b4c\u3092\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002\u5404\u30da\u30fc\u30b8\u304b\u3089\u7d75\u63cf\u304d\u6b4c\u3068\u7b54\u3048\u306e\u78ba\u8a8d\u304c\u3067\u304d\u307e\u3059\u3002"))}},{key:"renderYoutubeEntries",value:function(){var e=this;return De.map(function(t){return e.renderYoutubeEntry(t)})}},{key:"renderYoutubeEntry",value:function(e){return a.a.createElement("section",{key:e.id},a.a.createElement(Pe,{id:e.id,title:e.title,linkTo:"/history/".concat(e.id)},e.desc?a.a.createElement("p",null,e.desc):""))}},{key:"renderOtherEntries",value:function(){return a.a.createElement("section",null,a.a.createElement("h2",null,"Youtube\u4ee5\u5916"),a.a.createElement("p",null,"Youtube\u4ee5\u5916\u3067\u884c\u308f\u308c\u305f\u7d75\u63cf\u304d\u6b4c\u3002"),a.a.createElement("h3",null,"\u30a2\u30cb\u30e1\u300c\u30d0\u30fc\u30c1\u30e3\u30eb\u3055\u3093\u306f\u307f\u3066\u3044\u308b\u300d\uff03\uff18\u3010\u5b9f\u9a13\u653e\u9001\u3011"),a.a.createElement(Ne,{ekakiuta:ze,file:"/history/nico-virtualsan/1.svg"}))}}]),t}(i.Component),Ye=function(e){function t(e){var n;Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).unmounted=!1,n.baseURL=void 0;var i=e.match.params.id;return void 0===i?(n.baseURL="",n.state={loading:!1,notFound:!0},Object(u.a)(n)):(n.state={loading:!0,notFound:!1},n.baseURL="/history/".concat(i,"/"),n.fetchInfo(i),n)}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e=this;if(this.state.loading)return a.a.createElement(we,null);if(this.state.notFound||void 0===this.state.info)return a.a.createElement(Te,null);var t=this.state.info;return a.a.createElement("div",{className:"common-content-body"},a.a.createElement("h2",null,"\u52d5\u753b\u60c5\u5831"),a.a.createElement(Pe,{id:t.id,title:t.title},t.desc?a.a.createElement("p",null,t.desc):""),t.entries.map(function(n,i){var r="".concat(e.baseURL).concat(i+1,".svg");return a.a.createElement("div",{key:i},a.a.createElement("h2",null,"\u7b2c",i+1,"\u554f"),a.a.createElement("a",{href:Le(t.id,1e3*e.timeStrToSec(n.time)),target:"_blank"},n.time,"\uff5e"),a.a.createElement(Ne,{ekakiuta:n.ekakiuta,file:r}))}))}},{key:"componentWillUnmount",value:function(){this.unmounted=!0}},{key:"fetchInfo",value:function(){var e=Object(k.a)(C.a.mark(function e(t){var n,i;return C.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,fetch("".concat(this.baseURL,"info.json"));case 3:return n=e.sent,e.next=6,n.json();case 6:if(i=e.sent,!this.unmounted){e.next=9;break}return e.abrupt("return");case 9:this.setState(function(){return{loading:!1,notFound:!1,info:i}}),e.next=15;break;case 12:e.prev=12,e.t0=e.catch(0),this.setState(function(){return{loading:!1,notFound:!0}});case 15:case"end":return e.stop()}},e,this,[[0,12]])}));return function(t){return e.apply(this,arguments)}}()},{key:"timeStrToSec",value:function(e){for(var t=e.split(":"),n=1,i=0,a=t.length-1;a>=0;a--)i+=Number(t[a])*n,n*=60;return i}}]),t}(i.Component);y.b.add(E.f,E.g,E.j,E.h,E.e,E.a,E.i,E.k,E.b,E.d,E.c),Ee.a.setAppElement("#root");var He=function(e){function t(e){var n;return Object(l.a)(this,t),(n=Object(u.a)(this,Object(h.a)(t).call(this,e))).state={appContextValue:{topBarVisible:!0,setTopBarVisibility:n.setTopBarVisibility.bind(Object(f.a)(Object(f.a)(n)))}},n}return Object(d.a)(t,e),Object(c.a)(t,[{key:"render",value:function(){var e="App expand-height ".concat(this.state.appContextValue.topBarVisible?"topbar-visible":"topbar-hidden");return a.a.createElement(ge.Provider,{value:this.state.appContextValue},a.a.createElement("div",{className:e},a.a.createElement(v.a,null,a.a.createElement(m.b,{path:"/",component:b}),a.a.createElement("section",{className:"content-container expand-height"},a.a.createElement(m.d,null,a.a.createElement(m.b,{path:"/",exact:!0,component:Fe}),a.a.createElement(m.b,{path:"/paint",exact:!0,component:ke}),a.a.createElement(m.b,{path:"/list",exact:!0,component:Se}),a.a.createElement(m.b,{path:"/history",exact:!0,component:Ie}),a.a.createElement(m.b,{path:"/history/:id",exact:!0,component:Ye}),a.a.createElement(m.b,{path:"/p/:id",exact:!0,component:Me}),a.a.createElement(m.b,{path:"/",render:function(){return a.a.createElement("div",null,"not found.")}}))))))}},{key:"setTopBarVisibility",value:function(e){this.setState(function(t){return Object(s.a)({},t,{appContextValue:Object(s.a)({},t.appContextValue,{topBarVisible:e})})},function(){return window.dispatchEvent(new Event("resize"))})}}]),t}(i.Component);Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));o.a.render(a.a.createElement(He,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(e){e.unregister()})}},[[5471,1,2]]]);
//# sourceMappingURL=main.12c6030d.chunk.js.map