diff --git a/css/piskel-style-packaged-2014-07-12-09-26.css b/css/piskel-style-packaged-2014-07-13-12-45.css similarity index 98% rename from css/piskel-style-packaged-2014-07-12-09-26.css rename to css/piskel-style-packaged-2014-07-13-12-45.css index 07949df9..dce0cf44 100644 --- a/css/piskel-style-packaged-2014-07-12-09-26.css +++ b/css/piskel-style-packaged-2014-07-13-12-45.css @@ -571,151 +571,7 @@ body { border: gold 1px solid; } -/************************************************************************************************/ -/* Gif/Png Export panel */ -/************************************************************************************************/ -.gif-upload-button, -.gif-render-button { - margin-top : 10px; - margin-right : 10px; -} - -.gif-export-radio-group { - margin:10px 0; -} - -.gif-export-progress-status { - margin-left: 5px; -} - -.gif-export-progress-bar { - margin-top:5px; - height:3px; - width: 0; - background:gold; -} - -.png-export-preview { - margin:10px 0; - overflow: hidden; -} - -.png-export-preview img { - float: left; -} - -.png-upload-status { - margin : 10px 0; -} - -.gif-upload-status, -.gif-export-preview { - float : left; -} - -.gif-export-preview { - -} - -.gif-upload-status { - width: 180px; - margin-left: 5px; - margin-top: 10px; -} - - -.gif-export-preview, -.png-export-preview { - margin-top:10px; - position:relative; -} - -.gif-export-preview, -.png-export-preview { - max-width:32px; - max-height:32px; -} - -.png-export-preview { - max-width:240px; -} - -.preview-upload-ongoing:before{ - content: "Upload ongoing ..."; - position: absolute; - display: block; - height: 100%; - width: 100%; - text-align: center; - padding-top: 45%; - box-sizing:border-box; - -moz-box-sizing:border-box; - background: rgba(0,0,0,0.5); - color: white; -} - -/************************************************************************************************/ -/* Import panel */ -/************************************************************************************************/ - -.import-section, -.resize-section { - margin: 10px 0; -} - -.import-section-title { - display : inline-block; -} - -.import-section-title-small { - width: 55px; -} - -.import-section-disabled { - color : #888; -} - -.import-section-preview { - display : inline-block; - height : 60px; - width: 60px; - border : 1px dashed #999; - border-radius: 3px; -} - -.import-size-field, -.resize-size-field { - width: 50px; - margin-right: 8px; - text-align: right; -} - -.import-size-field:nth-of-type(2), -.resize-size-field:nth-of-type(2) { - margin-left: 5px; -} - -.file-input-button { - margin-right: 8px; - border-radius: 2px; -} - -.import-image-file-name { - display: inline-block; - overflow: hidden; - - height: 2rem; - word-break : break-all; - vertical-align: middle; - font-style: italic; - font-weight: normal; - text-shadow: none; -} - -[name=smooth-resize-checkbox] { - margin : 0 8px; -} /************************************************************************************************/ /* Save panel */ @@ -739,6 +595,89 @@ body { color: white; font-style: normal; } +/*******************************/ +/* Gif/Png Export Setting panel*/ +/*******************************/ +.gif-download-button, +.gif-render-button { + margin-top : 10px; + margin-right : 10px; +} + +.gif-export-preview, +.png-export-preview { + position:relative; + margin-top:10px; + max-height:32px; +} + +.gif-export-preview { + max-width:32px; +} + +.png-export-preview { + margin:10px 0; + overflow: hidden; +} + +.png-export-preview img { + float: left; +} + +.gif-upload-status { + width: 180px; + margin-left: 5px; + margin-top: 10px; +} + +.gif-upload-status, +.gif-export-preview { + float : left; +} + +.preview-upload-ongoing:before{ + content: "Upload ongoing ..."; + position: absolute; + display: block; + height: 100%; + width: 100%; + text-align: center; + padding-top: 45%; + box-sizing:border-box; + -moz-box-sizing:border-box; + background: rgba(0,0,0,0.5); + color: white; +} + +.gif-export-progress-status { + margin-left: 5px; +} + +.gif-export-progress-bar { + margin-top:5px; + height:3px; + width: 0; + background:gold; +} + +/************************************************************************************************/ +/* Import panel */ +/************************************************************************************************/ + +.import-section, +.resize-section { + margin: 10px 0; +} + +.file-input-button { + margin-right: 8px; + border-radius: 2px; +} + +.import-highlight { + font-weight: bold; + color: white; +} .tools-wrapper, .options-wrapper, @@ -1225,6 +1164,61 @@ body { cursor: pointer; } +/************************************************************************************************/ +/* Import dialog */ +/************************************************************************************************/ + +.import-section-preview { + display : inline-block; + height : 60px; + width: 60px; + border : 1px dashed #999; + border-radius: 3px; +} + +.dialog-section-title { + display : inline-block; + width: 55px; +} + +.import-size-field, +.resize-size-field { + width: 50px; + margin-right: 8px; + text-align: right; +} + +.import-size-field:nth-of-type(2), +.resize-size-field:nth-of-type(2) { + margin-left: 5px; +} + +.import-image-file-name { + display: inline-block; + overflow: hidden; + + height: 2rem; + word-break : break-all; + vertical-align: middle; + font-style: italic; + font-weight: normal; + text-shadow: none; +} + +[name=smooth-resize-checkbox] { + margin : 0 8px; +} + +.dialog-import-body { + padding:10px 20px; + font-size:1.5em +} + +.import-button { + font-size: 1em; + height: auto; + padding: 5px 10px; +} .palette-manager-wrapper { height: 100%; position: relative; @@ -1452,7 +1446,7 @@ body { /* Browse local piskels panel */ /************************************************************************************************/ -.local-piskels-list { +.local-piskel-list { width: 100%; } @@ -1468,12 +1462,19 @@ body { font-weight : normal; } -.local-piskels-list a { +.local-piskel-list a { text-decoration: none; } -.local-piskels-list a:hover { + +.local-piskel-list a:hover { text-decoration: underline; } + +.local-piskel-list-head { + font-weight: bold; + color: gold; +} + .local-piskel-load-button, .local-piskel-delete-button { width : 75px; diff --git a/index.html b/index.html index 553d7e87..468cb0a0 100644 --- a/index.html +++ b/index.html @@ -54,11 +54,10 @@
Add new frame
",this.container.append(e);var f=a>1;f&&this.initDragndropBehavior_(),this.updateScrollerOverflows()},a.PreviewFilmController.prototype.initDragndropBehavior_=function(){$("#preview-list").sortable({placeholder:"preview-tile-drop-proxy",update:$.proxy(this.onUpdate_,this),items:".preview-tile"}),$("#preview-list").disableSelection()},a.PreviewFilmController.prototype.onUpdate_=function(a,b){var c=parseInt(b.item.data("tile-number"),10),d=$(".preview-tile").index(b.item);this.piskelController.moveFrame(c,d),this.piskelController.setCurrentFrameIndex(d)},a.PreviewFilmController.prototype.createPreviewTile_=function(a){var c=this.piskelController.getCurrentLayer().getFrameAt(a),d=document.createElement("li");d.setAttribute("data-tile-number",a),d.setAttribute("data-tile-action",b.SELECT),d.classList.add("preview-tile"),this.piskelController.getCurrentFrame()==c&&d.classList.add("selected");var e=document.createElement("div");e.classList.add("canvas-container",pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));var f=document.createElement("div");f.className="canvas-background",e.appendChild(f);var g=document.createElement("button");if(g.setAttribute("rel","tooltip"),g.setAttribute("data-placement","right"),g.setAttribute("data-tile-number",a),g.setAttribute("data-tile-action",b.CLONE),g.setAttribute("title","Duplicate this frame"),g.className="tile-overlay duplicate-frame-action",d.appendChild(g),e.appendChild(this.getCanvasForFrame(c)),d.appendChild(e),a>0||this.piskelController.getFrameCount()>1){var h=document.createElement("button");h.setAttribute("rel","tooltip"),h.setAttribute("data-placement","right"),h.setAttribute("title","Delete this frame"),h.setAttribute("data-tile-number",a),h.setAttribute("data-tile-action",b.DELETE),h.className="tile-overlay delete-frame-action",d.appendChild(h);var i=document.createElement("div");i.className="tile-overlay dnd-action",d.appendChild(i)}var j=document.createElement("div");return j.className="tile-overlay tile-count",j.innerHTML=a+1,d.appendChild(j),d},a.PreviewFilmController.prototype.getCanvasForFrame=function(a){var b=this.cachedFrameProcessor.get(a,this.zoom);return b},a.PreviewFilmController.prototype.frameToPreviewCanvas_=function(a){var b=new pskl.rendering.CanvasRenderer(a,this.zoom);b.drawTransparentAs(Constants.TRANSPARENT_COLOR);var c=b.render();return c.classList.add("tile-view","canvas"),c},a.PreviewFilmController.prototype.clonePreviewCanvas_=function(a){var b=pskl.CanvasUtils.clone(a);return b.classList.add("tile-view","canvas"),b},a.PreviewFilmController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=a.getHeight(),c=a.getWidth();return Math.min(Constants.PREVIEW_FILM_SIZE/b,Constants.PREVIEW_FILM_SIZE/c)}}(),function(){var a=$.namespace("pskl.controller");a.LayersListController=function(a){this.piskelController=a},a.LayersListController.prototype.init=function(){this.layerItemTemplate_=pskl.utils.Template.get("layer-item-template"),this.rootEl=document.querySelector(".layers-list-container"),this.layersListEl=document.querySelector(".layers-list"),this.toggleLayerPreviewEl=document.querySelector(".layers-toggle-preview"),this.rootEl.addEventListener("click",this.onClick_.bind(this)),this.toggleLayerPreviewEl.addEventListener("click",this.toggleLayerPreview_.bind(this)),$.subscribe(Events.PISKEL_RESET,this.renderLayerList_.bind(this)),pskl.app.shortcutService.addShortcut("alt+L",this.toggleLayerPreview_.bind(this)),this.renderLayerList_(),this.updateToggleLayerPreview_(),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this))},a.LayersListController.prototype.renderLayerList_=function(){this.layersListEl.innerHTML="";var a=this.piskelController.getLayers();a.forEach(this.addLayerItem.bind(this))},a.LayersListController.prototype.updateToggleLayerPreview_=function(){var a="layers-toggle-preview-enabled";pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)?this.toggleLayerPreviewEl.classList.add(a):this.toggleLayerPreviewEl.classList.remove(a)},a.LayersListController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.LAYER_PREVIEW&&this.updateToggleLayerPreview_()},a.LayersListController.prototype.addLayerItem=function(a,b){var c=this.piskelController.getCurrentLayer()===a,d=pskl.utils.Template.replace(this.layerItemTemplate_,{layername:a.getName(),layerindex:b,"isselected:current-layer-item":c}),e=pskl.utils.Template.createFromHTML(d);this.layersListEl.insertBefore(e,this.layersListEl.firstChild)},a.LayersListController.prototype.onClick_=function(a){var b,c=a.target||a.srcElement;c.classList.contains("button")?this.onButtonClick_(c):c.classList.contains("layer-item")?(b=c.dataset.layerIndex,this.piskelController.setCurrentLayerIndex(parseInt(b,10))):c.classList.contains("edit-icon")&&(b=c.parentNode.dataset.layerIndex,this.renameLayerAt_(b))},a.LayersListController.prototype.renameLayerAt_=function(a){var b=this.piskelController.getLayerAt(a),c=window.prompt("Please enter the layer name",b.getName());c&&(this.piskelController.renameLayerAt(a,c),this.renderLayerList_())},a.LayersListController.prototype.onButtonClick_=function(a){var b=a.getAttribute("data-action");"up"==b?this.piskelController.moveLayerUp():"down"==b?this.piskelController.moveLayerDown():"add"==b?this.piskelController.createLayer():"delete"==b&&this.piskelController.removeCurrentLayer()},a.LayersListController.prototype.toggleLayerPreview_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW,!a)}}(),function(){var a=$.namespace("pskl.controller"),b=200;a.AnimatedPreviewController=function(a,b){this.piskelController=a,this.container=b,this.elapsedTime=0,this.currentIndex=0,this.setFPS(Constants.DEFAULT.FPS),this.piskelController.getCurrentFrame(),this.renderer=new pskl.rendering.frame.TiledFrameRenderer(this.container)},a.AnimatedPreviewController.prototype.init=function(){$("#preview-fps")[0].addEventListener("change",this.onFPSSliderChange.bind(this)),document.querySelector(".right-column").style.width=Constants.ANIMATED_PREVIEW_WIDTH+"px",this.toggleOnionSkinEl=document.querySelector(".preview-toggle-onion-skin"),this.toggleOnionSkinEl.addEventListener("click",this.toggleOnionSkin_.bind(this)),pskl.app.shortcutService.addShortcut("alt+O",this.toggleOnionSkin_.bind(this)),$.subscribe(Events.FRAME_SIZE_CHANGED,this.onFrameSizeChange_.bind(this)),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this)),this.updateZoom_(),this.updateOnionSkinPreview_()},a.AnimatedPreviewController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.ONION_SKIN?this.updateOnionSkinPreview_():(this.updateZoom_(),this.updateContainerDimensions_())},a.AnimatedPreviewController.prototype.updateOnionSkinPreview_=function(){var a="preview-toggle-onion-skin-enabled";pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)?this.toggleOnionSkinEl.classList.add(a):this.toggleOnionSkinEl.classList.remove(a)},a.AnimatedPreviewController.prototype.updateZoom_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW),b=a?1:this.calculateZoom_();this.renderer.setZoom(b)},a.AnimatedPreviewController.prototype.getZoom=function(){return this.calculateZoom_()},a.AnimatedPreviewController.prototype.getCoordinates=function(a,b){var c=this.container.offset();a-=c.left,b-=c.top;var d=this.getZoom();return{x:Math.floor(a/d),y:Math.floor(b/d)}},a.AnimatedPreviewController.prototype.onFPSSliderChange=function(){this.setFPS(parseInt($("#preview-fps")[0].value,10))},a.AnimatedPreviewController.prototype.setFPS=function(a){this.fps=a,$("#preview-fps").val(this.fps),$("#display-fps").html(this.fps+" FPS")},a.AnimatedPreviewController.prototype.getFPS=function(){return this.fps},a.AnimatedPreviewController.prototype.render=function(a){this.elapsedTime+=a;var b=Math.floor(this.elapsedTime/(1e3/this.fps));if(b!=this.currentIndex){this.currentIndex=b,this.piskelController.hasFrameAt(this.currentIndex)||(this.currentIndex=0,this.elapsedTime=0);var c=this.piskelController.getFrameAt(this.currentIndex);this.renderer.render(c)}},a.AnimatedPreviewController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=200,c=b/a.getHeight(),d=b/a.getWidth();return Math.min(c,d)},a.AnimatedPreviewController.prototype.onFrameSizeChange_=function(){this.updateZoom_(),this.updateContainerDimensions_()},a.AnimatedPreviewController.prototype.updateContainerDimensions_=function(){var a,c,d=this.container.get(0),e=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);if(e)a=b,c=b;else{var f=this.getZoom(),g=this.piskelController.getCurrentFrame();a=g.getHeight()*f,c=g.getWidth()*f}d.style.height=a+"px",d.style.width=c+"px",d.style.marginTop=(b-a)/2+"px",d.style.marginBottom=(b-a)/2+"px",d.style.marginLeft=(b-c)/2+"px",d.style.marginRight=(b-c)/2+"px"},a.AnimatedPreviewController.prototype.toggleOnionSkin_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN,!a)}}(),function(){var a=$.namespace("pskl.controller");a.MinimapController=function(a,b,c,d){this.piskelController=a,this.animationController=b,this.drawingController=c,this.container=d,this.isClicked=!1},a.MinimapController.prototype.init=function(){this.cropFrame=document.createElement("DIV"),this.cropFrame.className="minimap-crop-frame",this.cropFrame.style.display="none",$(this.container).append(this.cropFrame),$(this.container).mousedown(this.onMinimapMousedown_.bind(this)),$("body").mousemove(this.onMinimapMousemove_.bind(this)),$("body").mouseup(this.onMinimapMouseup_.bind(this)),$.subscribe(Events.ZOOM_CHANGED,$.proxy(this.renderMinimap_,this))},a.MinimapController.prototype.renderMinimap_=function(){var a=this.getDrawingAreaZoomRatio_();a>1?this.displayCropFrame_(a,this.drawingController.getRenderer().getOffset()):this.hideCropFrame_()},a.MinimapController.prototype.displayCropFrame_=function(a,b){this.cropFrame.style.display="block",this.cropFrame.style.top=b.y*this.animationController.getZoom()+"px",this.cropFrame.style.left=b.x*this.animationController.getZoom()+"px";var c=this.getDrawingAreaZoomRatio_();this.cropFrame.style.width=this.container.width()/c+"px",this.cropFrame.style.height=this.container.height()/c+"px"},a.MinimapController.prototype.hideCropFrame_=function(){this.cropFrame.style.display="none"},a.MinimapController.prototype.onMinimapMousemove_=function(a){if(this.isClicked&&this.getDrawingAreaZoomRatio_()>1){var b=this.getCoordinatesCenteredAround_(a.clientX,a.clientY);this.drawingController.setOffset(b.x,b.y)}},a.MinimapController.prototype.onMinimapMousedown_=function(){this.isClicked=!0},a.MinimapController.prototype.onMinimapMouseup_=function(){this.isClicked=!1},a.MinimapController.prototype.getCoordinatesCenteredAround_=function(a,b){var c=this.animationController.getCoordinates(a,b),d=this.getDrawingAreaZoomRatio_(),e=this.piskelController.getCurrentFrame().getWidth(),f=this.piskelController.getCurrentFrame().getHeight(),g=e/d,h=f/d;return{x:c.x-g/2,y:c.y-h/2}},a.MinimapController.prototype.getDrawingAreaZoomRatio_=function(){var a=this.drawingController.getRenderer().getZoom(),b=this.piskelController.getCurrentFrame().getHeight()*a,c=b/this.drawingController.getRenderer().getDisplaySize().height;return c}}(),function(){var a=$.namespace("pskl.controller");a.ToolController=function(){var a=function(a,b,c){return{id:a,shortcut:b,instance:c}};this.tools=[a("simplePen","P",new pskl.drawingtools.SimplePen),a("verticalMirrorPen","V",new pskl.drawingtools.VerticalMirrorPen),a("paintBucket","B",new pskl.drawingtools.PaintBucket),a("colorSwap","A",new pskl.drawingtools.ColorSwap),a("eraser","E",new pskl.drawingtools.Eraser),a("stroke","L",new pskl.drawingtools.Stroke),a("rectangle","R",new pskl.drawingtools.Rectangle),a("circle","C",new pskl.drawingtools.Circle),a("move","M",new pskl.drawingtools.Move),a("rectangleSelect","S",new pskl.drawingtools.RectangleSelect),a("shapeSelect","Z",new pskl.drawingtools.ShapeSelect),a("lighten","U",new pskl.drawingtools.Lighten),a("colorPicker","O",new pskl.drawingtools.ColorPicker)],this.currentSelectedTool=this.tools[0],this.previousSelectedTool=this.tools[0]},a.ToolController.prototype.init=function(){this.createToolsDom_(),this.addKeyboardShortcuts_(),this.selectTool_(this.tools[0]),$("#tool-section").mousedown($.proxy(this.onToolIconClicked_,this))},a.ToolController.prototype.activateToolOnStage_=function(a){var b=$("body"),c=b.data("selected-tool-class");c&&(b.removeClass(c),b.removeClass(pskl.drawingtools.Move.TOOL_ID)),b.addClass(a.instance.toolId),b.data("selected-tool-class",a.instance.toolId)},a.ToolController.prototype.selectTool_=function(a){this.currentSelectedTool=a,this.activateToolOnStage_(this.currentSelectedTool);var b=$("#tool-section .tool-icon.selected"),c=$("[data-tool-id="+a.instance.toolId+"]");b.removeClass("selected"),c.addClass("selected"),$.publish(Events.TOOL_SELECTED,[a.instance])},a.ToolController.prototype.onToolIconClicked_=function(a){var b=$(a.target),c=b.closest(".tool-icon");if(c.length){var d=c.data().toolId,e=this.getToolById_(d);e&&this.selectTool_(e)}},a.ToolController.prototype.onKeyboardShortcut_=function(a){for(var b=0;bAdd new frame
",this.container.append(e);var f=a>1;f&&this.initDragndropBehavior_(),this.updateScrollerOverflows()},a.PreviewFilmController.prototype.initDragndropBehavior_=function(){$("#preview-list").sortable({placeholder:"preview-tile-drop-proxy",update:$.proxy(this.onUpdate_,this),items:".preview-tile"}),$("#preview-list").disableSelection()},a.PreviewFilmController.prototype.onUpdate_=function(a,b){var c=parseInt(b.item.data("tile-number"),10),d=$(".preview-tile").index(b.item);this.piskelController.moveFrame(c,d),this.piskelController.setCurrentFrameIndex(d)},a.PreviewFilmController.prototype.createPreviewTile_=function(a){var c=this.piskelController.getCurrentLayer().getFrameAt(a),d=document.createElement("li");d.setAttribute("data-tile-number",a),d.setAttribute("data-tile-action",b.SELECT),d.classList.add("preview-tile"),this.piskelController.getCurrentFrame()==c&&d.classList.add("selected");var e=document.createElement("div");e.classList.add("canvas-container",pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));var f=document.createElement("div");f.className="canvas-background",e.appendChild(f);var g=document.createElement("button");if(g.setAttribute("rel","tooltip"),g.setAttribute("data-placement","right"),g.setAttribute("data-tile-number",a),g.setAttribute("data-tile-action",b.CLONE),g.setAttribute("title","Duplicate this frame"),g.className="tile-overlay duplicate-frame-action",d.appendChild(g),e.appendChild(this.getCanvasForFrame(c)),d.appendChild(e),a>0||this.piskelController.getFrameCount()>1){var h=document.createElement("button");h.setAttribute("rel","tooltip"),h.setAttribute("data-placement","right"),h.setAttribute("title","Delete this frame"),h.setAttribute("data-tile-number",a),h.setAttribute("data-tile-action",b.DELETE),h.className="tile-overlay delete-frame-action",d.appendChild(h);var i=document.createElement("div");i.className="tile-overlay dnd-action",d.appendChild(i)}var j=document.createElement("div");return j.className="tile-overlay tile-count",j.innerHTML=a+1,d.appendChild(j),d},a.PreviewFilmController.prototype.getCanvasForFrame=function(a){var b=this.cachedFrameProcessor.get(a,this.zoom);return b},a.PreviewFilmController.prototype.frameToPreviewCanvas_=function(a){var b=new pskl.rendering.CanvasRenderer(a,this.zoom);b.drawTransparentAs(Constants.TRANSPARENT_COLOR);var c=b.render();return c.classList.add("tile-view","canvas"),c},a.PreviewFilmController.prototype.clonePreviewCanvas_=function(a){var b=pskl.CanvasUtils.clone(a);return b.classList.add("tile-view","canvas"),b},a.PreviewFilmController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=a.getHeight(),c=a.getWidth();return Math.min(Constants.PREVIEW_FILM_SIZE/b,Constants.PREVIEW_FILM_SIZE/c)}}(),function(){var a=$.namespace("pskl.controller");a.LayersListController=function(a){this.piskelController=a},a.LayersListController.prototype.init=function(){this.layerItemTemplate_=pskl.utils.Template.get("layer-item-template"),this.rootEl=document.querySelector(".layers-list-container"),this.layersListEl=document.querySelector(".layers-list"),this.toggleLayerPreviewEl=document.querySelector(".layers-toggle-preview"),this.rootEl.addEventListener("click",this.onClick_.bind(this)),this.toggleLayerPreviewEl.addEventListener("click",this.toggleLayerPreview_.bind(this)),$.subscribe(Events.PISKEL_RESET,this.renderLayerList_.bind(this)),pskl.app.shortcutService.addShortcut("alt+L",this.toggleLayerPreview_.bind(this)),this.renderLayerList_(),this.updateToggleLayerPreview_(),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this))},a.LayersListController.prototype.renderLayerList_=function(){this.layersListEl.innerHTML="";var a=this.piskelController.getLayers();a.forEach(this.addLayerItem.bind(this))},a.LayersListController.prototype.updateToggleLayerPreview_=function(){var a="layers-toggle-preview-enabled";pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)?this.toggleLayerPreviewEl.classList.add(a):this.toggleLayerPreviewEl.classList.remove(a)},a.LayersListController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.LAYER_PREVIEW&&this.updateToggleLayerPreview_()},a.LayersListController.prototype.addLayerItem=function(a,b){var c=this.piskelController.getCurrentLayer()===a,d=pskl.utils.Template.replace(this.layerItemTemplate_,{layername:a.getName(),layerindex:b,"isselected:current-layer-item":c}),e=pskl.utils.Template.createFromHTML(d);this.layersListEl.insertBefore(e,this.layersListEl.firstChild)},a.LayersListController.prototype.onClick_=function(a){var b,c=a.target||a.srcElement;c.classList.contains("button")?this.onButtonClick_(c):c.classList.contains("layer-item")?(b=c.dataset.layerIndex,this.piskelController.setCurrentLayerIndex(parseInt(b,10))):c.classList.contains("edit-icon")&&(b=c.parentNode.dataset.layerIndex,this.renameLayerAt_(b))},a.LayersListController.prototype.renameLayerAt_=function(a){var b=this.piskelController.getLayerAt(a),c=window.prompt("Please enter the layer name",b.getName());c&&(this.piskelController.renameLayerAt(a,c),this.renderLayerList_())},a.LayersListController.prototype.onButtonClick_=function(a){var b=a.getAttribute("data-action");"up"==b?this.piskelController.moveLayerUp():"down"==b?this.piskelController.moveLayerDown():"add"==b?this.piskelController.createLayer():"delete"==b&&this.piskelController.removeCurrentLayer()},a.LayersListController.prototype.toggleLayerPreview_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW,!a)}}(),function(){var a=$.namespace("pskl.controller"),b=200;a.AnimatedPreviewController=function(a,b){this.piskelController=a,this.container=b,this.elapsedTime=0,this.currentIndex=0,this.setFPS(Constants.DEFAULT.FPS),this.piskelController.getCurrentFrame(),this.renderer=new pskl.rendering.frame.TiledFrameRenderer(this.container)},a.AnimatedPreviewController.prototype.init=function(){$("#preview-fps")[0].addEventListener("change",this.onFPSSliderChange.bind(this)),document.querySelector(".right-column").style.width=Constants.ANIMATED_PREVIEW_WIDTH+"px",this.toggleOnionSkinEl=document.querySelector(".preview-toggle-onion-skin"),this.toggleOnionSkinEl.addEventListener("click",this.toggleOnionSkin_.bind(this)),pskl.app.shortcutService.addShortcut("alt+O",this.toggleOnionSkin_.bind(this)),$.subscribe(Events.FRAME_SIZE_CHANGED,this.onFrameSizeChange_.bind(this)),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this)),this.updateZoom_(),this.updateOnionSkinPreview_()},a.AnimatedPreviewController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.ONION_SKIN?this.updateOnionSkinPreview_():(this.updateZoom_(),this.updateContainerDimensions_())},a.AnimatedPreviewController.prototype.updateOnionSkinPreview_=function(){var a="preview-toggle-onion-skin-enabled";pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)?this.toggleOnionSkinEl.classList.add(a):this.toggleOnionSkinEl.classList.remove(a)},a.AnimatedPreviewController.prototype.updateZoom_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW),b=a?1:this.calculateZoom_();this.renderer.setZoom(b)},a.AnimatedPreviewController.prototype.getZoom=function(){return this.calculateZoom_()},a.AnimatedPreviewController.prototype.getCoordinates=function(a,b){var c=this.container.offset();a-=c.left,b-=c.top;var d=this.getZoom();return{x:Math.floor(a/d),y:Math.floor(b/d)}},a.AnimatedPreviewController.prototype.onFPSSliderChange=function(){this.setFPS(parseInt($("#preview-fps")[0].value,10))},a.AnimatedPreviewController.prototype.setFPS=function(a){this.fps=a,$("#preview-fps").val(this.fps),$("#display-fps").html(this.fps+" FPS")},a.AnimatedPreviewController.prototype.getFPS=function(){return this.fps},a.AnimatedPreviewController.prototype.render=function(a){this.elapsedTime+=a;var b=Math.floor(this.elapsedTime/(1e3/this.fps));if(b!=this.currentIndex){this.currentIndex=b,this.piskelController.hasFrameAt(this.currentIndex)||(this.currentIndex=0,this.elapsedTime=0);var c=this.piskelController.getFrameAt(this.currentIndex);this.renderer.render(c)}},a.AnimatedPreviewController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=200,c=b/a.getHeight(),d=b/a.getWidth();return Math.min(c,d)},a.AnimatedPreviewController.prototype.onFrameSizeChange_=function(){this.updateZoom_(),this.updateContainerDimensions_()},a.AnimatedPreviewController.prototype.updateContainerDimensions_=function(){var a,c,d=this.container.get(0),e=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);if(e)a=b,c=b;else{var f=this.getZoom(),g=this.piskelController.getCurrentFrame();a=g.getHeight()*f,c=g.getWidth()*f}d.style.height=a+"px",d.style.width=c+"px",d.style.marginTop=(b-a)/2+"px",d.style.marginBottom=(b-a)/2+"px",d.style.marginLeft=(b-c)/2+"px",d.style.marginRight=(b-c)/2+"px"},a.AnimatedPreviewController.prototype.toggleOnionSkin_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN,!a)}}(),function(){var a=$.namespace("pskl.controller");a.MinimapController=function(a,b,c,d){this.piskelController=a,this.animationController=b,this.drawingController=c,this.container=d,this.isClicked=!1},a.MinimapController.prototype.init=function(){this.cropFrame=document.createElement("DIV"),this.cropFrame.className="minimap-crop-frame",this.cropFrame.style.display="none",$(this.container).append(this.cropFrame),$(this.container).mousedown(this.onMinimapMousedown_.bind(this)),$("body").mousemove(this.onMinimapMousemove_.bind(this)),$("body").mouseup(this.onMinimapMouseup_.bind(this)),$.subscribe(Events.ZOOM_CHANGED,$.proxy(this.renderMinimap_,this))},a.MinimapController.prototype.renderMinimap_=function(){var a=this.getDrawingAreaZoomRatio_();a>1?this.displayCropFrame_(a,this.drawingController.getRenderer().getOffset()):this.hideCropFrame_()},a.MinimapController.prototype.displayCropFrame_=function(a,b){this.cropFrame.style.display="block",this.cropFrame.style.top=b.y*this.animationController.getZoom()+"px",this.cropFrame.style.left=b.x*this.animationController.getZoom()+"px";var c=this.getDrawingAreaZoomRatio_();this.cropFrame.style.width=this.container.width()/c+"px",this.cropFrame.style.height=this.container.height()/c+"px"},a.MinimapController.prototype.hideCropFrame_=function(){this.cropFrame.style.display="none"},a.MinimapController.prototype.onMinimapMousemove_=function(a){if(this.isClicked&&this.getDrawingAreaZoomRatio_()>1){var b=this.getCoordinatesCenteredAround_(a.clientX,a.clientY);this.drawingController.setOffset(b.x,b.y)}},a.MinimapController.prototype.onMinimapMousedown_=function(){this.isClicked=!0},a.MinimapController.prototype.onMinimapMouseup_=function(){this.isClicked=!1},a.MinimapController.prototype.getCoordinatesCenteredAround_=function(a,b){var c=this.animationController.getCoordinates(a,b),d=this.getDrawingAreaZoomRatio_(),e=this.piskelController.getCurrentFrame().getWidth(),f=this.piskelController.getCurrentFrame().getHeight(),g=e/d,h=f/d;return{x:c.x-g/2,y:c.y-h/2}},a.MinimapController.prototype.getDrawingAreaZoomRatio_=function(){var a=this.drawingController.getRenderer().getZoom(),b=this.piskelController.getCurrentFrame().getHeight()*a,c=b/this.drawingController.getRenderer().getDisplaySize().height;return c}}(),function(){var a=$.namespace("pskl.controller");a.ToolController=function(){var a=function(a,b,c){return{id:a,shortcut:b,instance:c}};this.tools=[a("simplePen","P",new pskl.drawingtools.SimplePen),a("verticalMirrorPen","V",new pskl.drawingtools.VerticalMirrorPen),a("paintBucket","B",new pskl.drawingtools.PaintBucket),a("colorSwap","A",new pskl.drawingtools.ColorSwap),a("eraser","E",new pskl.drawingtools.Eraser),a("stroke","L",new pskl.drawingtools.Stroke),a("rectangle","R",new pskl.drawingtools.Rectangle),a("circle","C",new pskl.drawingtools.Circle),a("move","M",new pskl.drawingtools.Move),a("rectangleSelect","S",new pskl.drawingtools.RectangleSelect),a("shapeSelect","Z",new pskl.drawingtools.ShapeSelect),a("lighten","U",new pskl.drawingtools.Lighten),a("colorPicker","O",new pskl.drawingtools.ColorPicker)],this.currentSelectedTool=this.tools[0],this.previousSelectedTool=this.tools[0]},a.ToolController.prototype.init=function(){this.createToolsDom_(),this.addKeyboardShortcuts_(),this.selectTool_(this.tools[0]),$("#tool-section").mousedown($.proxy(this.onToolIconClicked_,this))},a.ToolController.prototype.activateToolOnStage_=function(a){var b=$("body"),c=b.data("selected-tool-class");c&&(b.removeClass(c),b.removeClass(pskl.drawingtools.Move.TOOL_ID)),b.addClass(a.instance.toolId),b.data("selected-tool-class",a.instance.toolId)},a.ToolController.prototype.selectTool_=function(a){this.currentSelectedTool=a,this.activateToolOnStage_(this.currentSelectedTool);var b=$("#tool-section .tool-icon.selected"),c=$("[data-tool-id="+a.instance.toolId+"]");b.removeClass("selected"),c.addClass("selected"),$.publish(Events.TOOL_SELECTED,[a.instance])},a.ToolController.prototype.onToolIconClicked_=function(a){var b=$(a.target),c=b.closest(".tool-icon");if(c.length){var d=c.data().toolId,e=this.getToolById_(d);e&&this.selectTool_(e)}},a.ToolController.prototype.onKeyboardShortcut_=function(a){for(var b=0;bAdd new frame
",this.container.append(e);var f=a>1;f&&this.initDragndropBehavior_(),this.updateScrollerOverflows()},a.PreviewFilmController.prototype.initDragndropBehavior_=function(){$("#preview-list").sortable({placeholder:"preview-tile-drop-proxy",update:$.proxy(this.onUpdate_,this),items:".preview-tile"}),$("#preview-list").disableSelection()},a.PreviewFilmController.prototype.onUpdate_=function(a,b){var c=parseInt(b.item.data("tile-number"),10),d=$(".preview-tile").index(b.item);this.piskelController.moveFrame(c,d),this.piskelController.setCurrentFrameIndex(d)},a.PreviewFilmController.prototype.createPreviewTile_=function(a){var c=this.piskelController.getCurrentLayer().getFrameAt(a),d=document.createElement("li");d.setAttribute("data-tile-number",a),d.setAttribute("data-tile-action",b.SELECT),d.classList.add("preview-tile"),this.piskelController.getCurrentFrame()==c&&d.classList.add("selected");var e=document.createElement("div");e.classList.add("canvas-container",pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));var f=document.createElement("div");f.className="canvas-background",e.appendChild(f);var g=document.createElement("button");if(g.setAttribute("rel","tooltip"),g.setAttribute("data-placement","right"),g.setAttribute("data-tile-number",a),g.setAttribute("data-tile-action",b.CLONE),g.setAttribute("title","Duplicate this frame"),g.className="tile-overlay duplicate-frame-action",d.appendChild(g),e.appendChild(this.getCanvasForFrame(c)),d.appendChild(e),a>0||this.piskelController.getFrameCount()>1){var h=document.createElement("button");h.setAttribute("rel","tooltip"),h.setAttribute("data-placement","right"),h.setAttribute("title","Delete this frame"),h.setAttribute("data-tile-number",a),h.setAttribute("data-tile-action",b.DELETE),h.className="tile-overlay delete-frame-action",d.appendChild(h);var i=document.createElement("div");i.className="tile-overlay dnd-action",d.appendChild(i)}var j=document.createElement("div");return j.className="tile-overlay tile-count",j.innerHTML=a+1,d.appendChild(j),d},a.PreviewFilmController.prototype.getCanvasForFrame=function(a){var b=this.cachedFrameProcessor.get(a,this.zoom);return b},a.PreviewFilmController.prototype.frameToPreviewCanvas_=function(a){var b=new pskl.rendering.CanvasRenderer(a,this.zoom);b.drawTransparentAs(Constants.TRANSPARENT_COLOR);var c=b.render();return c.classList.add("tile-view","canvas"),c},a.PreviewFilmController.prototype.clonePreviewCanvas_=function(a){var b=pskl.CanvasUtils.clone(a);return b.classList.add("tile-view","canvas"),b},a.PreviewFilmController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=a.getHeight(),c=a.getWidth();return Math.min(Constants.PREVIEW_FILM_SIZE/b,Constants.PREVIEW_FILM_SIZE/c)}}(),function(){var a=$.namespace("pskl.controller");a.LayersListController=function(a){this.piskelController=a},a.LayersListController.prototype.init=function(){this.layerItemTemplate_=pskl.utils.Template.get("layer-item-template"),this.rootEl=document.querySelector(".layers-list-container"),this.layersListEl=document.querySelector(".layers-list"),this.toggleLayerPreviewEl=document.querySelector(".layers-toggle-preview"),this.rootEl.addEventListener("click",this.onClick_.bind(this)),this.toggleLayerPreviewEl.addEventListener("click",this.toggleLayerPreview_.bind(this)),$.subscribe(Events.PISKEL_RESET,this.renderLayerList_.bind(this)),pskl.app.shortcutService.addShortcut("alt+L",this.toggleLayerPreview_.bind(this)),this.renderLayerList_(),this.updateToggleLayerPreview_(),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this))},a.LayersListController.prototype.renderLayerList_=function(){this.layersListEl.innerHTML="";var a=this.piskelController.getLayers();a.forEach(this.addLayerItem.bind(this))},a.LayersListController.prototype.updateToggleLayerPreview_=function(){var a="layers-toggle-preview-enabled";pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)?this.toggleLayerPreviewEl.classList.add(a):this.toggleLayerPreviewEl.classList.remove(a)},a.LayersListController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.LAYER_PREVIEW&&this.updateToggleLayerPreview_()},a.LayersListController.prototype.addLayerItem=function(a,b){var c=this.piskelController.getCurrentLayer()===a,d=pskl.utils.Template.replace(this.layerItemTemplate_,{layername:a.getName(),layerindex:b,"isselected:current-layer-item":c}),e=pskl.utils.Template.createFromHTML(d);this.layersListEl.insertBefore(e,this.layersListEl.firstChild)},a.LayersListController.prototype.onClick_=function(a){var b,c=a.target||a.srcElement;c.classList.contains("button")?this.onButtonClick_(c):c.classList.contains("layer-item")?(b=c.dataset.layerIndex,this.piskelController.setCurrentLayerIndex(parseInt(b,10))):c.classList.contains("edit-icon")&&(b=c.parentNode.dataset.layerIndex,this.renameLayerAt_(b))},a.LayersListController.prototype.renameLayerAt_=function(a){var b=this.piskelController.getLayerAt(a),c=window.prompt("Please enter the layer name",b.getName());c&&(this.piskelController.renameLayerAt(a,c),this.renderLayerList_())},a.LayersListController.prototype.onButtonClick_=function(a){var b=a.getAttribute("data-action");"up"==b?this.piskelController.moveLayerUp():"down"==b?this.piskelController.moveLayerDown():"add"==b?this.piskelController.createLayer():"delete"==b&&this.piskelController.removeCurrentLayer()},a.LayersListController.prototype.toggleLayerPreview_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW,!a)}}(),function(){var a=$.namespace("pskl.controller"),b=200;a.AnimatedPreviewController=function(a,b){this.piskelController=a,this.container=b,this.elapsedTime=0,this.currentIndex=0,this.setFPS(Constants.DEFAULT.FPS),this.piskelController.getCurrentFrame(),this.renderer=new pskl.rendering.frame.TiledFrameRenderer(this.container)},a.AnimatedPreviewController.prototype.init=function(){$("#preview-fps")[0].addEventListener("change",this.onFPSSliderChange.bind(this)),document.querySelector(".right-column").style.width=Constants.ANIMATED_PREVIEW_WIDTH+"px",this.toggleOnionSkinEl=document.querySelector(".preview-toggle-onion-skin"),this.toggleOnionSkinEl.addEventListener("click",this.toggleOnionSkin_.bind(this)),pskl.app.shortcutService.addShortcut("alt+O",this.toggleOnionSkin_.bind(this)),$.subscribe(Events.FRAME_SIZE_CHANGED,this.onFrameSizeChange_.bind(this)),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this)),this.updateZoom_(),this.updateOnionSkinPreview_()},a.AnimatedPreviewController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.ONION_SKIN?this.updateOnionSkinPreview_():(this.updateZoom_(),this.updateContainerDimensions_())},a.AnimatedPreviewController.prototype.updateOnionSkinPreview_=function(){var a="preview-toggle-onion-skin-enabled";pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)?this.toggleOnionSkinEl.classList.add(a):this.toggleOnionSkinEl.classList.remove(a)},a.AnimatedPreviewController.prototype.updateZoom_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW),b=a?1:this.calculateZoom_();this.renderer.setZoom(b)},a.AnimatedPreviewController.prototype.getZoom=function(){return this.calculateZoom_()},a.AnimatedPreviewController.prototype.getCoordinates=function(a,b){var c=this.container.offset();a-=c.left,b-=c.top;var d=this.getZoom();return{x:Math.floor(a/d),y:Math.floor(b/d)}},a.AnimatedPreviewController.prototype.onFPSSliderChange=function(){this.setFPS(parseInt($("#preview-fps")[0].value,10))},a.AnimatedPreviewController.prototype.setFPS=function(a){this.fps=a,$("#preview-fps").val(this.fps),$("#display-fps").html(this.fps+" FPS")},a.AnimatedPreviewController.prototype.getFPS=function(){return this.fps},a.AnimatedPreviewController.prototype.render=function(a){this.elapsedTime+=a;var b=Math.floor(this.elapsedTime/(1e3/this.fps));if(b!=this.currentIndex){this.currentIndex=b,this.piskelController.hasFrameAt(this.currentIndex)||(this.currentIndex=0,this.elapsedTime=0);var c=this.piskelController.getFrameAt(this.currentIndex);this.renderer.render(c)}},a.AnimatedPreviewController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=200,c=b/a.getHeight(),d=b/a.getWidth();return Math.min(c,d)},a.AnimatedPreviewController.prototype.onFrameSizeChange_=function(){this.updateZoom_(),this.updateContainerDimensions_()},a.AnimatedPreviewController.prototype.updateContainerDimensions_=function(){var a,c,d=this.container.get(0),e=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);if(e)a=b,c=b;else{var f=this.getZoom(),g=this.piskelController.getCurrentFrame();a=g.getHeight()*f,c=g.getWidth()*f}d.style.height=a+"px",d.style.width=c+"px",d.style.marginTop=(b-a)/2+"px",d.style.marginBottom=(b-a)/2+"px",d.style.marginLeft=(b-c)/2+"px",d.style.marginRight=(b-c)/2+"px"},a.AnimatedPreviewController.prototype.toggleOnionSkin_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN,!a)}}(),function(){var a=$.namespace("pskl.controller");a.MinimapController=function(a,b,c,d){this.piskelController=a,this.animationController=b,this.drawingController=c,this.container=d,this.isClicked=!1},a.MinimapController.prototype.init=function(){this.cropFrame=document.createElement("DIV"),this.cropFrame.className="minimap-crop-frame",this.cropFrame.style.display="none",$(this.container).append(this.cropFrame),$(this.container).mousedown(this.onMinimapMousedown_.bind(this)),$("body").mousemove(this.onMinimapMousemove_.bind(this)),$("body").mouseup(this.onMinimapMouseup_.bind(this)),$.subscribe(Events.ZOOM_CHANGED,$.proxy(this.renderMinimap_,this))},a.MinimapController.prototype.renderMinimap_=function(){var a=this.getDrawingAreaZoomRatio_();a>1?this.displayCropFrame_(a,this.drawingController.getRenderer().getOffset()):this.hideCropFrame_()},a.MinimapController.prototype.displayCropFrame_=function(a,b){this.cropFrame.style.display="block",this.cropFrame.style.top=b.y*this.animationController.getZoom()+"px",this.cropFrame.style.left=b.x*this.animationController.getZoom()+"px";var c=this.getDrawingAreaZoomRatio_();this.cropFrame.style.width=this.container.width()/c+"px",this.cropFrame.style.height=this.container.height()/c+"px"},a.MinimapController.prototype.hideCropFrame_=function(){this.cropFrame.style.display="none"},a.MinimapController.prototype.onMinimapMousemove_=function(a){if(this.isClicked&&this.getDrawingAreaZoomRatio_()>1){var b=this.getCoordinatesCenteredAround_(a.clientX,a.clientY);this.drawingController.setOffset(b.x,b.y)}},a.MinimapController.prototype.onMinimapMousedown_=function(){this.isClicked=!0},a.MinimapController.prototype.onMinimapMouseup_=function(){this.isClicked=!1},a.MinimapController.prototype.getCoordinatesCenteredAround_=function(a,b){var c=this.animationController.getCoordinates(a,b),d=this.getDrawingAreaZoomRatio_(),e=this.piskelController.getCurrentFrame().getWidth(),f=this.piskelController.getCurrentFrame().getHeight(),g=e/d,h=f/d;return{x:c.x-g/2,y:c.y-h/2}},a.MinimapController.prototype.getDrawingAreaZoomRatio_=function(){var a=this.drawingController.getRenderer().getZoom(),b=this.piskelController.getCurrentFrame().getHeight()*a,c=b/this.drawingController.getRenderer().getDisplaySize().height;return c}}(),function(){var a=$.namespace("pskl.controller");a.ToolController=function(){var a=function(a,b,c){return{id:a,shortcut:b,instance:c}};this.tools=[a("simplePen","P",new pskl.drawingtools.SimplePen),a("verticalMirrorPen","V",new pskl.drawingtools.VerticalMirrorPen),a("paintBucket","B",new pskl.drawingtools.PaintBucket),a("colorSwap","A",new pskl.drawingtools.ColorSwap),a("eraser","E",new pskl.drawingtools.Eraser),a("stroke","L",new pskl.drawingtools.Stroke),a("rectangle","R",new pskl.drawingtools.Rectangle),a("circle","C",new pskl.drawingtools.Circle),a("move","M",new pskl.drawingtools.Move),a("rectangleSelect","S",new pskl.drawingtools.RectangleSelect),a("shapeSelect","Z",new pskl.drawingtools.ShapeSelect),a("lighten","U",new pskl.drawingtools.Lighten),a("colorPicker","O",new pskl.drawingtools.ColorPicker)],this.currentSelectedTool=this.tools[0],this.previousSelectedTool=this.tools[0]},a.ToolController.prototype.init=function(){this.createToolsDom_(),this.addKeyboardShortcuts_(),this.selectTool_(this.tools[0]),$("#tool-section").mousedown($.proxy(this.onToolIconClicked_,this))},a.ToolController.prototype.activateToolOnStage_=function(a){var b=$("body"),c=b.data("selected-tool-class");c&&(b.removeClass(c),b.removeClass(pskl.drawingtools.Move.TOOL_ID)),b.addClass(a.instance.toolId),b.data("selected-tool-class",a.instance.toolId)},a.ToolController.prototype.selectTool_=function(a){this.currentSelectedTool=a,this.activateToolOnStage_(this.currentSelectedTool);var b=$("#tool-section .tool-icon.selected"),c=$("[data-tool-id="+a.instance.toolId+"]");b.removeClass("selected"),c.addClass("selected"),$.publish(Events.TOOL_SELECTED,[a.instance])},a.ToolController.prototype.onToolIconClicked_=function(a){var b=$(a.target),c=b.closest(".tool-icon");if(c.length){var d=c.data().toolId,e=this.getToolById_(d);e&&this.selectTool_(e)}},a.ToolController.prototype.onKeyboardShortcut_=function(a){for(var b=0;bAdd new frame
",this.container.append(e);var f=a>1;f&&this.initDragndropBehavior_(),this.updateScrollerOverflows()},a.PreviewFilmController.prototype.initDragndropBehavior_=function(){$("#preview-list").sortable({placeholder:"preview-tile-drop-proxy",update:$.proxy(this.onUpdate_,this),items:".preview-tile"}),$("#preview-list").disableSelection()},a.PreviewFilmController.prototype.onUpdate_=function(a,b){var c=parseInt(b.item.data("tile-number"),10),d=$(".preview-tile").index(b.item);this.piskelController.moveFrame(c,d),this.piskelController.setCurrentFrameIndex(d)},a.PreviewFilmController.prototype.createPreviewTile_=function(a){var c=this.piskelController.getCurrentLayer().getFrameAt(a),d=document.createElement("li");d.setAttribute("data-tile-number",a),d.setAttribute("data-tile-action",b.SELECT),d.classList.add("preview-tile"),this.piskelController.getCurrentFrame()==c&&d.classList.add("selected");var e=document.createElement("div");e.classList.add("canvas-container",pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));var f=document.createElement("div");f.className="canvas-background",e.appendChild(f);var g=document.createElement("button");if(g.setAttribute("rel","tooltip"),g.setAttribute("data-placement","right"),g.setAttribute("data-tile-number",a),g.setAttribute("data-tile-action",b.CLONE),g.setAttribute("title","Duplicate this frame"),g.className="tile-overlay duplicate-frame-action",d.appendChild(g),e.appendChild(this.getCanvasForFrame(c)),d.appendChild(e),a>0||this.piskelController.getFrameCount()>1){var h=document.createElement("button");h.setAttribute("rel","tooltip"),h.setAttribute("data-placement","right"),h.setAttribute("title","Delete this frame"),h.setAttribute("data-tile-number",a),h.setAttribute("data-tile-action",b.DELETE),h.className="tile-overlay delete-frame-action",d.appendChild(h);var i=document.createElement("div");i.className="tile-overlay dnd-action",d.appendChild(i)}var j=document.createElement("div");return j.className="tile-overlay tile-count",j.innerHTML=a+1,d.appendChild(j),d},a.PreviewFilmController.prototype.getCanvasForFrame=function(a){var b=this.cachedFrameProcessor.get(a,this.zoom);return b},a.PreviewFilmController.prototype.frameToPreviewCanvas_=function(a){var b=new pskl.rendering.CanvasRenderer(a,this.zoom);b.drawTransparentAs(Constants.TRANSPARENT_COLOR);var c=b.render();return c.classList.add("tile-view","canvas"),c},a.PreviewFilmController.prototype.clonePreviewCanvas_=function(a){var b=pskl.CanvasUtils.clone(a);return b.classList.add("tile-view","canvas"),b},a.PreviewFilmController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=a.getHeight(),c=a.getWidth();return Math.min(Constants.PREVIEW_FILM_SIZE/b,Constants.PREVIEW_FILM_SIZE/c)}}(),function(){var a=$.namespace("pskl.controller");a.LayersListController=function(a){this.piskelController=a},a.LayersListController.prototype.init=function(){this.layerItemTemplate_=pskl.utils.Template.get("layer-item-template"),this.rootEl=document.querySelector(".layers-list-container"),this.layersListEl=document.querySelector(".layers-list"),this.toggleLayerPreviewEl=document.querySelector(".layers-toggle-preview"),this.rootEl.addEventListener("click",this.onClick_.bind(this)),this.toggleLayerPreviewEl.addEventListener("click",this.toggleLayerPreview_.bind(this)),$.subscribe(Events.PISKEL_RESET,this.renderLayerList_.bind(this)),pskl.app.shortcutService.addShortcut("alt+L",this.toggleLayerPreview_.bind(this)),this.renderLayerList_(),this.updateToggleLayerPreview_(),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this))},a.LayersListController.prototype.renderLayerList_=function(){this.layersListEl.innerHTML="";var a=this.piskelController.getLayers();a.forEach(this.addLayerItem.bind(this))},a.LayersListController.prototype.updateToggleLayerPreview_=function(){var a="layers-toggle-preview-enabled";pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)?this.toggleLayerPreviewEl.classList.add(a):this.toggleLayerPreviewEl.classList.remove(a)},a.LayersListController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.LAYER_PREVIEW&&this.updateToggleLayerPreview_()},a.LayersListController.prototype.addLayerItem=function(a,b){var c=this.piskelController.getCurrentLayer()===a,d=pskl.utils.Template.replace(this.layerItemTemplate_,{layername:a.getName(),layerindex:b,"isselected:current-layer-item":c}),e=pskl.utils.Template.createFromHTML(d);this.layersListEl.insertBefore(e,this.layersListEl.firstChild)},a.LayersListController.prototype.onClick_=function(a){var b,c=a.target||a.srcElement;c.classList.contains("button")?this.onButtonClick_(c):c.classList.contains("layer-item")?(b=c.dataset.layerIndex,this.piskelController.setCurrentLayerIndex(parseInt(b,10))):c.classList.contains("edit-icon")&&(b=c.parentNode.dataset.layerIndex,this.renameLayerAt_(b))},a.LayersListController.prototype.renameLayerAt_=function(a){var b=this.piskelController.getLayerAt(a),c=window.prompt("Please enter the layer name",b.getName());c&&(this.piskelController.renameLayerAt(a,c),this.renderLayerList_())},a.LayersListController.prototype.onButtonClick_=function(a){var b=a.getAttribute("data-action");"up"==b?this.piskelController.moveLayerUp():"down"==b?this.piskelController.moveLayerDown():"add"==b?this.piskelController.createLayer():"delete"==b&&this.piskelController.removeCurrentLayer()},a.LayersListController.prototype.toggleLayerPreview_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW,!a)}}(),function(){var a=$.namespace("pskl.controller"),b=200;a.AnimatedPreviewController=function(a,b){this.piskelController=a,this.container=b,this.elapsedTime=0,this.currentIndex=0,this.setFPS(Constants.DEFAULT.FPS),this.piskelController.getCurrentFrame(),this.renderer=new pskl.rendering.frame.TiledFrameRenderer(this.container)},a.AnimatedPreviewController.prototype.init=function(){$("#preview-fps")[0].addEventListener("change",this.onFPSSliderChange.bind(this)),document.querySelector(".right-column").style.width=Constants.ANIMATED_PREVIEW_WIDTH+"px",this.toggleOnionSkinEl=document.querySelector(".preview-toggle-onion-skin"),this.toggleOnionSkinEl.addEventListener("click",this.toggleOnionSkin_.bind(this)),pskl.app.shortcutService.addShortcut("alt+O",this.toggleOnionSkin_.bind(this)),$.subscribe(Events.FRAME_SIZE_CHANGED,this.onFrameSizeChange_.bind(this)),$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this)),this.updateZoom_(),this.updateOnionSkinPreview_()},a.AnimatedPreviewController.prototype.onUserSettingsChange_=function(a,b){b==pskl.UserSettings.ONION_SKIN?this.updateOnionSkinPreview_():(this.updateZoom_(),this.updateContainerDimensions_())},a.AnimatedPreviewController.prototype.updateOnionSkinPreview_=function(){var a="preview-toggle-onion-skin-enabled";pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)?this.toggleOnionSkinEl.classList.add(a):this.toggleOnionSkinEl.classList.remove(a)},a.AnimatedPreviewController.prototype.updateZoom_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW),b=a?1:this.calculateZoom_();this.renderer.setZoom(b)},a.AnimatedPreviewController.prototype.getZoom=function(){return this.calculateZoom_()},a.AnimatedPreviewController.prototype.getCoordinates=function(a,b){var c=this.container.offset();a-=c.left,b-=c.top;var d=this.getZoom();return{x:Math.floor(a/d),y:Math.floor(b/d)}},a.AnimatedPreviewController.prototype.onFPSSliderChange=function(){this.setFPS(parseInt($("#preview-fps")[0].value,10))},a.AnimatedPreviewController.prototype.setFPS=function(a){this.fps=a,$("#preview-fps").val(this.fps),$("#display-fps").html(this.fps+" FPS")},a.AnimatedPreviewController.prototype.getFPS=function(){return this.fps},a.AnimatedPreviewController.prototype.render=function(a){this.elapsedTime+=a;var b=Math.floor(this.elapsedTime/(1e3/this.fps));if(b!=this.currentIndex){this.currentIndex=b,this.piskelController.hasFrameAt(this.currentIndex)||(this.currentIndex=0,this.elapsedTime=0);var c=this.piskelController.getFrameAt(this.currentIndex);this.renderer.render(c)}},a.AnimatedPreviewController.prototype.calculateZoom_=function(){var a=this.piskelController.getCurrentFrame(),b=200,c=b/a.getHeight(),d=b/a.getWidth();return Math.min(c,d)},a.AnimatedPreviewController.prototype.onFrameSizeChange_=function(){this.updateZoom_(),this.updateContainerDimensions_()},a.AnimatedPreviewController.prototype.updateContainerDimensions_=function(){var a,c,d=this.container.get(0),e=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);if(e)a=b,c=b;else{var f=this.getZoom(),g=this.piskelController.getCurrentFrame();a=g.getHeight()*f,c=g.getWidth()*f}d.style.height=a+"px",d.style.width=c+"px",d.style.marginTop=(b-a)/2+"px",d.style.marginBottom=(b-a)/2+"px",d.style.marginLeft=(b-c)/2+"px",d.style.marginRight=(b-c)/2+"px"},a.AnimatedPreviewController.prototype.toggleOnionSkin_=function(){var a=pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN,!a)}}(),function(){var a=$.namespace("pskl.controller");a.MinimapController=function(a,b,c,d){this.piskelController=a,this.animationController=b,this.drawingController=c,this.container=d,this.isClicked=!1},a.MinimapController.prototype.init=function(){this.cropFrame=document.createElement("DIV"),this.cropFrame.className="minimap-crop-frame",this.cropFrame.style.display="none",$(this.container).append(this.cropFrame),$(this.container).mousedown(this.onMinimapMousedown_.bind(this)),$("body").mousemove(this.onMinimapMousemove_.bind(this)),$("body").mouseup(this.onMinimapMouseup_.bind(this)),$.subscribe(Events.ZOOM_CHANGED,$.proxy(this.renderMinimap_,this))},a.MinimapController.prototype.renderMinimap_=function(){var a=this.getDrawingAreaZoomRatio_();a>1?this.displayCropFrame_(a,this.drawingController.getRenderer().getOffset()):this.hideCropFrame_()},a.MinimapController.prototype.displayCropFrame_=function(a,b){this.cropFrame.style.display="block",this.cropFrame.style.top=b.y*this.animationController.getZoom()+"px",this.cropFrame.style.left=b.x*this.animationController.getZoom()+"px";var c=this.getDrawingAreaZoomRatio_();this.cropFrame.style.width=this.container.width()/c+"px",this.cropFrame.style.height=this.container.height()/c+"px"},a.MinimapController.prototype.hideCropFrame_=function(){this.cropFrame.style.display="none"},a.MinimapController.prototype.onMinimapMousemove_=function(a){if(this.isClicked&&this.getDrawingAreaZoomRatio_()>1){var b=this.getCoordinatesCenteredAround_(a.clientX,a.clientY);this.drawingController.setOffset(b.x,b.y)}},a.MinimapController.prototype.onMinimapMousedown_=function(){this.isClicked=!0},a.MinimapController.prototype.onMinimapMouseup_=function(){this.isClicked=!1},a.MinimapController.prototype.getCoordinatesCenteredAround_=function(a,b){var c=this.animationController.getCoordinates(a,b),d=this.getDrawingAreaZoomRatio_(),e=this.piskelController.getCurrentFrame().getWidth(),f=this.piskelController.getCurrentFrame().getHeight(),g=e/d,h=f/d;return{x:c.x-g/2,y:c.y-h/2}},a.MinimapController.prototype.getDrawingAreaZoomRatio_=function(){var a=this.drawingController.getRenderer().getZoom(),b=this.piskelController.getCurrentFrame().getHeight()*a,c=b/this.drawingController.getRenderer().getDisplaySize().height;return c}}(),function(){var a=$.namespace("pskl.controller");a.ToolController=function(){var a=function(a,b,c){return{id:a,shortcut:b,instance:c}};this.tools=[a("simplePen","P",new pskl.drawingtools.SimplePen),a("verticalMirrorPen","V",new pskl.drawingtools.VerticalMirrorPen),a("paintBucket","B",new pskl.drawingtools.PaintBucket),a("colorSwap","A",new pskl.drawingtools.ColorSwap),a("eraser","E",new pskl.drawingtools.Eraser),a("stroke","L",new pskl.drawingtools.Stroke),a("rectangle","R",new pskl.drawingtools.Rectangle),a("circle","C",new pskl.drawingtools.Circle),a("move","M",new pskl.drawingtools.Move),a("rectangleSelect","S",new pskl.drawingtools.RectangleSelect),a("shapeSelect","Z",new pskl.drawingtools.ShapeSelect),a("lighten","U",new pskl.drawingtools.Lighten),a("colorPicker","O",new pskl.drawingtools.ColorPicker)],this.currentSelectedTool=this.tools[0],this.previousSelectedTool=this.tools[0]},a.ToolController.prototype.init=function(){this.createToolsDom_(),this.addKeyboardShortcuts_(),this.selectTool_(this.tools[0]),$("#tool-section").mousedown($.proxy(this.onToolIconClicked_,this))},a.ToolController.prototype.activateToolOnStage_=function(a){var b=$("body"),c=b.data("selected-tool-class");c&&(b.removeClass(c),b.removeClass(pskl.drawingtools.Move.TOOL_ID)),b.addClass(a.instance.toolId),b.data("selected-tool-class",a.instance.toolId)},a.ToolController.prototype.selectTool_=function(a){this.currentSelectedTool=a,this.activateToolOnStage_(this.currentSelectedTool);var b=$("#tool-section .tool-icon.selected"),c=$("[data-tool-id="+a.instance.toolId+"]");b.removeClass("selected"),c.addClass("selected"),$.publish(Events.TOOL_SELECTED,[a.instance])},a.ToolController.prototype.onToolIconClicked_=function(a){var b=$(a.target),c=b.closest(".tool-icon");if(c.length){var d=c.data().toolId,e=this.getToolById_(d);e&&this.selectTool_(e)}},a.ToolController.prototype.onKeyboardShortcut_=function(a){for(var b=0;bName | Date | Actions | -