text: (function(t){function e(e){for(var n,o,a=e[0],c=e[1],l=e[2],p=0,f=[];p<a.length;p++)o=a[p],Object.prototype.hasOwnProperty.call(r,o)&&r[o]&&f.push(r[o][0]),r[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(t[n]=c[n]);u&&u(e);while(f.length)f.shift()();return s.push.apply(s,l||[]),i()}function i(){for(var t,e=0;e<s.length;e++){for(var i=s[e],n=!0,a=1;a<i.length;a++){var c=i[a];0!==r[c]&&(n=!1)}n&&(s.splice(e--,1),t=o(o.s=i[0]))}return t}var n={},r={app:0},s=[];function o(e){if(n[e])return n[e].exports;var i=n[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=t,o.c=n,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(i,n,function(e){return t[e]}.bind(null,n));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="/";var a=window["webpackJsonp"]=window["webpackJsonp"]||[],c=a.push.bind(a);a.push=e,a=a.slice();for(var l=0;l<a.length;l++)e(a[l]);var u=c;s.push([0,"chunk-vendors"]),i()})({0:function(t,e,i){t.exports=i("56d7")},"3c31":function(t,e,i){"use strict";i("fe1a")},"56d7":function(t,e,i){"use strict";i.r(e);i("e260"),i("e6cf"),i("cca6"),i("a79d");var n=i("2b0e"),r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{attrs:{id:"app"}},[i("sandbox-container")],1)},s=[],o=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("section",{staticClass:"container"},[i("header",[i("div",{staticClass:"controls"},[i("button",{on:{click:t.showNewSpriteDialog}},[t._v("New sprite")]),i("button",{on:{click:t.onClearSkatch}},[t._v("Clear")]),i("button",{on:{click:t.onDeleteSelected}},[t._v("Delete selected")])]),t._m(0),i("div",{staticClass:"reserved"})]),i("div",{staticClass:"workarea"},[i("library",{class:{atTop:"library"===t.atTop},attrs:{list:t.library},on:{select:t.onLibSelect}}),i("sketch",{class:{atTop:"sketch"===t.atTop},attrs:{sprites:t.sprites,texts:t.texts,"is-active":"sketch"===t.atTop},on:{select:t.onSelectSprite,"put-text":t.onPutText,"remove-text":t.onRemoveText,"change-position":t.onChangeSpritePosition}})],1),t.newSprite.isVisible?i("new-sprite",{on:{submit:t.onSaveSprite}}):t._e()],1)},a=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"title"},[t._v("Sandbox "),i("span",[t._v("effus/sandbox")])])}],c=(i("4de4"),i("d81d"),i("a434"),i("96cf"),i("1da1")),l=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"svg-box",on:{click:t.onClick}},[i("img",{attrs:{src:t.svgFixed,alt:"svg",width:"100",height:"100"}})])},u=[],p=(i("a9e3"),i("ac1f"),i("5319"),i("dc46")),f=i.n(p),h={name:"svgBox",props:{sourse:{type:String,default:""},id:{type:Number|Object}},computed:{svgFixed:function(){var t=this.sourse.replace(/<svg>/g,"<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'>");return f()(t)}},methods:{onClick:function(){this.$emit("select",{sourse:this.sourse,id:this.id})}}},d=h,b=(i("3c31"),i("2877")),v=Object(b["a"])(d,l,u,!1,null,null,null),g=v.exports,x=i("9e77"),m=i.n(x),y=i("e67d"),w=i.n(y),S=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"library"},[t._l(this.list,(function(e){return[i("svg-box",{key:e.id,ref:"sprite-"+e.id,refInFor:!0,staticClass:"sprite",style:t.getLibPosition(e),attrs:{id:e.id,sourse:e.sourse},on:{select:function(i){return t.onSelectItem(e)}}})]}))],2)},k=[],C={name:"Library",components:{Moveable:m.a,SvgBox:g},props:{list:{type:Array,default:function(){return[]}}},methods:{onSelectItem:function(t){this.$emit("select",t)},getLibPosition:function(t){return"left: "+t.left+"px; top:"+t.top+"px;"}}},_=C,T=(i("877a"),Object(b["a"])(_,S,k,!1,null,null,null)),j=T.exports,O=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"new-object"},[i("div",{staticClass:"toolbar"},[i("button",{attrs:{type:"button"},on:{click:t.saveSprite}},[t._v("Save")]),i("button",{attrs:{type:"button"},on:{click:t.viewportClear}},[t._v("Clear")]),i("div",{staticClass:"colors right"},[i("button",{staticClass:"btn-bg white",on:{click:function(e){return t.setStrokeColor("#ffffff")}}}),i("button",{staticClass:"btn-bg orange",on:{click:function(e){return t.setStrokeColor("#ffb100")}}}),i("button",{staticClass:"btn-bg red",on:{click:function(e){return t.setStrokeColor("#ff0000")}}}),i("button",{staticClass:"btn-bg blue",on:{click:function(e){return t.setStrokeColor("#026cff")}}}),i("button",{staticClass:"btn-bg green",on:{click:function(e){return t.setStrokeColor("#00bc00")}}})]),this.history.length>0?i("button",{attrs:{type:"button"},on:{click:t.undo}},[t._v("Undo ("+t._s(this.history.length)+")")]):t._e(),i("button",{staticClass:"right"},[t._v("Close")])]),t.flagClear?i("div",{staticClass:"viewport"}):t._e()])},P=[],$=i("e483"),R=i.n($),D={name:"NewSprite",props:{},data:function(){return{stroke:"#ffb100",pencil:null,flagClear:!0,history:[]}},mounted:function(){this.mountSvg()},methods:{mountSvg:function(){this.pencil=R()({stroke:this.stroke,strokeWidth:5}),this.pencil.appendTo(".new-object .viewport"),this.pencil.on("points",this.onDrawPath)},saveSprite:function(){var t=this;return Object(c["a"])(regeneratorRuntime.mark((function e(){var i;return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return i=t.pencil.toSource(),t.flagClear=!1,e.next=4,t.$nextTick();case 4:t.flagClear=!0,t.$emit("submit",{id:(new Date).getTime(),sourse:i}),t.history=[];case 7:case"end":return e.stop()}}),e)})))()},setStrokeColor:function(t){this.color=t,this.pencil.stroke=t},viewportClear:function(){var t=this;return Object(c["a"])(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,t.resetViewport();case 2:t.history=[],t.mountSvg();case 4:case"end":return e.stop()}}),e)})))()},resetViewport:function(){var t=this;return Object(c["a"])(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return t.flagClear=!1,e.next=3,t.$nextTick();case 3:return t.flagClear=!0,e.next=6,t.$nextTick();case 6:case"end":return e.stop()}}),e)})))()},onDrawPath:function(){var t=this;return Object(c["a"])(regeneratorRuntime.mark((function e(){var i;return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,t.$nextTick();case 2:i=t.pencil.toSource(),t.history.push(i);case 4:case"end":return e.stop()}}),e)})))()},undo:function(){var t=this;return Object(c["a"])(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,t.resetViewport();case 2:return e.next=4,t.$nextTick();case 4:return t.history.length>0&&(t.history.splice(t.history.length-1),t.pencil=R.a.parse(t.history[t.history.length-1])),e.next=7,t.$nextTick();case 7:t.pencil.appendTo(".new-object .viewport"),t.setStrokeColor(t.color),t.pencil.strokeWidth=5,t.pencil.on("points",t.onDrawPath),t.pencil.enable();case 12:case"end":return e.stop()}}),e)})))()}}},L=D,V=(i("f21a"),Object(b["a"])(L,O,P,!1,null,null,null)),I=V.exports,M=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"sketch",staticClass:"sketch",class:{active:t.isActive},on:{dblclick:t.onDoubleClick}},[t._l(this.sprites,(function(e){return[e.selected?i("Moveable",t._b({key:e.id,staticClass:"sprite-wrapper",style:t.stylePosition(e),attrs:{id:e.id},on:{drag:t.handleDrag,dragEnd:function(i){return t.handleDragEnd(e)}}},"Moveable",t.moveable,!1),[i("svg-box",{ref:"sprite-"+e.id,refInFor:!0,staticClass:"sprite",attrs:{sourse:e.sourse}})],1):i("div",{key:e.id,staticClass:"sprite-wrapper placed",style:t.stylePosition(e),attrs:{id:e.id}},[i("svg-box",{ref:"sprite-"+e.id,refInFor:!0,staticClass:"sprite",attrs:{sourse:e.sourse},on:{select:function(i){return t.onSelectItem(e)}}})],1)]})),t._l(this.texts,(function(e,n){return[i("div",{key:n,staticClass:"text-sprite",style:t.getTextSpritePosition(e),on:{click:function(e){return t.onTextClick(n)}}},[t._v(t._s(e.text))])]})),t.text.isVisible?i("div",{staticClass:"text-input-wrapper",style:t.textInputPosition},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.text.value,expression:"text.value"}],attrs:{type:"text"},domProps:{value:t.text.value},on:{blur:t.setText,input:function(e){e.target.composing||t.$set(t.text,"value",e.target.value)}}})]):t._e()],2)},E=[],A={name:"Sketch",components:{Moveable:m.a,SvgBox:g},props:{sprites:{type:Array,default:function(){return[]}},texts:{type:Array,default:function(){return[]}},isActive:{type:Boolean,default:!1}},data:function(){return{moveable:{draggable:!0,throttleDrag:0,resizable:!1,throttleResize:1,keepRatio:!0,scalable:!1,throttleScale:0,rotatable:!1,throttleRotate:0},drag:{left:null,top:null},text:{isVisible:!1,position:{left:0,right:0},value:""}}},methods:{handleDrag:function(t){var e=t.target,i=t.left,n=t.top;e.style.left="".concat(i,"px"),e.style.top="".concat(n,"px"),this.drag.left=i,this.drag.top=n},handleDragEnd:function(t){this.$emit("change-position",{sprite:t,top:this.drag.top,left:this.drag.left})},stylePosition:function(t){return"left: "+t.left+"px; top: "+t.top+"px;"},onSelectItem:function(t){this.$emit("select",t)},onDoubleClick:function(t){this.text.isVisible||(this.text.value="",this.text.isVisible=!0,this.text.position.left=t.clientX-14,this.text.position.top=t.offsetY-10)},setText:function(t){this.text.isVisible=!1,this.text.value&&this.$emit("put-text",{text:this.text.value,top:this.text.position.top+4,left:this.text.position.left+4})},getTextSpritePosition:function(t){return"left: "+t.left+"px; top: "+t.top+"px;"},onTextClick:function(t){this.$emit("remove-text",{index:t})}},computed:{textInputPosition:function(){return"left: "+this.text.position.left+"px; top: "+this.text.position.top+"px;"}}},N=A,z=(i("dfd4"),Object(b["a"])(N,M,E,!1,null,null,null)),B=z.exports,F={name:"sandboxContainer",components:{SvgBox:g,Moveable:m.a,Library:j,NewSprite:I,Sketch:B},data:function(){return{library:[],sprites:[],texts:[],newSprite:{isVisible:!1},atTop:"library"}},mounted:function(){this.popupItem=this.$el},methods:{getActiveAreaHeight:function(){return(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-100},getLibraryCellSize:function(){return{width:110,height:110}},getLibPosition:function(t){var e=Math.floor(this.getActiveAreaHeight()/this.getLibraryCellSize().height),i=Math.floor(t/e),n=t-e*i;return{top:this.getLibraryCellSize().height*n,left:this.getLibraryCellSize().width*i}},onSaveSprite:function(t){var e=this.getLibPosition(this.library.length);t=Object.assign({},t,{libIndex:this.library.length,top:e.top,left:e.left,selected:!1}),this.library.push(t),this.newSprite.isVisible=!1},showNewSpriteDialog:function(){var t=this;return Object(c["a"])(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:t.newSprite.isVisible=!0;case 1:case"end":return e.stop()}}),e)})))()},onLibSelect:function(t){var e=this;return Object(c["a"])(regeneratorRuntime.mark((function i(){var n;return regeneratorRuntime.wrap((function(i){while(1)switch(i.prev=i.next){case 0:return e.disableSkatchSprites(),i.next=3,e.$nextTick();case 3:e.newSprite.isVisible=!1,n=e.getLibPosition(t.libIndex),e.sprites.push(Object.assign({},t,{libId:t.id,top:n.top,left:n.left,selected:!0})),e.atTop="sketch";case 7:case"end":return i.stop()}}),i)})))()},onChangeSpritePosition:function(t){this.sprites=this.sprites.map((function(e){return e.id===t.sprite.id&&(e.top=t.top,e.left=t.left,e.selected=!1,e.id=Math.random()),e})),this.atTop="library"},onSelectSprite:function(t){this.newSprite.isVisible=!1,this.sprites=this.sprites.map((function(e){return e.id===t.id&&(e.selected=!0),e})),this.disableLibSprites(),this.atTop="library"},onClearSkatch:function(){this.sprites=[],this.atTop="library",this.newSprite.isVisible=!1},disableLibSprites:function(){this.library=this.library.map((function(t){return t.selected=!1,t}))},disableSkatchSprites:function(){this.sprites=this.sprites.map((function(t){return t.selected=!1,t}))},onDeleteSelected:function(){var t=this;this.library=this.library.filter((function(t){return!1===t.selected})),this.library=this.library.map((function(e,i){var n=t.getLibPosition(i);return e.top=n.top,e.left=n.left,e})),this.sprites=this.sprites.filter((function(t){return!1===t.selected})),this.atTop="library"},onPutText:function(t){this.texts.push(t)},onRemoveText:function(t){this.texts.splice(t.index,1)}},directives:{ClickOutside:w.a}},H=F,J=(i("c425"),Object(b["a"])(H,o,a,!1,null,null,null)),W=J.exports,U={name:"App",components:{sandboxContainer:W}},X=U,Y=(i("5c0b"),Object(b["a"])(X,r,s,!1,null,null,null)),q=Y.exports;n["a"].config.productionTip=!1,new n["a"]({render:function(t){return t(q)}}).$mount("#app")},"5c0b":function(t,e,i){"use strict";i("9c0c")},"7d62":function(t,e,i){},"877a":function(t,e,i){"use strict";i("9396")},9396:function(t,e,i){},"9c0c":function(t,e,i){},a073:function(t,e,i){},a67f:function(t,e,i){},c425:function(t,e,i){"use strict";i("a67f")},dfd4:function(t,e,i){"use strict";i("a073")},f21a:function(t,e,i){"use strict";i("7d62")},fe1a:function(t,e,i){}});
  //# sourceMappingURL=app.6cd55a8d.js.map