Feature : darken lighten
Added new tool to lighten/darken. By default is in lightening mode. If the user holds ctrl/cmd while using the tool, switches to darkening mode. If the user holds shift while using the tool, then each pixel can only be modified once per tool usage (ie user keeps hovering the same pixel, it won't get lighter/darker after the first time). Can be useful if you want to keep control of the amount of colors in the sprite. TODO : - Ability to select explicitly lighten/darken (context menu for tools). - Ability to set the 'step' (ie the strength of the lighten/darken)
This commit is contained in:
jdescottes
parent
7569a4343c
commit
0c441c214b
7 changed files with 82 additions and 239 deletions
|
|
@ -1,227 +0,0 @@
|
|||
var Constants={DEFAULT:{HEIGHT:32,WIDTH:32,FPS:12},MODEL_VERSION:2,MAX_HEIGHT:1024,MAX_WIDTH:1024,MINIMUM_ZOOM:1,PREVIEW_FILM_SIZE:96,ANIMATED_PREVIEW_WIDTH:200,DEFAULT_PEN_COLOR:"#000000",TRANSPARENT_COLOR:"rgba(0, 0, 0, 0)",NO_PALETTE_ID:"__no-palette",CURRENT_COLORS_PALETTE_ID:"__current-colors",MANAGE_PALETTE_ID:"__manage-palettes",PREFERRED_COLOR_FORMAT:"rgb",SELECTION_TRANSPARENT_COLOR:"rgba(255, 255, 255, 0.6)",TOOL_TARGET_HIGHLIGHT_COLOR:"rgba(255, 255, 255, 0.2)",STATIC:{URL:{SAVE:"http://3.piskel-app.appspot.com/store",
|
||||
GET:"http://3.piskel-app.appspot.com/get"}},APPENGINE:{URL:{SAVE:"save"}},IMAGE_SERVICE_UPLOAD_URL:"http://piskel-imgstore-a.appspot.com/__/upload",IMAGE_SERVICE_GET_URL:"http://piskel-imgstore-a.appspot.com/img/",ZOOMED_OUT_BACKGROUND_COLOR:"#A0A0A0",LEFT_BUTTON:0,MIDDLE_BUTTON:1,RIGHT_BUTTON:2,MOUSEMOVE_THROTTLING:10,ABSTRACT_FUNCTION:function(){throw"abstract method should be implemented";},EMPTY_FUNCTION:function(){}};var Events={TOOL_SELECTED:"TOOL_SELECTED",TOOL_RELEASED:"TOOL_RELEASED",SELECT_PRIMARY_COLOR:"SELECT_PRIMARY_COLOR",SELECT_SECONDARY_COLOR:"SELECT_SECONDARY_COLOR",PRIMARY_COLOR_SELECTED:"PRIMARY_COLOR_SELECTED",SECONDARY_COLOR_SELECTED:"SECONDARY_COLOR_SELECTED",CURSOR_MOVED:"CURSOR_MOVED",DRAG_START:"DRAG_START",DRAG_END:"DRAG_END",DIALOG_DISPLAY:"DIALOG_DISPLAY",DIALOG_HIDE:"DIALOG_HIDE",PALETTE_LIST_UPDATED:"PALETTE_LIST_UPDATED",USER_SETTINGS_CHANGED:"USER_SETTINGS_CHANGED",CLOSE_SETTINGS_DRAWER:"CLOSE_SETTINGS_DRAWER",
|
||||
PISKEL_RESET:"PISKEL_RESET",PISKEL_SAVE_STATE:"PISKEL_SAVE_STATE",PISKEL_SAVED:"PISKEL_SAVED",FRAME_SIZE_CHANGED:"FRAME_SIZE_CHANGED",SELECTION_CREATED:"SELECTION_CREATED",SELECTION_MOVE_REQUEST:"SELECTION_MOVE_REQUEST",SELECTION_DISMISSED:"SELECTION_DISMISSED",SHOW_NOTIFICATION:"SHOW_NOTIFICATION",HIDE_NOTIFICATION:"HIDE_NOTIFICATION",ZOOM_CHANGED:"ZOOM_CHANGED",CURRENT_COLORS_UPDATED:"CURRENT_COLORS_UPDATED"};(function(){$.namespace("pskl").app={init:function(){this.isAppEngineVersion=!!pskl.appEngineToken_;this.shortcutService=new pskl.service.keyboard.ShortcutService;this.shortcutService.init();var a=this.readSizeFromURL_(),b=new pskl.model.piskel.Descriptor("New Piskel",""),b=new pskl.model.Piskel(a.width,a.height,b),d=new pskl.model.Layer("Layer 1"),a=new pskl.model.Frame(a.width,a.height);d.addFrame(a);b.addLayer(d);this.corePiskelController=new pskl.controller.piskel.PiskelController(b);this.corePiskelController.init();
|
||||
this.piskelController=new pskl.controller.piskel.PublicPiskelController(this.corePiskelController);this.piskelController.init();this.paletteController=new pskl.controller.PaletteController;this.paletteController.init();this.currentColorsService=new pskl.service.CurrentColorsService(this.piskelController);this.currentColorsService.init();this.palettesListController=new pskl.controller.PalettesListController(this.paletteController,this.currentColorsService);this.palettesListController.init();this.cursorCoordinatesController=
|
||||
new pskl.controller.CursorCoordinatesController(this.piskelController);this.cursorCoordinatesController.init();this.drawingController=new pskl.controller.DrawingController(this.piskelController,this.paletteController,$("#drawing-canvas-container"));this.drawingController.init();this.animationController=new pskl.controller.AnimatedPreviewController(this.piskelController,$("#animated-preview-canvas-container"));this.animationController.init();this.minimapController=new pskl.controller.MinimapController(this.piskelController,
|
||||
this.animationController,this.drawingController,$("#animated-preview-canvas-container"));this.minimapController.init();this.previewFilmController=new pskl.controller.PreviewFilmController(this.piskelController,$("#preview-list"));this.previewFilmController.init();this.layersListController=new pskl.controller.LayersListController(this.piskelController);this.layersListController.init();this.settingsController=new pskl.controller.settings.SettingsController(this.piskelController);this.settingsController.init();
|
||||
this.dialogsController=new pskl.controller.dialogs.DialogsController(this.piskelController);this.dialogsController.init();this.toolController=new pskl.controller.ToolController;this.toolController.init();this.selectionManager=new pskl.selection.SelectionManager(this.piskelController);this.selectionManager.init();this.historyService=new pskl.service.HistoryService(this.corePiskelController);this.historyService.init();this.notificationController=new pskl.controller.NotificationController;this.notificationController.init();
|
||||
this.canvasBackgroundController=new pskl.controller.CanvasBackgroundController;this.canvasBackgroundController.init();this.localStorageService=new pskl.service.LocalStorageService(this.piskelController);this.localStorageService.init();this.imageUploadService=new pskl.service.ImageUploadService;this.imageUploadService.init();this.cheatsheetService=new pskl.service.keyboard.CheatsheetService;this.cheatsheetService.init();this.savedStatusService=new pskl.service.SavedStatusService(this.piskelController);
|
||||
this.savedStatusService.init();this.storageService=this.isAppEngineVersion?new pskl.service.AppEngineStorageService(this.piskelController):new pskl.service.GithubStorageService(this.piskelController);this.storageService.init();a=new pskl.rendering.DrawingLoop;a.addCallback(this.render,this);a.start();this.initTooltips_();this.isAppEngineVersion?this.finishInitAppEngine_():this.finishInitGithub_()},finishInitGithub_:function(){var a=this.readFramesheetIdFromURL_();a&&($.publish(Events.SHOW_NOTIFICATION,
|
||||
[{content:"Loading animation with id : ["+a+"]"}]),this.loadFramesheetFromService(a))},finishInitAppEngine_:function(){pskl.appEnginePiskelData_&&pskl.appEnginePiskelData_.piskel&&pskl.utils.serialization.Deserializer.deserialize(pskl.appEnginePiskelData_.piskel,function(a){a.setDescriptor(pskl.appEnginePiskelData_.descriptor);pskl.app.piskelController.setPiskel(a);pskl.app.animationController.setFPS(pskl.appEnginePiskelData_.fps)})},isLoggedIn:function(){return pskl.appEnginePiskelData_&&pskl.appEnginePiskelData_.isLoggedIn},
|
||||
initTooltips_:function(){$("body").tooltip({selector:"[rel=tooltip]"})},render:function(a){this.drawingController.render(a);this.animationController.render(a);this.previewFilmController.render(a)},readSizeFromURL_:function(){var a,b=this.readUrlParameter_("size").split("x");!b||2!=b.length||isNaN(b[0])||isNaN(b[1])?a={height:Constants.DEFAULT.HEIGHT,width:Constants.DEFAULT.WIDTH}:(a=parseInt(b[0],10),b=parseInt(b[1],10),a={height:Math.min(b,Constants.MAX_HEIGHT),width:Math.min(a,Constants.MAX_WIDTH)});
|
||||
return a},readFramesheetIdFromURL_:function(){return this.readUrlParameter_("frameId")},readUrlParameter_:function(a){for(var b=window.location.search.substring(1).split("&"),d=0;d<b.length;d++){var c=b[d].split("=");if(c[0]==a)return window.unescape(c[1])}return""},loadFramesheetFromService:function(a){var b=new XMLHttpRequest;b.open("GET",Constants.STATIC.URL.GET+"?l="+a,!0);b.responseType="text";b.onload=function(b){var a=JSON.parse(this.responseText);pskl.utils.serialization.Deserializer.deserialize(a.framesheet,
|
||||
function(b){pskl.app.piskelController.setPiskel(b);pskl.app.animationController.setFPS(a.fps);$.publish(Events.HIDE_NOTIFICATION)})};b.onerror=function(){$.publish(Events.HIDE_NOTIFICATION)};b.send()},store:function(a){this.storageService.store(a)},getFirstFrameAsPng:function(){var a=this.piskelController.getFrameAt(0),a=new pskl.rendering.CanvasRenderer(a,1);a.drawTransparentAs("rgba(0,0,0,0)");return a.render().toDataURL("image/png")},getFramesheetAsPng:function(){return(new pskl.rendering.PiskelRenderer(this.piskelController)).renderAsCanvas().toDataURL("image/png")},
|
||||
uploadAsSpritesheetPNG:function(){var a=this.getFramesheetAsPng();this.imageUploadService.upload(a,this.openWindow.bind(this))},openWindow:function(a){var b=["dialog=yes,scrollbars=no,status=no","width="+this.piskelController.getWidth()*this.piskelController.getFrameCount(),"height="+this.piskelController.getHeight()].join();window.open(a,"piskel-export",b)}}})();(function(){var a=$.namespace("pskl.controller");a.AnimatedPreviewController=function(b,d){this.piskelController=b;this.container=d;this.currentIndex=this.elapsedTime=0;this.setFPS(Constants.DEFAULT.FPS);this.piskelController.getCurrentFrame();this.renderer=new pskl.rendering.frame.TiledFrameRenderer(this.container);this.updateZoom_();$.subscribe(Events.FRAME_SIZE_CHANGED,this.onFrameSizeChange_.bind(this));$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this))};a.AnimatedPreviewController.prototype.onUserSettingsChange_=
|
||||
function(){this.updateZoom_();this.updateContainerDimensions_()};a.AnimatedPreviewController.prototype.updateZoom_=function(){var b=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW)?1:this.calculateZoom_();this.renderer.setZoom(b)};a.AnimatedPreviewController.prototype.getZoom=function(){return this.calculateZoom_()};a.AnimatedPreviewController.prototype.getCoordinates=function(b,d){var a=this.container.offset();b-=a.left;d-=a.top;a=this.getZoom();return{x:Math.floor(b/a),y:Math.floor(d/a)}};
|
||||
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"};a.AnimatedPreviewController.prototype.onFPSSliderChange=function(b){this.setFPS(parseInt($("#preview-fps")[0].value,10))};a.AnimatedPreviewController.prototype.setFPS=function(b){this.fps=b;$("#preview-fps").val(this.fps);$("#display-fps").html(this.fps+" FPS")};a.AnimatedPreviewController.prototype.getFPS=
|
||||
function(){return this.fps};a.AnimatedPreviewController.prototype.render=function(b){this.elapsedTime+=b;b=Math.floor(this.elapsedTime/(1E3/this.fps));b!=this.currentIndex&&(this.currentIndex=b,this.piskelController.hasFrameAt(this.currentIndex)||(this.elapsedTime=this.currentIndex=0),b=this.piskelController.getFrameAt(this.currentIndex),this.renderer.render(b))};a.AnimatedPreviewController.prototype.calculateZoom_=function(){var b=this.piskelController.getCurrentFrame(),d=200/b.getHeight(),b=200/
|
||||
b.getWidth();return Math.min(d,b)};a.AnimatedPreviewController.prototype.onFrameSizeChange_=function(){this.updateZoom_();this.updateContainerDimensions_()};a.AnimatedPreviewController.prototype.updateContainerDimensions_=function(){var b=this.container.get(0),d,a;if(pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW))a=d=200;else{a=this.getZoom();var e=this.piskelController.getCurrentFrame();d=e.getHeight()*a;a*=e.getWidth()}b.style.height=d+"px";b.style.width=a+"px";b.style.marginTop=(200-d)/
|
||||
2+"px";b.style.marginBottom=(200-d)/2+"px";b.style.marginLeft=(200-a)/2+"px";b.style.marginRight=(200-a)/2+"px"}})();(function(){var a=$.namespace("pskl.controller");a.CanvasBackgroundController=function(){this.body=document.body};a.CanvasBackgroundController.prototype.init=function(){$.subscribe(Events.USER_SETTINGS_CHANGED,this.onUserSettingsChange_.bind(this));this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND))};a.CanvasBackgroundController.prototype.onUserSettingsChange_=function(b,d,a){d==pskl.UserSettings.CANVAS_BACKGROUND&&this.updateBackgroundClass_(a)};a.CanvasBackgroundController.prototype.updateBackgroundClass_=
|
||||
function(b){var d=this.body.dataset.currentBackgroundClass;d&&this.body.classList.remove(d);this.body.classList.add(b);this.body.dataset.currentBackgroundClass=b}})();(function(){var a=$.namespace("pskl.controller");a.CursorCoordinatesController=function(b){this.piskelController=b;this.origin=null;this.coordinates={x:-1,y:-1}};a.CursorCoordinatesController.prototype.init=function(){this.coordinatesContainer=document.querySelector(".cursor-coordinates");$.subscribe(Events.CURSOR_MOVED,this.onCursorMoved_.bind(this));$.subscribe(Events.DRAG_START,this.onDragStart_.bind(this));$.subscribe(Events.DRAG_END,this.onDragEnd_.bind(this));$.subscribe(Events.FRAME_SIZE_CHANGED,
|
||||
this.redraw.bind(this));this.redraw()};a.CursorCoordinatesController.prototype.redraw=function(){var b="";this.origin&&(b+=this.origin.x+":"+this.origin.y+" to ");var d=this.coordinates.x,a=this.coordinates.y;this.piskelController.getCurrentFrame().containsPixel(d,a)&&(b+=d+":"+a,this.origin&&(d=Math.abs(d-this.origin.x)+1,a=Math.abs(a-this.origin.y)+1,b+=" ("+d+"x"+a+")"));this.coordinatesContainer.innerHTML=this.getFrameSizeHTML_()+b};a.CursorCoordinatesController.prototype.getFrameSizeHTML_=function(){var b=
|
||||
this.piskelController.getWidth(),d=this.piskelController.getHeight();return"["+b+"x"+d+"] "};a.CursorCoordinatesController.prototype.onCursorMoved_=function(b,d,a){this.coordinates={x:d,y:a};this.redraw()};a.CursorCoordinatesController.prototype.onDragStart_=function(b,d,a){this.origin={x:d,y:a};this.redraw()};a.CursorCoordinatesController.prototype.onDragEnd_=function(b,d,a){this.origin=null;this.redraw()}})();(function(){var a=$.namespace("pskl.controller");a.DrawingController=function(b,d,a){this.piskelController=b;this.paletteController=d;this.overlayFrame=pskl.model.Frame.createEmptyFromFrame(b.getCurrentFrame());this.container=a;d={zoom:this.calculateZoom_(),supportGridRendering:!0,height:this.getContainerHeight_(),width:this.getContainerWidth_(),xOffset:0,yOffset:0};this.overlayRenderer=new pskl.rendering.frame.CachedFrameRenderer(this.container,d,["canvas-overlay"]);this.renderer=new pskl.rendering.frame.CachedFrameRenderer(this.container,
|
||||
d,["drawing-canvas"]);this.layersRenderer=new pskl.rendering.layer.LayersRenderer(this.container,d,b);this.compositeRenderer=new pskl.rendering.CompositeRenderer;this.compositeRenderer.add(this.overlayRenderer).add(this.renderer).add(this.layersRenderer);this.isClicked=!1;this.previousMousemoveTime=0;this.currentToolBehavior=null;this.currentMouseButton_=Constants.LEFT_BUTTON};a.DrawingController.prototype.init=function(){this.initMouseBehavior();$.subscribe(Events.TOOL_SELECTED,$.proxy(function(b,
|
||||
d){this.currentToolBehavior=d;this.overlayFrame.clear()},this));$(window).resize($.proxy(this.startResizeTimer_,this));$.subscribe(Events.USER_SETTINGS_CHANGED,$.proxy(this.onUserSettingsChange_,this));$.subscribe(Events.FRAME_SIZE_CHANGED,$.proxy(this.onFrameSizeChanged_,this));window.setTimeout(this.afterWindowResize_.bind(this),100)};a.DrawingController.prototype.initMouseBehavior=function(){var b=$("body");this.container.mousedown($.proxy(this.onMousedown_,this));if(pskl.utils.UserAgent.isChrome)this.container.on("mousewheel",
|
||||
$.proxy(this.onMousewheel_,this));else this.container.on("wheel",$.proxy(this.onMousewheel_,this));window.addEventListener("mouseup",this.onMouseup_.bind(this));window.addEventListener("mousemove",this.onMousemove_.bind(this));window.addEventListener("keyup",this.onKeyup_.bind(this));b.contextmenu(this.onCanvasContextMenu_)};a.DrawingController.prototype.startResizeTimer_=function(){this.resizeTimer&&window.clearInterval(this.resizeTimer);this.resizeTimer=window.setTimeout($.proxy(this.afterWindowResize_,
|
||||
this),200)};a.DrawingController.prototype.afterWindowResize_=function(){var b=this.compositeRenderer.getDisplaySize().width;this.compositeRenderer.setDisplaySize(this.getContainerWidth_(),this.getContainerHeight_());this.centerColumnWrapperHorizontally_();b=this.compositeRenderer.getDisplaySize().width/b*this.compositeRenderer.getZoom();this.compositeRenderer.setZoom(b);$.publish(Events.ZOOM_CHANGED)};a.DrawingController.prototype.onUserSettingsChange_=function(b,d,a){d==pskl.UserSettings.SHOW_GRID&&
|
||||
console.warn("DrawingController:onUserSettingsChange_ not implemented !")};a.DrawingController.prototype.onFrameSizeChanged_=function(){this.compositeRenderer.setDisplaySize(this.getContainerWidth_(),this.getContainerHeight_());this.centerColumnWrapperHorizontally_();this.compositeRenderer.setZoom(this.calculateZoom_());this.compositeRenderer.setOffset(0,0);$.publish(Events.ZOOM_CHANGED)};a.DrawingController.prototype.onMousedown_=function(b){var d=this.piskelController.getCurrentFrame(),a=this.renderer.getCoordinates(b.clientX,
|
||||
b.clientY);b.button===Constants.MIDDLE_BUTTON?d.containsPixel(a.x,a.y)&&$.publish(Events.SELECT_PRIMARY_COLOR,[d.getPixel(a.x,a.y)]):(this.isClicked=!0,this.setCurrentButton(b),this.currentToolBehavior.hideHighlightedPixel(this.overlayFrame),this.currentToolBehavior.applyToolAt(a.x,a.y,this.getCurrentColor_(),d,this.overlayFrame,b))};a.DrawingController.prototype.onMousemove_=function(b){this._clientX=b.clientX;this._clientY=b.clientY;var d=(new Date).getTime();d-this.previousMousemoveTime>Constants.MOUSEMOVE_THROTTLING&&
|
||||
(this.moveTool_(this._clientX,this._clientY,b),this.previousMousemoveTime=d)};a.DrawingController.prototype.onKeyup_=function(b){this.moveTool_(this._clientX,this._clientY,b)};a.DrawingController.prototype.moveTool_=function(b,d,a){b=this.renderer.getCoordinates(b,d);d=this.piskelController.getCurrentFrame();this.isClicked?this.currentToolBehavior.moveToolAt(b.x|0,b.y|0,this.getCurrentColor_(),d,this.overlayFrame,a):this.currentToolBehavior.moveUnactiveToolAt(b.x,b.y,this.getCurrentColor_(),d,this.overlayFrame,
|
||||
a);$.publish(Events.CURSOR_MOVED,[b.x,b.y])};a.DrawingController.prototype.onMousewheel_=function(b){b=b.originalEvent;b=b.wheelDeltaY||-2*b.deltaY;var d=this.renderer.getZoom(),a=this.calculateZoom_()/10;0<b?this.compositeRenderer.setZoom(d+a):0>b&&this.compositeRenderer.setZoom(d-a);$.publish(Events.ZOOM_CHANGED)};a.DrawingController.prototype.onMouseup_=function(b){if(this.isClicked){this.isClicked=!1;this.setCurrentButton(b);var d=this.renderer.getCoordinates(b.clientX,b.clientY);this.currentToolBehavior.releaseToolAt(d.x,
|
||||
d.y,this.getCurrentColor_(),this.piskelController.getCurrentFrame(),this.overlayFrame,b);$.publish(Events.TOOL_RELEASED)}};a.DrawingController.prototype.getSpriteCoordinates=function(b){return this.renderer.getCoordinates(b.clientX,b.clientY)};a.DrawingController.prototype.setCurrentButton=function(b){this.currentMouseButton_=b.button};a.DrawingController.prototype.getCurrentColor_=function(){return this.currentMouseButton_==Constants.RIGHT_BUTTON?this.paletteController.getSecondaryColor():this.currentMouseButton_==
|
||||
Constants.LEFT_BUTTON?this.paletteController.getPrimaryColor():Constants.DEFAULT_PEN_COLOR};a.DrawingController.prototype.onCanvasContextMenu_=function(b){if($(b.target).closest("#drawing-canvas-container").length)return b.preventDefault(),b.stopPropagation(),b.cancelBubble=!0,!1};a.DrawingController.prototype.render=function(){var b=this.piskelController.getCurrentFrame();b.isSameSize(this.overlayFrame)||(this.overlayFrame=pskl.model.Frame.createEmptyFromFrame(b));this.layersRenderer.render();this.renderer.render(b);
|
||||
this.overlayRenderer.render(this.overlayFrame)};a.DrawingController.prototype.calculateZoom_=function(){var b=this.piskelController.getCurrentFrame().getHeight(),d=this.piskelController.getCurrentFrame().getWidth();return Math.min(this.getAvailableWidth_()/d,this.getAvailableHeight_()/b)};a.DrawingController.prototype.getAvailableHeight_=function(){return $("#main-wrapper").height()};a.DrawingController.prototype.getAvailableWidth_=function(){var b=$(".left-column").outerWidth(!0),d=$(".right-column").outerWidth(!0),
|
||||
a=$("#tool-section").outerWidth(!0),e=$("#application-action-section").outerWidth(!0);return $("#main-wrapper").width()-b-d-a-e-10};a.DrawingController.prototype.getContainerHeight_=function(){return this.calculateZoom_()*this.piskelController.getCurrentFrame().getHeight()};a.DrawingController.prototype.getContainerWidth_=function(){return this.calculateZoom_()*this.piskelController.getCurrentFrame().getWidth()};a.DrawingController.prototype.centerColumnWrapperHorizontally_=function(){var b=this.getContainerHeight_(),
|
||||
b=Math.floor(($("#main-wrapper").height()-b)/2);$("#column-wrapper").css({top:b+"px"})};a.DrawingController.prototype.getRenderer=function(){return this.compositeRenderer};a.DrawingController.prototype.setOffset=function(b,d){this.compositeRenderer.setOffset(b,d);$.publish(Events.ZOOM_CHANGED)}})();(function(){var a=$.namespace("pskl.controller");a.LayersListController=function(b){this.piskelController=b};a.LayersListController.prototype.init=function(){this.layerItemTemplate_=pskl.utils.Template.get("layer-item-template");this.rootEl=document.querySelectorAll(".layers-list-container")[0];this.layersListEl=document.querySelectorAll(".layers-list")[0];this.rootEl.addEventListener("click",this.onClick_.bind(this));$.subscribe(Events.PISKEL_RESET,this.renderLayerList_.bind(this));this.renderLayerList_()};
|
||||
a.LayersListController.prototype.renderLayerList_=function(){this.layersListEl.innerHTML="";this.piskelController.getLayers().forEach(this.addLayerItem.bind(this))};a.LayersListController.prototype.addLayerItem=function(b,d){var a=this.piskelController.getCurrentLayer()===b,a=pskl.utils.Template.replace(this.layerItemTemplate_,{layername:b.getName(),layerindex:d,"isselected:current-layer-item":a}),a=pskl.utils.Template.createFromHTML(a);this.layersListEl.insertBefore(a,this.layersListEl.firstChild)};
|
||||
a.LayersListController.prototype.onClick_=function(b){b=b.target||b.srcElement;if(b.classList.contains("button"))this.onButtonClick_(b);else b.classList.contains("layer-item")?(b=b.dataset.layerIndex,this.piskelController.setCurrentLayerIndex(parseInt(b,10))):b.classList.contains("edit-icon")&&(b=b.parentNode.dataset.layerIndex,this.renameLayerAt_(b))};a.LayersListController.prototype.renameLayerAt_=function(b){var d=this.piskelController.getLayerAt(b);if(d=window.prompt("Please enter the layer name",
|
||||
d.getName()))this.piskelController.renameLayerAt(b,d),this.renderLayerList_()};a.LayersListController.prototype.onButtonClick_=function(b){b=b.getAttribute("data-action");"up"==b?this.piskelController.moveLayerUp():"down"==b?this.piskelController.moveLayerDown():"add"==b?this.piskelController.createLayer():"delete"==b&&this.piskelController.removeCurrentLayer()}})();(function(){var a=$.namespace("pskl.controller");a.MinimapController=function(b,d,a,e){this.piskelController=b;this.animationController=d;this.drawingController=a;this.container=e;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 b=this.getDrawingAreaZoomRatio_();1<b?this.displayCropFrame_(b,this.drawingController.getRenderer().getOffset()):this.hideCropFrame_()};a.MinimapController.prototype.displayCropFrame_=function(b,d){this.cropFrame.style.display="block";this.cropFrame.style.top=d.y*this.animationController.getZoom()+"px";this.cropFrame.style.left=
|
||||
d.x*this.animationController.getZoom()+"px";var a=this.getDrawingAreaZoomRatio_();this.cropFrame.style.width=this.container.width()/a+"px";this.cropFrame.style.height=this.container.height()/a+"px"};a.MinimapController.prototype.hideCropFrame_=function(){this.cropFrame.style.display="none"};a.MinimapController.prototype.onMinimapMousemove_=function(b){this.isClicked&&1<this.getDrawingAreaZoomRatio_()&&(b=this.getCoordinatesCenteredAround_(b.clientX,b.clientY),this.drawingController.setOffset(b.x,
|
||||
b.y))};a.MinimapController.prototype.onMinimapMousedown_=function(b){this.isClicked=!0};a.MinimapController.prototype.onMinimapMouseup_=function(b){this.isClicked=!1};a.MinimapController.prototype.getCoordinatesCenteredAround_=function(b,d){var a=this.animationController.getCoordinates(b,d),e=this.getDrawingAreaZoomRatio_(),f=this.piskelController.getCurrentFrame().getWidth(),g=this.piskelController.getCurrentFrame().getHeight();return{x:a.x-f/e/2,y:a.y-g/e/2}};a.MinimapController.prototype.getDrawingAreaZoomRatio_=
|
||||
function(){var b=this.drawingController.getRenderer().getZoom();return this.piskelController.getCurrentFrame().getHeight()*b/this.drawingController.getRenderer().getDisplaySize().height}})();(function(){var a=$.namespace("pskl.controller");a.NotificationController=function(){};a.NotificationController.prototype.init=function(){$.subscribe(Events.SHOW_NOTIFICATION,$.proxy(this.displayMessage_,this));$.subscribe(Events.HIDE_NOTIFICATION,$.proxy(this.removeMessage_,this))};a.NotificationController.prototype.displayMessage_=function(b,d){this.removeMessage_();var a=document.createElement("div");a.id="user-message";a.className="user-message";a.innerHTML=d.content;a.innerHTML+="<div title='Close message' class='close'>x</div>";
|
||||
document.body.appendChild(a);$(a).find(".close").click($.proxy(this.removeMessage_,this));d.behavior&&d.behavior(a)};a.NotificationController.prototype.removeMessage_=function(b){b=$("#user-message");b.length&&b.remove()}})();(function(){var a=$.namespace("pskl.controller");a.PaletteController=function(){this.primaryColor=Constants.DEFAULT_PEN_COLOR;this.secondaryColor=Constants.TRANSPARENT_COLOR};a.PaletteController.prototype.init=function(){$.subscribe(Events.SELECT_PRIMARY_COLOR,this.onColorSelected_.bind(this,{isPrimary:!0}));$.subscribe(Events.SELECT_SECONDARY_COLOR,this.onColorSelected_.bind(this,{isPrimary:!1}));pskl.app.shortcutService.addShortcut("X",this.swapColors.bind(this));pskl.app.shortcutService.addShortcut("D",
|
||||
this.resetColors.bind(this));var b={showPalette:!0,showButtons:!1,showInput:!0,palette:[["rgba(0,0,0,0)"]],clickoutFiresChange:!0,beforeShow:function(b){b.setAlpha(1)}},d=$("#color-picker");d.spectrum($.extend({color:Constants.DEFAULT_PEN_COLOR},b));d.change({isPrimary:!0},$.proxy(this.onPickerChange_,this));this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR,d);d=$("#secondary-color-picker");d.spectrum($.extend({color:Constants.TRANSPARENT_COLOR},b));d.change({isPrimary:!1},$.proxy(this.onPickerChange_,
|
||||
this));this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR,d);$(".swap-colors-icon").click(this.swapColors.bind(this))};a.PaletteController.prototype.onPickerChange_=function(b,d){var a=$(b.target);b.data.isPrimary?this.setPrimaryColor(a.val()):this.setSecondaryColor(a.val())};a.PaletteController.prototype.onColorSelected_=function(b,d,a){$(d.target);b.isPrimary?this.setPrimaryColor(a):this.setSecondaryColor(a)};a.PaletteController.prototype.setPrimaryColor=function(b){this.primaryColor=b;this.updateColorPicker_(b,
|
||||
$("#color-picker"));$.publish(Events.PRIMARY_COLOR_SELECTED,[b])};a.PaletteController.prototype.setSecondaryColor=function(b){this.secondaryColor=b;this.updateColorPicker_(b,$("#secondary-color-picker"));$.publish(Events.SECONDARY_COLOR_SELECTED,[b])};a.PaletteController.prototype.getPrimaryColor=function(){return this.primaryColor};a.PaletteController.prototype.getSecondaryColor=function(){return this.secondaryColor};a.PaletteController.prototype.swapColors=function(){var b=this.getPrimaryColor();
|
||||
this.setPrimaryColor(this.getSecondaryColor());this.setSecondaryColor(b)};a.PaletteController.prototype.resetColors=function(){this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);this.setSecondaryColor(Constants.TRANSPARENT_COLOR)};a.PaletteController.prototype.updateColorPicker_=function(b,d){b==Constants.TRANSPARENT_COLOR?(d.spectrum("set",Constants.TRANSPARENT_COLOR),d.val(Constants.TRANSPARENT_COLOR)):d.spectrum("set",b);this.setTitleOnPicker_(b,d)};a.PaletteController.prototype.setTitleOnPicker_=
|
||||
function(b,d){d.next(".sp-replacer").attr("title",b)}})();(function(){var a=$.namespace("pskl.controller");a.PalettesListController=function(b,d){this.usedColorService=d;this.paletteController=b};a.PalettesListController.prototype.init=function(){this.paletteColorTemplate_=pskl.utils.Template.get("palette-color-template");this.colorListContainer_=document.querySelector(".palettes-list-colors");this.colorPaletteSelect_=document.querySelector(".palettes-list-select");this.paletteListOptGroup_=document.querySelector(".palettes-list-select-group");this.colorPaletteSelect_.addEventListener("change",
|
||||
this.onPaletteSelected_.bind(this));this.colorListContainer_.addEventListener("mouseup",this.onColorContainerMouseup.bind(this));this.colorListContainer_.addEventListener("contextmenu",this.onColorContainerContextMenu.bind(this));$.subscribe(Events.PALETTE_LIST_UPDATED,this.onPaletteListUpdated.bind(this));$.subscribe(Events.CURRENT_COLORS_UPDATED,this.fillColorListContainer.bind(this));$.subscribe(Events.PRIMARY_COLOR_SELECTED,this.highlightSelectedColors.bind(this));$.subscribe(Events.SECONDARY_COLOR_SELECTED,
|
||||
this.highlightSelectedColors.bind(this));this.fillPaletteList();this.selectPaletteFromUserSettings();this.fillColorListContainer()};a.PalettesListController.prototype.fillPaletteList=function(){var b=[{id:Constants.NO_PALETTE_ID,name:"No palette"}],b=b.concat(this.retrievePalettes()),b=b.map(function(b){return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>',b)}).join("");this.paletteListOptGroup_.innerHTML=b};a.PalettesListController.prototype.fillColorListContainer=function(){var b=
|
||||
this.getSelectedPaletteColors_(),d=b.map(function(b){return pskl.utils.Template.replace(this.paletteColorTemplate_,{color:b})}.bind(this)).join("");this.colorListContainer_.innerHTML=d;this.highlightSelectedColors();20<b.length&&!pskl.utils.UserAgent.isChrome?this.colorListContainer_.classList.add("palettes-list-has-scrollbar"):this.colorListContainer_.classList.remove("palettes-list-has-scrollbar")};a.PalettesListController.prototype.getSelectedPaletteColors_=function(){var b=[],d=this.colorPaletteSelect_.value;
|
||||
if(d===Constants.CURRENT_COLORS_PALETTE_ID)b=this.usedColorService.getCurrentColors();else if(d=this.getPaletteById(d,this.retrievePalettes()))b=d.colors;100<b.length&&(b=b.slice(0,100));return b};a.PalettesListController.prototype.selectPalette=function(b){this.colorPaletteSelect_.value=b};a.PalettesListController.prototype.selectPaletteFromUserSettings=function(){this.selectPalette(pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE))};a.PalettesListController.prototype.onPaletteSelected_=
|
||||
function(b){b=this.colorPaletteSelect_.value;b===Constants.MANAGE_PALETTE_ID?($.publish(Events.DIALOG_DISPLAY,"manage-palettes"),this.selectPaletteFromUserSettings()):pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE,b);this.fillColorListContainer()};a.PalettesListController.prototype.onColorContainerContextMenu=function(b){b.preventDefault()};a.PalettesListController.prototype.onColorContainerMouseup=function(b){var d=b.target.dataset.color;d&&(b.button==Constants.LEFT_BUTTON?$.publish(Events.SELECT_PRIMARY_COLOR,
|
||||
[d]):b.button==Constants.RIGHT_BUTTON&&$.publish(Events.SELECT_SECONDARY_COLOR,[d]))};a.PalettesListController.prototype.highlightSelectedColors=function(){this.removeClass_("palettes-list-primary-color");this.removeClass_("palettes-list-secondary-color");var b=this.getColorContainer_(this.paletteController.getSecondaryColor());b&&(b.classList.remove("palettes-list-primary-color"),b.classList.add("palettes-list-secondary-color"));if(b=this.getColorContainer_(this.paletteController.getPrimaryColor()))b.classList.remove("palettes-list-secondary-color"),
|
||||
b.classList.add("palettes-list-primary-color")};a.PalettesListController.prototype.getColorContainer_=function(b){return this.colorListContainer_.querySelector('.palettes-list-color[data-color="'+b+'"]')};a.PalettesListController.prototype.removeClass_=function(b){var d=document.querySelector("."+b);d&&d.classList.remove(b)};a.PalettesListController.prototype.onPaletteListUpdated=function(){this.fillPaletteList();this.selectPaletteFromUserSettings();this.fillColorListContainer()};a.PalettesListController.prototype.getPaletteById=
|
||||
function(b,d){var a=null;d.forEach(function(d){d.id===b&&(a=d)});return a};a.PalettesListController.prototype.retrievePalettes=function(){var b=window.localStorage.getItem("piskel.palettes");return JSON.parse(b)||[]}})();(function(){var a=$.namespace("pskl.controller");a.PreviewFilmController=function(b,d){this.piskelController=b;this.container=d;this.refreshZoom_();this.redrawFlag=!0};a.PreviewFilmController.prototype.init=function(){$.subscribe(Events.TOOL_RELEASED,this.flagForRedraw_.bind(this));$.subscribe(Events.PISKEL_RESET,this.flagForRedraw_.bind(this));$.subscribe(Events.USER_SETTINGS_CHANGED,this.flagForRedraw_.bind(this));$.subscribe(Events.PISKEL_RESET,this.refreshZoom_.bind(this));$("#preview-list-scroller").scroll(this.updateScrollerOverflows.bind(this));
|
||||
this.container.get(0).addEventListener("click",this.onContainerClick_.bind(this));this.updateScrollerOverflows()};a.PreviewFilmController.prototype.flagForRedraw_=function(){this.redrawFlag=!0};a.PreviewFilmController.prototype.refreshZoom_=function(){this.zoom=this.calculateZoom_()};a.PreviewFilmController.prototype.render=function(){this.redrawFlag&&(this.createPreviews_(),this.redrawFlag=!1)};a.PreviewFilmController.prototype.updateScrollerOverflows=function(){var b=$("#preview-list-scroller"),
|
||||
d=b.height(),a=b.scrollTop(),e=$("#preview-list").height(),f=$(".top-overflow").height(),g=b=!1;d<e&&(a>f&&(b=!0),e-a-d>f&&(g=!0));d=$("#preview-list-wrapper");d.toggleClass("top-overflow-visible",b);d.toggleClass("bottom-overflow-visible",g)};a.PreviewFilmController.prototype.onContainerClick_=function(b){var d=pskl.utils.Dom.getParentWithData(b.target,"tileAction");d&&(b=d.dataset.tileAction,d=parseInt(d.dataset.tileNumber,10),"clone"===b?(this.piskelController.duplicateFrameAt(d),this.piskelController.setCurrentFrameIndex(d+
|
||||
1),this.updateScrollerOverflows()):"delete"===b?(this.piskelController.removeFrameAt(d),this.updateScrollerOverflows()):"select"===b?this.piskelController.setCurrentFrameIndex(d):"newframe"===b&&(this.piskelController.addFrame(),this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount()-1),this.updateScrollerOverflows()))};a.PreviewFilmController.prototype.createPreviews_=function(){this.container.html("");$(".tooltip").remove();for(var b=this.piskelController.getFrameCount(),
|
||||
d=0;d<b;d++)this.container.append(this.createPreviewTile_(d));d=document.createElement("div");d.id="add-frame-action";d.className="add-frame-action";d.setAttribute("data-tile-action","newframe");d.innerHTML="<p class='label'>Add new frame</p>";this.container.append(d);1<b&&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(b,d){var a=parseInt(d.item.data("tile-number"),10),e=$(".preview-tile").index(d.item);this.piskelController.moveFrame(a,e);this.piskelController.setCurrentFrameIndex(e)};a.PreviewFilmController.prototype.createPreviewTile_=function(b){var d=this.piskelController.getCurrentLayer().getFrameAt(b),a=document.createElement("li");a.setAttribute("data-tile-number",b);a.setAttribute("data-tile-action",
|
||||
"select");a.classList.add("preview-tile");this.piskelController.getCurrentFrame()==d&&a.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);f=document.createElement("button");f.setAttribute("rel","tooltip");f.setAttribute("data-placement","right");f.setAttribute("data-tile-number",b);f.setAttribute("data-tile-action",
|
||||
"clone");f.setAttribute("title","Duplicate this frame");f.className="tile-overlay duplicate-frame-action";a.appendChild(f);d=new pskl.rendering.CanvasRenderer(d,this.zoom);d.drawTransparentAs(Constants.TRANSPARENT_COLOR);d=d.render();d.classList.add("tile-view","canvas");e.appendChild(d);a.appendChild(e);if(0<b||1<this.piskelController.getFrameCount())e=document.createElement("button"),e.setAttribute("rel","tooltip"),e.setAttribute("data-placement","right"),e.setAttribute("title","Delete this frame"),
|
||||
e.setAttribute("data-tile-number",b),e.setAttribute("data-tile-action","delete"),e.className="tile-overlay delete-frame-action",a.appendChild(e),e=document.createElement("div"),e.className="tile-overlay dnd-action",a.appendChild(e);e=document.createElement("div");e.className="tile-overlay tile-count";e.innerHTML=b+1;a.appendChild(e);return a};a.PreviewFilmController.prototype.calculateZoom_=function(){var b=this.piskelController.getCurrentFrame(),d=b.getHeight(),b=b.getWidth();return Math.min(Constants.PREVIEW_FILM_SIZE/
|
||||
d,Constants.PREVIEW_FILM_SIZE/b)}})();(function(){var a=$.namespace("pskl.controller");a.ToolController=function(){var b=function(b,a,e){return{id:b,shortcut:a,instance:e}};this.tools=[b("simplePen","P",new pskl.drawingtools.SimplePen),b("verticalMirrorPen","V",new pskl.drawingtools.VerticalMirrorPen),b("eraser","E",new pskl.drawingtools.Eraser),b("paintBucket","B",new pskl.drawingtools.PaintBucket),b("stroke","L",new pskl.drawingtools.Stroke),b("rectangle","R",new pskl.drawingtools.Rectangle),b("circle","C",new pskl.drawingtools.Circle),
|
||||
b("move","M",new pskl.drawingtools.Move),b("rectangleSelect","S",new pskl.drawingtools.RectangleSelect),b("shapeSelect","Z",new pskl.drawingtools.ShapeSelect),b("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(b){var d=$("body"),a=d.data("selected-tool-class");a&&(d.removeClass(a),d.removeClass(pskl.drawingtools.Move.TOOL_ID));d.addClass(b.instance.toolId);d.data("selected-tool-class",b.instance.toolId)};a.ToolController.prototype.selectTool_=function(b){this.currentSelectedTool=b;this.activateToolOnStage_(this.currentSelectedTool);var d=$("#tool-section .tool-icon.selected"),a=$("[data-tool-id="+b.instance.toolId+"]");d.removeClass("selected");a.addClass("selected");$.publish(Events.TOOL_SELECTED,
|
||||
[b.instance])};a.ToolController.prototype.onToolIconClicked_=function(b){b=$(b.target).closest(".tool-icon");b.length&&(b=b.data().toolId,(b=this.getToolById_(b))&&this.selectTool_(b))};a.ToolController.prototype.onKeyboardShortcut_=function(b){for(var d=0;d<this.tools.length;d++){var a=this.tools[d];a.shortcut.toLowerCase()===b.toLowerCase()&&this.selectTool_(a)}};a.ToolController.prototype.getToolById_=function(b){for(var d=0;d<this.tools.length;d++){var a=this.tools[d];if(a.instance.toolId==b)return a}return null};
|
||||
a.ToolController.prototype.createToolsDom_=function(){for(var b="",d=0;d<this.tools.length;d++)b+=this.getToolMarkup_(this.tools[d]);$("#tools-container").html(b)};a.ToolController.prototype.getToolMarkup_=function(b){var d=b.instance.toolId,a=["tool-icon",d];this.currentSelectedTool==b&&a.push("selected");var e=pskl.utils.Template.get("drawing-tool-item-template");return pskl.utils.Template.replace(e,{cssclass:a.join(" "),toolid:d,title:this.getTooltipText_(b)})};a.ToolController.prototype.getTooltipText_=
|
||||
function(b){return b.instance.helpText+" ("+b.shortcut+")"};a.ToolController.prototype.addKeyboardShortcuts_=function(){for(var b=0;b<this.tools.length;b++)pskl.app.shortcutService.addShortcut(this.tools[b].shortcut,this.onKeyboardShortcut_.bind(this))}})();(function(){var a=$.namespace("pskl.controller.dialogs"),b={"manage-palettes":{template:"templates/dialogs/manage-palettes.html",controller:a.PaletteManagerController}};a.DialogsController=function(b){this.piskelController=b;this.currentDialog_=null};a.DialogsController.prototype.init=function(){this.dialogContainer_=document.getElementById("dialog-container");this.dialogWrapper_=document.getElementById("dialog-container-wrapper");$.subscribe(Events.DIALOG_DISPLAY,this.onDialogDisplayEvent_.bind(this));
|
||||
$.subscribe(Events.DIALOG_HIDE,this.onDialogHideEvent_.bind(this));pskl.app.shortcutService.addShortcut("alt+P",this.onDialogDisplayEvent_.bind(this,null,"manage-palettes"))};a.DialogsController.prototype.onDialogDisplayEvent_=function(d,a){if(!this.isDisplayed()){var e=b[a];e?(this.dialogContainer_.innerHTML=pskl.utils.Template.get(e.template),e=new e.controller(this.piskelController),e.init(),this.showDialogWrapper_(),this.currentDialog_={id:a,controller:e}):console.error("Could not find dialog configuration for dialogId : "+
|
||||
a)}};a.DialogsController.prototype.onDialogHideEvent_=function(){this.hideDialog()};a.DialogsController.prototype.showDialogWrapper_=function(){pskl.app.shortcutService.addShortcut("ESC",this.hideDialog.bind(this));this.dialogWrapper_.classList.add("show")};a.DialogsController.prototype.hideDialog=function(){var b=this.currentDialog_;b&&b.controller.destroy();this.hideDialogWrapper_();this.currentDialog_=null};a.DialogsController.prototype.hideDialogWrapper_=function(){pskl.app.shortcutService.removeShortcut("ESC");
|
||||
this.dialogWrapper_.classList.remove("show")};a.DialogsController.prototype.isDisplayed=function(){return null!==this.currentDialog_}})();(function(){var a=$.namespace("pskl.controller.dialogs"),b=window.tinycolor;a.PaletteManagerController=function(b){this.piskelController=b;this.palettes=this.retrieveUserPalettes();this.originalPalettes=this.retrieveUserPalettes();this.selectedPaletteId=null;this.spectrumContainers=[]};a.PaletteManagerController.prototype.init=function(){this.palettesList=document.querySelector(".palette-manager-list");this.paletteBody=document.querySelector(".palette-manager-details-body");this.paletteHead=document.querySelector(".palette-manager-details-head");
|
||||
this.createButton=document.querySelector('.palette-manager-actions-button[data-action="create"]');this.saveAllButton=document.querySelector('.palette-manager-actions-button[data-action="save-all"]');this.closeButton=document.querySelector(".palette-manager-close");this.colorCardTemplate=pskl.utils.Template.get("palette-color-card-template");this.newColorTemplate=pskl.utils.Template.get("palette-new-color-template");this.paletteHeadTemplate=pskl.utils.Template.get("palette-details-head-template");
|
||||
this.palettesList.addEventListener("click",this.onPaletteListClick.bind(this));this.paletteBody.addEventListener("click",this.delegatedPaletteBodyClick.bind(this));this.paletteHead.addEventListener("click",this.delegatedPaletteHeadClick.bind(this));this.createButton.addEventListener("click",this.onCreateClick_.bind(this));this.saveAllButton.addEventListener("click",this.saveAll.bind(this));this.closeButton.addEventListener("click",this.closeDialog.bind(this));this.createPaletteListMarkup();0<this.palettes.length?
|
||||
this.selectPalette(this.palettes[0].id):this.createPalette("New palette")};a.PaletteManagerController.prototype.destroy=function(){this.destroySpectrumPickers()};a.PaletteManagerController.prototype.closeDialog=function(){$.publish(Events.DIALOG_HIDE)};a.PaletteManagerController.prototype.onCreateClick_=function(b){this.createPalette()};a.PaletteManagerController.prototype.createPalette=function(b){b||(b=window.prompt("Please enter a name for your palette","New palette"));b&&(b=this.createPaletteObject(b),
|
||||
this.palettes.push(b),this.createPaletteListMarkup(),this.selectPalette(b.id))};a.PaletteManagerController.prototype.createPaletteObject=function(b){return{id:"palette-"+Date.now()+"-"+Math.floor(1E3*Math.random()),name:b,colors:[]}};a.PaletteManagerController.prototype.redraw=function(){this.createPaletteListMarkup();this.selectPalette(this.selectedPaletteId)};a.PaletteManagerController.prototype.selectPalette=function(b){this.deselectCurrentPalette();var a=this.palettesList.querySelector("[data-palette-id="+
|
||||
b+"]");a&&(this.selectedPaletteId=b,a.classList.add("selected"),this.refreshPaletteDetails())};a.PaletteManagerController.prototype.refreshPaletteDetails=function(){this.createPaletteHeadMarkup();this.createPaletteBodyMarkup();this.initPaletteDetailsEvents();this.initPaletteCardsSpectrum()};a.PaletteManagerController.prototype.createPaletteListMarkup=function(){var b=this.palettes.map(function(b){b={id:b.id,name:this.isPaletteModified(b)?b.name+" *":b.name};return pskl.utils.Template.replace('<li data-palette-id="{{id}}">{{name}}</li>',
|
||||
b)}.bind(this)).join("");this.palettesList.innerHTML=b};a.PaletteManagerController.prototype.createPaletteHeadMarkup=function(){var b=this.getSelectedPalette(),b={name:b.name,"save:disabled":!this.isPaletteModified(b),"revert:disabled":!this.isPaletteModified(b),"delete:disabled":2>this.palettes.length},b=pskl.utils.Template.replace(this.paletteHeadTemplate,b);this.paletteHead.innerHTML=b};a.PaletteManagerController.prototype.isPaletteModified=function(b){var a=!1,e=this.getPaletteById(b.id,this.originalPalettes);
|
||||
e?(a=e.name!==b.name,b=b.colors.join("")!==e.colors.join(""),a=a||b):a=!0;return a};a.PaletteManagerController.prototype.createPaletteBodyMarkup=function(){var b=this.getSelectedPalette(),b=this.getColorCardsMarkup(b.colors),b=b+pskl.utils.Template.replace(this.newColorTemplate,{classname:"palette-manager-new-color"});this.paletteBody.innerHTML=b};a.PaletteManagerController.prototype.initPaletteDetailsEvents=function(){this.paletteBody.querySelector(".palette-manager-new-color").addEventListener("click",
|
||||
this.onNewCardClick.bind(this));2>this.palettes.length&&this.paletteHead.querySelector('.palette-manager-palette-button[data-action="delete"]').setAttribute("disabled","disabled")};a.PaletteManagerController.prototype.onNewCardClick=function(){var b=this.getSelectedPalette();this.addColorInSelectedPalette(b&&0<b.colors.length?b.colors[b.colors.length-1]:"#FFFFFF")};a.PaletteManagerController.prototype.delegatedPaletteBodyClick=function(b){b=b.target;b.classList.contains("palette-manager-delete-card")&&
|
||||
(b=parseInt(b.parentNode.dataset.colorId,10),this.removeColorInSelectedPalette(b))};a.PaletteManagerController.prototype.delegatedPaletteHeadClick=function(b){b=b.target;b.classList.contains("edit-icon")?this.renameSelectedPalette():b.classList.contains("palette-manager-palette-button")&&(b=b.dataset.action,"save"===b?(this.savePalette(this.getSelectedPalette().id),this.redraw()):"revert"===b?this.revertChanges():"delete"===b&&this.deleteSelectedPalette())};a.PaletteManagerController.prototype.getSpectrumSelector_=
|
||||
function(){return":not(.palette-manager-new-color)>.palette-manager-color-square"};a.PaletteManagerController.prototype.initPaletteCardsSpectrum=function(){var b=this,a=$(this.getSpectrumSelector_());a.spectrum({clickoutFiresChange:!0,showInput:!0,showButtons:!1,change:function(a){var c=parseInt(this.parentNode.dataset.colorId,10);b.updateColorInSelectedPalette(c,a)},beforeShow:function(){var e=parseInt(this.parentNode.dataset.colorId,10),e=b.getSelectedPalette().colors[e];a.spectrum("set",e)}});
|
||||
this.spectrumContainers.push(a)};a.PaletteManagerController.prototype.destroySpectrumPickers=function(){this.spectrumContainers.forEach(function(b){b.spectrum("destroy")});this.spectrumContainers=[]};a.PaletteManagerController.prototype.updateColorInSelectedPalette=function(b,a){var e=this.getSelectedPalette(),f="#"+a.toHex().toUpperCase();e.colors.splice(b,1,f);this.redraw()};a.PaletteManagerController.prototype.addColorInSelectedPalette=function(b){this.getSelectedPalette().colors.push(b);this.redraw()};
|
||||
a.PaletteManagerController.prototype.removeColorInSelectedPalette=function(b){this.getSelectedPalette().colors.splice(b,1);this.redraw()};a.PaletteManagerController.prototype.renameSelectedPalette=function(){var b=this.getSelectedPalette(),a=window.prompt('Please enter a new name for palette "'+b.name+'"',b.name);a&&(b.name=a,this.redraw())};a.PaletteManagerController.prototype.getSelectedPalette=function(){return this.getPaletteById(this.selectedPaletteId,this.palettes)};a.PaletteManagerController.prototype.getColorCardsMarkup=
|
||||
function(a){return a.map(function(a,d){var f={colorId:d,hex:a,rgb:b(a).toRgbString(),hsl:b(a).toHslString()};return pskl.utils.Template.replace(this.colorCardTemplate,f)}.bind(this)).join("")};a.PaletteManagerController.prototype.getPaletteById=function(b,a){var e=null;a.forEach(function(a){a.id===b&&(e=a)});return e};a.PaletteManagerController.prototype.removePaletteById=function(b,a){var e=this.getPaletteById(b,a);e&&(e=a.indexOf(e),a.splice(e,1))};a.PaletteManagerController.prototype.deselectCurrentPalette=
|
||||
function(){var b=this.palettesList.querySelector(".selected");b&&(this.selectedPaletteId=null,b.classList.remove("selected"))};a.PaletteManagerController.prototype.revertChanges=function(){var b=this.getSelectedPalette(),a=this.getPaletteById(b.id,this.originalPalettes);b.name=a.name;b.colors=a.colors.slice(0);this.redraw()};a.PaletteManagerController.prototype.deleteSelectedPalette=function(){var b=this.getSelectedPalette();1<this.palettes.length&&window.confirm('Are you sure you want to delete "'+
|
||||
b.name+'" ?')&&(this.removePaletteById(b.id,this.palettes),this.removePaletteById(b.id,this.originalPalettes),this.persistToLocalStorage(),this.createPaletteListMarkup(),this.selectPalette(this.palettes[0].id))};a.PaletteManagerController.prototype.onPaletteListClick=function(b){b=b.target;b.dataset.paletteId&&this.selectPalette(b.dataset.paletteId)};a.PaletteManagerController.prototype.saveAll=function(){this.palettes.forEach(function(b){this.savePalette(b.id)}.bind(this));this.redraw()};a.PaletteManagerController.prototype.savePalette=
|
||||
function(b){var a=this.getPaletteById(b,this.palettes);(b=this.getPaletteById(b,this.originalPalettes))?(b.name=a.name,b.colors=a.colors):this.originalPalettes.push(a);this.persistToLocalStorage();$.publish(Events.SHOW_NOTIFICATION,[{content:"Palette "+a.name+" successfully saved !"}]);window.setTimeout($.publish.bind($,Events.HIDE_NOTIFICATION),2E3)};a.PaletteManagerController.prototype.persistToLocalStorage=function(){window.localStorage.setItem("piskel.palettes",JSON.stringify(this.originalPalettes));
|
||||
this.originalPalettes=this.retrieveUserPalettes();$.publish(Events.PALETTE_LIST_UPDATED)};a.PaletteManagerController.prototype.retrieveUserPalettes=function(){var b=window.localStorage.getItem("piskel.palettes");return JSON.parse(b)||[]}})();(function(){var a=$.namespace("pskl.controller.piskel");a.PiskelController=function(b){if(b)this.setPiskel(b);else throw"A piskel instance is mandatory for instanciating PiskelController";};a.PiskelController.prototype.setPiskel=function(b){this.piskel=b;this.currentFrameIndex=this.currentLayerIndex=0;this.layerIdCounter=1};a.PiskelController.prototype.init=function(){};a.PiskelController.prototype.getHeight=function(){return this.piskel.getHeight()};a.PiskelController.prototype.getWidth=function(){return this.piskel.getWidth()};
|
||||
a.PiskelController.prototype.getFPS=function(){return pskl.app.animationController.getFPS()};a.PiskelController.prototype.getLayers=function(){return this.piskel.getLayers()};a.PiskelController.prototype.getCurrentLayer=function(){return this.getLayerAt(this.currentLayerIndex)};a.PiskelController.prototype.getLayerAt=function(b){return this.piskel.getLayerAt(b)};a.PiskelController.prototype.getCurrentFrame=function(){return this.getCurrentLayer().getFrameAt(this.currentFrameIndex)};a.PiskelController.prototype.getCurrentLayerIndex=
|
||||
function(){return this.currentLayerIndex};a.PiskelController.prototype.getCurrentFrameIndex=function(){return this.currentFrameIndex};a.PiskelController.prototype.getPiskel=function(){return this.piskel};a.PiskelController.prototype.getFrameAt=function(b){var a=this.getLayers().map(function(a){return a.getFrameAt(b)});return pskl.utils.FrameUtils.merge(a)};a.PiskelController.prototype.hasFrameAt=function(b){return!!this.getCurrentLayer().getFrameAt(b)};a.PiskelController.prototype.addFrame=function(){this.addFrameAt(this.getFrameCount())};
|
||||
a.PiskelController.prototype.addFrameAtCurrentIndex=function(){this.addFrameAt(this.currentFrameIndex+1)};a.PiskelController.prototype.addFrameAt=function(b){this.getLayers().forEach(function(a){a.addFrameAt(this.createEmptyFrame_(),b)}.bind(this))};a.PiskelController.prototype.createEmptyFrame_=function(){var b=this.piskel.getWidth(),a=this.piskel.getHeight();return new pskl.model.Frame(b,a)};a.PiskelController.prototype.removeFrameAt=function(b){this.getLayers().forEach(function(a){a.removeFrameAt(b)});
|
||||
this.currentFrameIndex>=b&&0<this.currentFrameIndex&&this.setCurrentFrameIndex(this.currentFrameIndex-1)};a.PiskelController.prototype.duplicateCurrentFrame=function(){this.duplicateFrameAt(this.currentFrameIndex)};a.PiskelController.prototype.duplicateFrameAt=function(b){this.getLayers().forEach(function(a){a.duplicateFrameAt(b)})};a.PiskelController.prototype.moveFrame=function(b,a){this.getLayers().forEach(function(c){c.moveFrame(b,a)})};a.PiskelController.prototype.getFrameCount=function(){return this.piskel.getLayerAt(0).length()};
|
||||
a.PiskelController.prototype.setCurrentFrameIndex=function(b){this.currentFrameIndex=b};a.PiskelController.prototype.selectNextFrame=function(){var b=this.currentFrameIndex+1;b<this.getFrameCount()&&this.setCurrentFrameIndex(b)};a.PiskelController.prototype.selectPreviousFrame=function(){var b=this.currentFrameIndex-1;0<=b&&this.setCurrentFrameIndex(b)};a.PiskelController.prototype.setCurrentLayerIndex=function(b){this.currentLayerIndex=b};a.PiskelController.prototype.selectLayer=function(b){b=this.getLayers().indexOf(b);
|
||||
-1!=b&&this.setCurrentLayerIndex(b)};a.PiskelController.prototype.renameLayerAt=function(b,a){var c=this.getLayerByIndex(b);c&&c.setName(a)};a.PiskelController.prototype.getLayerByIndex=function(b){var a=this.getLayers();return a[b]?a[b]:null};a.PiskelController.prototype.generateLayerName_=function(){for(var b="Layer "+this.layerIdCounter;this.hasLayerForName_(b);)this.layerIdCounter++,b="Layer "+this.layerIdCounter;return b};a.PiskelController.prototype.createLayer=function(b){b||(b=this.generateLayerName_());
|
||||
if(this.hasLayerForName_(b))throw"Layer name should be unique";b=new pskl.model.Layer(b);for(var a=0;a<this.getFrameCount();a++)b.addFrame(this.createEmptyFrame_());this.piskel.addLayer(b);this.setCurrentLayerIndex(this.piskel.getLayers().length-1)};a.PiskelController.prototype.hasLayerForName_=function(b){return 0<this.piskel.getLayersByName(b).length};a.PiskelController.prototype.moveLayerUp=function(){var b=this.getCurrentLayer();this.piskel.moveLayerUp(b);this.selectLayer(b)};a.PiskelController.prototype.moveLayerDown=
|
||||
function(){var b=this.getCurrentLayer();this.piskel.moveLayerDown(b);this.selectLayer(b)};a.PiskelController.prototype.removeCurrentLayer=function(){if(1<this.getLayers().length){var b=this.getCurrentLayer();this.piskel.removeLayer(b);this.setCurrentLayerIndex(0)}};a.PiskelController.prototype.serialize=function(b){return pskl.utils.Serializer.serializePiskel(this.piskel,b)}})();(function(){var a=$.namespace("pskl.controller.piskel");a.PublicPiskelController=function(b){this.piskelController=b;pskl.utils.wrap(this,this.piskelController)};a.PublicPiskelController.prototype.init=function(){pskl.app.shortcutService.addShortcut("up",this.selectPreviousFrame.bind(this));pskl.app.shortcutService.addShortcut("down",this.selectNextFrame.bind(this));pskl.app.shortcutService.addShortcut("n",this.addFrameAtCurrentIndex.bind(this));pskl.app.shortcutService.addShortcut("shift+n",this.duplicateCurrentFrame.bind(this))};
|
||||
a.PublicPiskelController.prototype.setPiskel=function(b){this.piskelController.setPiskel(b);$.publish(Events.FRAME_SIZE_CHANGED);$.publish(Events.PISKEL_RESET);$.publish(Events.PISKEL_SAVE_STATE,{type:pskl.service.HistoryService.SNAPSHOT})};a.PublicPiskelController.prototype.addFrame=function(){this.addFrameAt(this.getFrameCount())};a.PublicPiskelController.prototype.addFrameAtCurrentIndex=function(){this.addFrameAt(this.getCurrentFrameIndex())};a.PublicPiskelController.prototype.addFrameAt=function(b){this.raiseSaveStateEvent_(this.piskelController.addFrameAt,
|
||||
[b]);this.piskelController.addFrameAt(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.removeFrameAt=function(b){this.raiseSaveStateEvent_(this.piskelController.removeFrameAt,[b]);this.piskelController.removeFrameAt(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.duplicateCurrentFrame=function(){this.duplicateFrameAt(this.getCurrentFrameIndex())};a.PublicPiskelController.prototype.raiseSaveStateEvent_=function(b,a){$.publish(Events.PISKEL_SAVE_STATE,{type:pskl.service.HistoryService.REPLAY,
|
||||
scope:this,replay:{fn:b,args:a}})};a.PublicPiskelController.prototype.replay=function(b,a){a.fn.apply(this.piskelController,a.args)};a.PublicPiskelController.prototype.duplicateFrameAt=function(b){this.raiseSaveStateEvent_(this.piskelController.duplicateFrameAt,[b]);this.piskelController.duplicateFrameAt(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.moveFrame=function(b,a){this.raiseSaveStateEvent_(this.piskelController.moveFrame,[b,a]);this.piskelController.moveFrame(b,a);
|
||||
$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.setCurrentFrameIndex=function(b){this.piskelController.setCurrentFrameIndex(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.selectNextFrame=function(){this.piskelController.selectNextFrame();$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.selectPreviousFrame=function(){this.piskelController.selectPreviousFrame();$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.setCurrentLayerIndex=
|
||||
function(b){this.piskelController.setCurrentLayerIndex(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.selectLayer=function(b){this.piskelController.selectLayer(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.renameLayerAt=function(b,a){this.raiseSaveStateEvent_(this.piskelController.renameLayerAt,[b,a]);this.piskelController.renameLayerAt(b,a)};a.PublicPiskelController.prototype.createLayer=function(b){this.raiseSaveStateEvent_(this.piskelController.createLayer,
|
||||
[b]);this.piskelController.createLayer(b);$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.moveLayerUp=function(){this.raiseSaveStateEvent_(this.piskelController.moveLayerUp,[]);this.piskelController.moveLayerUp();$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.moveLayerDown=function(){this.raiseSaveStateEvent_(this.piskelController.moveLayerDown,[]);this.piskelController.moveLayerDown();$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.removeCurrentLayer=
|
||||
function(){this.raiseSaveStateEvent_(this.piskelController.removeCurrentLayer,[]);this.piskelController.removeCurrentLayer();$.publish(Events.PISKEL_RESET)};a.PublicPiskelController.prototype.getCurrentLayerIndex=function(){return this.piskelController.currentLayerIndex};a.PublicPiskelController.prototype.getCurrentFrameIndex=function(){return this.piskelController.currentFrameIndex};a.PublicPiskelController.prototype.getPiskel=function(){return this.piskelController.piskel}})();(function(){var a=$.namespace("pskl.controller.settings");a.ApplicationSettingsController=function(){};a.ApplicationSettingsController.prototype.init=function(){var b=pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);$("#background-picker-wrapper").find(".background-picker[data-background-class="+b+"]").addClass("selected");b=pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);$("#grid-width").val(b);$("#grid-width").change(this.onGridWidthChange.bind(this));b=pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
|
||||
$("#tiled-preview").prop("checked",b);$("#tiled-preview").change(this.onTiledPreviewChange.bind(this));$("#background-picker-wrapper").click(this.onBackgroundClick.bind(this))};a.ApplicationSettingsController.prototype.onGridWidthChange=function(b){b=$("#grid-width").val();pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH,parseInt(b,10))};a.ApplicationSettingsController.prototype.onTiledPreviewChange=function(b){b=$("#tiled-preview").prop("checked");pskl.UserSettings.set(pskl.UserSettings.TILED_PREVIEW,
|
||||
b)};a.ApplicationSettingsController.prototype.onBackgroundClick=function(b){b=$(b.target).closest(".background-picker");if(b.length){var a=b.data("background-class");pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND,a);$(".background-picker").removeClass("selected");b.addClass("selected")}}})();(function(){var a=$.namespace("pskl.controller.settings");a.GifExportController=function(b){this.piskelController=b};a.GifExportController.RESOLUTIONS=[{zoom:1},{zoom:5},{zoom:10,"default":!0},{zoom:20}];a.GifExportController.prototype.init=function(){this.radioTemplate_=pskl.utils.Template.get("gif-export-radio-template");this.uploadStatusContainerEl=document.querySelector(".gif-upload-status");this.previewContainerEl=document.querySelector(".gif-export-preview");this.radioGroupEl=document.querySelector(".gif-export-radio-group");
|
||||
this.uploadForm=$("[name=gif-export-upload-form]");this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));this.exportProgressStatusEl=document.querySelector(".gif-export-progress-status");this.exportProgressBarEl=document.querySelector(".gif-export-progress-bar");this.createRadioElements_()};a.GifExportController.prototype.onUploadFormSubmit_=function(b){b.originalEvent.preventDefault();b=this.getSelectedZoom_();var a=this.piskelController.getFPS();this.renderAsImageDataAnimatedGIF(b,a,this.onGifRenderingCompleted_.bind(this))};
|
||||
a.GifExportController.prototype.onGifRenderingCompleted_=function(b){this.updatePreview_(b);this.previewContainerEl.classList.add("preview-upload-ongoing");pskl.app.imageUploadService.upload(b,this.onImageUploadCompleted_.bind(this))};a.GifExportController.prototype.onImageUploadCompleted_=function(b){this.updatePreview_(b);this.updateStatus_(b);this.previewContainerEl.classList.remove("preview-upload-ongoing")};a.GifExportController.prototype.updatePreview_=function(b){this.previewContainerEl.innerHTML=
|
||||
"<div><img style='max-width:240px;' src='"+b+"'/></div>"};a.GifExportController.prototype.getSelectedZoom_=function(){var b=this.uploadForm.get(0).querySelectorAll("[name=gif-zoom-level]"),b=Array.prototype.slice.call(b,0).filter(function(b){return!!b.checked});if(1==b.length)return b[0].value;throw"Unexpected error when retrieving selected zoom";};a.GifExportController.prototype.createRadioElements_=function(){for(var b=a.GifExportController.RESOLUTIONS,d=0;d<b.length;d++){var c=this.createRadioForResolution_(b[d]);
|
||||
this.radioGroupEl.appendChild(c)}};a.GifExportController.prototype.createRadioForResolution_=function(b){var a=b.zoom,c=a*this.piskelController.getWidth()+"x"+a*this.piskelController.getHeight(),a=pskl.utils.Template.replace(this.radioTemplate_,{value:a,label:c}),a=pskl.utils.Template.createFromHTML(a);b["default"]&&a.getElementsByTagName("input")[0].setAttribute("checked","checked");return a};a.GifExportController.prototype.blobToBase64_=function(b,a){var c=new FileReader;c.onload=function(){a(c.result)};
|
||||
c.readAsDataURL(b)};a.GifExportController.prototype.renderAsImageDataAnimatedGIF=function(b,a,c){for(var e=256>pskl.app.currentColorsService.getCurrentColors().length,e=new window.GIF({workers:2,quality:1,width:this.piskelController.getWidth()*b,height:this.piskelController.getHeight()*b,preserveColors:e}),f=0;f<this.piskelController.getFrameCount();f++){var g=this.piskelController.getFrameAt(f),g=(new pskl.rendering.CanvasRenderer(g,b)).render();e.addFrame(g.getContext("2d"),{delay:1E3/a})}e.on("progress",
|
||||
function(b){this.updateProgressStatus_((100*b).toFixed(2))}.bind(this));e.on("finished",function(b){this.hideProgressStatus_();this.blobToBase64_(b,c)}.bind(this));e.render()};a.GifExportController.prototype.updateProgressStatus_=function(b){this.exportProgressStatusEl.innerHTML=b+"%";this.exportProgressBarEl.style.width=b+"%"};a.GifExportController.prototype.hideProgressStatus_=function(){this.exportProgressStatusEl.innerHTML="";this.exportProgressBarEl.style.width="0"};a.GifExportController.prototype.updateStatus_=
|
||||
function(b,a){if(b){var c=pskl.utils.Template.replace("<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>",{link:b,shortLink:this.shorten_(b,60,"...")});this.uploadStatusContainerEl.innerHTML="Your image is now available at : "+c}};a.GifExportController.prototype.shorten_=function(b,a,c){b.length>a&&(b=b.substring(0,a),b+=c);return b}})();(function(){var a=$.namespace("pskl.controller.settings");a.ImportController=function(b){this.piskelController=b;this.importedImage_=null};a.ImportController.prototype.init=function(){this.importForm=$("[name=import-form]");this.hiddenFileInput=$("[name=file-upload-input]");this.fileInputButton=$(".file-input-button");this.fileInputStatus=$(".file-input-status");this.fileInputStatus.html("No file selected ...");this.importPreview=$(".import-section-preview");this.resizeWidth=$("[name=resize-width]");
|
||||
this.resizeHeight=$("[name=resize-height]");this.smoothResize=$("[name=smooth-resize-checkbox]");this.submitButton=$("[name=import-submit]");this.importForm.submit(this.onImportFormSubmit_.bind(this));this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));this.fileInputButton.click(this.onFileInputClick_.bind(this));this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this,"width"));this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this,"height"))};a.ImportController.prototype.reset_=
|
||||
function(){this.importForm.get(0).reset();this.fileInputStatus.html("No file selected ...");$.publish(Events.CLOSE_SETTINGS_DRAWER)};a.ImportController.prototype.onResizeInputKeyUp_=function(b,a){this.importedImage_&&this.synchronizeResizeFields_(a.target.value,b)};a.ImportController.prototype.synchronizeResizeFields_=function(b,a){b=parseInt(b,10);isNaN(b)&&(b=0);var c=this.importedImage_.height,e=this.importedImage_.width;"width"===a?this.resizeHeight.val(Math.round(b*c/e)):this.resizeWidth.val(Math.round(b*
|
||||
e/c))};a.ImportController.prototype.onImportFormSubmit_=function(b){b.originalEvent.preventDefault();this.importImageToPiskel_()};a.ImportController.prototype.onFileUploadChange_=function(b){this.importFromFile_()};a.ImportController.prototype.onFileInputClick_=function(b){this.hiddenFileInput.click()};a.ImportController.prototype.importFromFile_=function(){var b=this.hiddenFileInput.get(0).files;if(1==b.length)if(b=b[0],this.isImage_(b))this.readImageFile_(b),this.enableDisabledSections_();else throw this.reset_(),
|
||||
"File is not an image : "+b.type;};a.ImportController.prototype.enableDisabledSections_=function(){this.resizeWidth.removeAttr("disabled");this.resizeHeight.removeAttr("disabled");this.smoothResize.removeAttr("disabled");this.submitButton.removeAttr("disabled");this.fileInputButton.removeClass("button-primary");this.fileInputButton.blur();$(".import-section-disabled").removeClass("import-section-disabled")};a.ImportController.prototype.readImageFile_=function(b){pskl.utils.FileUtils.readFile(b,this.processImageSource_.bind(this))};
|
||||
a.ImportController.prototype.processImageSource_=function(b){this.importedImage_=new Image;this.importedImage_.onload=this.onImageLoaded_.bind(this);this.importedImage_.src=b};a.ImportController.prototype.onImageLoaded_=function(b){b=this.importedImage_.width;var a=this.importedImage_.height;this.importedImage_.onload=function(){};var c=this.hiddenFileInput.val(),c=this.extractFileNameFromPath_(c);this.fileInputStatus.html(c);this.resizeWidth.val(b);this.resizeHeight.val(a);this.importPreview.width("auto");
|
||||
this.importPreview.html("");this.importPreview.append(this.createImagePreview_())};a.ImportController.prototype.createImagePreview_=function(){var b=document.createElement("IMG");b.src=this.importedImage_.src;b.setAttribute("height",60);return b};a.ImportController.prototype.extractFileNameFromPath_=function(b){var a=[],a=-1!==b.indexOf("/")?b.split("/"):-1!==b.indexOf("\\")?b.split("\\"):[b];return a[a.length-1]};a.ImportController.prototype.importImageToPiskel_=function(){var b=this.importedImage_;
|
||||
if(b&&window.confirm("You are about to create a new Piskel, unsaved changes will be lost.")){var a=new window.SuperGif({gif:b});a.load({success:function(){var b=a.getFrames().map(function(b){return pskl.CanvasUtils.createFromImageData(b.data)});this.createPiskelFromImages_(b)}.bind(this),error:function(){this.createPiskelFromImages_([b])}.bind(this)})}};a.ImportController.prototype.createFramesFromImages_=function(b){var a=this.resizeWidth.val(),c=this.resizeHeight.val(),e=!!this.smoothResize.prop("checked");
|
||||
return b.map(function(b){b=pskl.utils.ImageResizer.resize(b,a,c,e);return pskl.utils.FrameUtils.createFromImage(b)})};a.ImportController.prototype.createPiskelFromImages_=function(b){b=this.createFramesFromImages_(b);b=pskl.model.Layer.fromFrames("Layer 1",b);var a=new pskl.model.piskel.Descriptor("Imported piskel","");b=pskl.model.Piskel.fromLayers([b],a);pskl.app.piskelController.setPiskel(b);pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);this.reset_()};a.ImportController.prototype.isImage_=
|
||||
function(b){return 0===b.type.indexOf("image")}})();(function(){var a=$.namespace("pskl.controller.settings");a.LocalStorageController=function(){};a.LocalStorageController.prototype.init=function(){this.localStorageItemTemplate_=pskl.utils.Template.get("local-storage-item-template");this.service_=pskl.app.localStorageService;this.piskelsList=$(".local-piskels-list");this.fillLocalPiskelsList_();this.piskelsList.click(this.onPiskelsListClick_.bind(this))};a.LocalStorageController.prototype.onPiskelsListClick_=function(b){var a=b.target.getAttribute("data-action");
|
||||
b=b.target.getAttribute("data-name");"load"===a?window.confirm("This will erase your current piskel. Continue ?")&&(this.service_.load(b),$.publish(Events.CLOSE_SETTINGS_DRAWER)):"delete"===a&&window.confirm("This will permanently DELETE this piskel from your computer. Continue ?")&&(this.service_.remove(b),$.publish(Events.CLOSE_SETTINGS_DRAWER))};a.LocalStorageController.prototype.fillLocalPiskelsList_=function(){var b="",a=this.service_.getKeys(),c=function(b){return 10>b?"0"+b:""+b};a.sort(function(b,
|
||||
a){return b.date<a.date?1:b.date>a.date?-1:0});a.forEach(function(a){var d=new Date(a.date),d=pskl.utils.Template.replace("{{Y}}/{{M}}/{{D}} {{H}}:{{m}}",{Y:d.getFullYear(),M:c(d.getMonth()+1),D:c(d.getDate()),H:c(d.getHours()),m:c(d.getMinutes())});b+=pskl.utils.Template.replace(this.localStorageItemTemplate_,{name:a.name,date:d})}.bind(this));this.piskelsList.get(0).tBodies[0].innerHTML=b}})();(function(){var a=$.namespace("pskl.controller.settings");a.PngExportController=function(b){this.piskelController=b};a.PngExportController.prototype.init=function(){this.previewContainerEl=document.querySelectorAll(".png-export-preview")[0];this.uploadStatusContainerEl=document.querySelectorAll(".png-upload-status")[0];document.querySelector(".png-upload-button").addEventListener("click",this.onPngUploadButtonClick_.bind(this));document.querySelector(".png-download-button").addEventListener("click",
|
||||
this.onPngDownloadButtonClick_.bind(this));document.querySelector(".zip-generate-button").addEventListener("click",this.onZipButtonClick_.bind(this));this.updatePreview_(this.getFramesheetAsBase64Png())};a.PngExportController.prototype.onPngDownloadButtonClick_=function(b){var a=this.getPiskelName_()+".png";(new pskl.rendering.PiskelRenderer(this.piskelController)).renderAsCanvas().toBlob(function(b){pskl.utils.FileUtils.downloadAsFile(a,b)})};a.PngExportController.prototype.onPngUploadButtonClick_=
|
||||
function(b){this.previewContainerEl.classList.add("preview-upload-ongoing");pskl.app.imageUploadService.upload(this.getFramesheetAsBase64Png(),this.onImageUploadCompleted_.bind(this))};a.PngExportController.prototype.onZipButtonClick_=function(){for(var b=new window.JSZip,a=0;a<this.piskelController.getFrameCount();a++){var c=this.piskelController.getFrameAt(a),c=this.getFrameAsCanvas_(c);b.file("sprite_"+(a+1)+".png",pskl.CanvasUtils.getBase64FromCanvas(c)+"\n",{base64:!0})}a=this.getPiskelName_()+
|
||||
".zip";b=b.generate({type:"blob"});pskl.utils.FileUtils.downloadAsFile(a,b)};a.PngExportController.prototype.getFrameAsCanvas_=function(b){b=new pskl.rendering.CanvasRenderer(b,1);b.drawTransparentAs(Constants.TRANSPARENT_COLOR);return b.render()};a.PngExportController.prototype.getPiskelName_=function(){return this.piskelController.getPiskel().getDescriptor().name};a.PngExportController.prototype.getFramesheetAsBase64Png=function(){return(new pskl.rendering.PiskelRenderer(this.piskelController)).renderAsCanvas().toDataURL("image/png")};
|
||||
a.PngExportController.prototype.onImageUploadCompleted_=function(b){this.updatePreview_(b);this.updateStatus_(b);this.previewContainerEl.classList.remove("preview-upload-ongoing")};a.PngExportController.prototype.updateStatus_=function(b,a){if(b){var c=pskl.utils.Template.replace("<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>",{link:b,shortLink:this.shorten_(b,60,"...")});this.uploadStatusContainerEl.innerHTML="Your image is now available at : "+c}};a.PngExportController.prototype.updatePreview_=
|
||||
function(b){this.previewContainerEl.innerHTML="<img class='light-picker-background' style='max-width:240px;' src='"+b+"'/>"};a.PngExportController.prototype.shorten_=function(b,a,c){b.length>a&&(b=b.substring(0,a),b+=c);return b}})();(function(){var a=$.namespace("pskl.controller.settings");a.ResizeController=function(b){this.piskelController=b};a.ResizeController.prototype.init=function(){this.resizeWidth=$("[name=resize-width]");this.resizeHeight=$("[name=resize-height]");this.resizeWidth.val(this.piskelController.getWidth());this.resizeHeight.val(this.piskelController.getHeight());this.cancelButton=$(".resize-cancel-button");this.cancelButton.click(this.onCancelButtonClicked_.bind(this));this.resizeForm=$("[name=resize-form]");
|
||||
this.resizeForm.submit(this.onResizeFormSubmit_.bind(this));this.resizeContentCheckbox=$(".resize-content-checkbox")};a.ResizeController.prototype.onResizeFormSubmit_=function(b){b.originalEvent.preventDefault();parseInt(this.resizeWidth.val(),10);parseInt(this.resizeHeight.val(),10);this.isResizeContentEnabled_();b=this.piskelController.getLayers().map(this.resizeLayer_.bind(this));b=pskl.model.Piskel.fromLayers(b,this.piskelController.getPiskel().getDescriptor());pskl.app.piskelController.setPiskel(b);
|
||||
$.publish(Events.CLOSE_SETTINGS_DRAWER)};a.ResizeController.prototype.resizeLayer_=function(b){var a=b.getFrames().map(this.resizeFrame_.bind(this));return pskl.model.Layer.fromFrames(b.getName(),a)};a.ResizeController.prototype.resizeFrame_=function(b){var a=parseInt(this.resizeWidth.val(),10),c=parseInt(this.resizeHeight.val(),10),e;this.isResizeContentEnabled_()?e=pskl.utils.FrameUtils.resize(b,a,c,!1):(e=new pskl.model.Frame(a,c),b.forEachPixel(function(b,a,d){a<e.getWidth()&&d<e.getHeight()&&
|
||||
e.setPixel(a,d,b)}));return e};a.ResizeController.prototype.isResizeContentEnabled_=function(){return!!this.resizeContentCheckbox.prop("checked")};a.ResizeController.prototype.onCancelButtonClicked_=function(b){$.publish(Events.CLOSE_SETTINGS_DRAWER)}})();(function(){var a=$.namespace("pskl.controller.settings");a.SaveController=function(b){this.piskelController=b};a.SaveController.prototype.init=function(){this.saveForm=$("form[name=save-form]");this.nameInput=$("#save-name");this.descriptionInput=$("#save-description");this.isPublicCheckbox=$("input[name=save-public-checkbox]");this.saveCloudButton=$("#save-cloud-button");this.saveLocalButton=$("#save-local-button");this.piskelName=$(".piskel-name").get(0);this.status=$("#save-status");var b=this.piskelController.getPiskel().getDescriptor();
|
||||
this.nameInput.val(b.name);this.descriptionInput.val(b.description);this.isPublicCheckbox.prop("checked",b.isPublic);pskl.app.isLoggedIn()?this.saveForm.submit(this.onSaveFormSubmit_.bind(this)):(this.saveCloudButton.attr("disabled","disabled"),this.status.html("You are not logged in. Only Local Save is available."));this.saveLocalButton.click(this.onSaveLocalClick_.bind(this))};a.SaveController.prototype.onSaveFormSubmit_=function(b){b.preventDefault();b.stopPropagation();b=this.getName();var a=
|
||||
this.getDescription(),c=!!this.isPublicCheckbox.prop("checked");b=new pskl.model.piskel.Descriptor(b,a,c);this.piskelController.getPiskel().setDescriptor(b);this.beforeSaving_();pskl.app.store({success:this.onSaveSuccess_.bind(this),error:this.onSaveError_.bind(this),after:this.afterSaving_.bind(this)})};a.SaveController.prototype.onSaveLocalClick_=function(b){b=pskl.app.localStorageService;var a=!0,c=this.getName(),e=this.getDescription();b.getPiskel(c)&&(a=window.confirm("There is already a piskel saved as "+
|
||||
c+". Override ?"));a&&(this.beforeSaving_(),b.save(c,e,pskl.app.piskelController.serialize()),window.setTimeout(function(){this.onSaveSuccess_();this.afterSaving_()}.bind(this),1E3))};a.SaveController.prototype.getName=function(){return this.nameInput.val()};a.SaveController.prototype.getDescription=function(){return this.descriptionInput.val()};a.SaveController.prototype.beforeSaving_=function(){this.saveCloudButton.attr("disabled",!0);this.status.html("Saving ...");this.piskelName&&this.piskelName.classList.add("piskel-name-saving")};
|
||||
a.SaveController.prototype.onSaveSuccess_=function(){$.publish(Events.CLOSE_SETTINGS_DRAWER);$.publish(Events.SHOW_NOTIFICATION,[{content:"Successfully saved !"}]);$.publish(Events.PISKEL_SAVED)};a.SaveController.prototype.onSaveError_=function(b){$.publish(Events.SHOW_NOTIFICATION,[{content:"Saving failed ("+b+")"}])};a.SaveController.prototype.afterSaving_=function(){this.saveCloudButton.attr("disabled",!1);this.status.html("");this.piskelName&&this.piskelName.classList.remove("piskel-name-saving");
|
||||
window.setTimeout($.publish.bind($,Events.HIDE_NOTIFICATION),2E3)}})();(function(){var a=$.namespace("pskl.controller.settings"),b={user:{template:"templates/settings/application.html",controller:a.ApplicationSettingsController},resize:{template:"templates/settings/resize.html",controller:a.ResizeController},gif:{template:"templates/settings/export-gif.html",controller:a.GifExportController},png:{template:"templates/settings/export-png.html",controller:a.PngExportController},"import":{template:"templates/settings/import.html",controller:a.ImportController},localstorage:{template:"templates/settings/localstorage.html",
|
||||
controller:a.LocalStorageController},save:{template:"templates/settings/save.html",controller:a.SaveController}};a.SettingsController=function(b){this.piskelController=b;this.drawerContainer=document.getElementById("drawer-container");this.settingsContainer=$("[data-pskl-controller=settings]");this.isExpanded=!1;this.currentSetting=null};a.SettingsController.prototype.init=function(){$("[data-setting]").click(this.onSettingIconClick.bind(this));$("body").click(this.onBodyClick.bind(this));$.subscribe(Events.CLOSE_SETTINGS_DRAWER,
|
||||
this.closeDrawer.bind(this))};a.SettingsController.prototype.onSettingIconClick=function(b){var a=b.originalEvent.currentTarget.getAttribute("data-setting");this.currentSetting!=a?this.loadSetting(a):this.closeDrawer();b.originalEvent.stopPropagation();b.originalEvent.preventDefault()};a.SettingsController.prototype.onBodyClick=function(b){var a=b.target;b=pskl.utils.Dom.isParent(a,this.drawerContainer);a=a.getAttribute("data-setting");this.isExpanded&&!b&&!a&&this.closeDrawer()};a.SettingsController.prototype.loadSetting=
|
||||
function(a){this.drawerContainer.innerHTML=pskl.utils.Template.get(b[a].template);(new b[a].controller(this.piskelController)).init();this.settingsContainer.addClass("expanded");$(".has-expanded-drawer").removeClass("has-expanded-drawer");$("[data-setting="+a+"]").addClass("has-expanded-drawer");this.isExpanded=!0;this.currentSetting=a};a.SettingsController.prototype.closeDrawer=function(){this.settingsContainer.removeClass("expanded");$(".has-expanded-drawer").removeClass("has-expanded-drawer");
|
||||
this.isExpanded=!1;this.currentSetting=null;document.activeElement.blur()}})();(function(){var a=$.namespace("pskl.drawingtools");a.BaseTool=function(){this.toolId="tool-base"};a.BaseTool.prototype.applyToolAt=function(b,a,c,e,f,g){};a.BaseTool.prototype.moveToolAt=function(b,a,c,e,f,g){};a.BaseTool.prototype.replay=Constants.ABSTRACT_FUNCTION;a.BaseTool.prototype.moveUnactiveToolAt=function(b,a,c,e,f,g){f.containsPixel(b,a)?(isNaN(this.highlightedPixelCol)||isNaN(this.highlightedPixelRow)||this.highlightedPixelRow==a&&this.highlightedPixelCol==b||f.clear(),f.setPixel(b,a,Constants.TOOL_TARGET_HIGHLIGHT_COLOR),
|
||||
this.highlightedPixelCol=b,this.highlightedPixelRow=a):this.hideHighlightedPixel(f)};a.BaseTool.prototype.hideHighlightedPixel=function(b){if(null!==this.highlightedPixelRow&&null!==this.highlightedPixelCol){try{b.setPixel(this.highlightedPixelCol,this.highlightedPixelRow,Constants.TRANSPARENT_COLOR)}catch(a){console.warn("ns.BaseTool.prototype.hideHighlightedPixel failed")}this.highlightedPixelCol=this.highlightedPixelRow=null}};a.BaseTool.prototype.raiseSaveStateEvent=function(b){$.publish(Events.PISKEL_SAVE_STATE,
|
||||
{type:pskl.service.HistoryService.REPLAY,scope:this,replay:b})};a.BaseTool.prototype.releaseToolAt=function(b,a,c,e,f,g){};a.BaseTool.prototype.getLinePixels_=function(b,a,c,e){for(var f=[],g=Math.abs(a-b),h=Math.abs(e-c),k=b<a?1:-1,m=c<e?1:-1,l=g-h;;){f.push({col:b,row:c});if(b==a&&c==e)break;var n=2*l;n>-h&&(l-=h,b+=k);n<g&&(l+=g,c+=m)}return f}})();(function(){var a=$.namespace("pskl.drawingtools");a.Circle=function(){a.ShapeTool.call(this);this.toolId="tool-circle";this.helpText="Circle tool"};pskl.utils.inherit(a.Circle,a.ShapeTool);a.Circle.prototype.draw_=function(b,a,c,e){b=this.getCirclePixels_(this.startCol,this.startRow,b,a);for(a=0;a<b.length;a++)e.setPixel(b[a].col,b[a].row,c)};a.Circle.prototype.getCirclePixels_=function(b,a,c,e){b=pskl.PixelUtils.getOrderedRectangleCoordinates(b,a,c,e);a=(b.x0+b.x1)/2;c=(b.y0+b.y1)/2;e=b.x1-a;var f=
|
||||
b.y1-c,g=[],h,k,m;for(h=b.x0;h<b.x1;h++)m=Math.acos((h-a)/e),k=Math.round(f*Math.sin(m)+c),g.push({col:h,row:k}),g.push({col:2*a-h,row:2*c-k});for(k=b.y0;k<b.y1;k++)m=Math.asin((k-c)/f),h=Math.round(e*Math.cos(m)+a),g.push({col:h,row:k}),g.push({col:2*a-h,row:2*c-k});return g}})();(function(){var a=$.namespace("pskl.drawingtools");a.ColorPicker=function(){this.toolId="tool-colorpicker";this.helpText="Color picker"};pskl.utils.inherit(a.ColorPicker,a.BaseTool);a.ColorPicker.prototype.applyToolAt=function(b,a,c,e,f,g){e.containsPixel(b,a)&&(b=e.getPixel(b,a),g.button==Constants.LEFT_BUTTON?$.publish(Events.SELECT_PRIMARY_COLOR,[b]):g.button==Constants.RIGHT_BUTTON&&$.publish(Events.SELECT_SECONDARY_COLOR,[b]))}})();(function(){var a=$.namespace("pskl.drawingtools");a.Eraser=function(){this.superclass.constructor.call(this);this.toolId="tool-eraser";this.helpText="Eraser tool"};pskl.utils.inherit(a.Eraser,a.SimplePen);a.Eraser.prototype.applyToolAt=function(b,a,c,e,f,g){this.superclass.applyToolAt.call(this,b,a,Constants.TRANSPARENT_COLOR,e,f,g)};a.Eraser.prototype.releaseToolAt=function(b,a,c,e,f,g){this.superclass.releaseToolAt.call(this,b,a,Constants.TRANSPARENT_COLOR,e,f,g)}})();(function(){var a=$.namespace("pskl.drawingtools");a.Move=function(){this.toolId=a.Move.TOOL_ID;this.helpText="Move tool";this.startRow=this.startCol=null};a.Move.TOOL_ID="tool-move";pskl.utils.inherit(a.Move,a.BaseTool);a.Move.prototype.applyToolAt=function(b,a,c,e,f,g){this.startCol=b;this.startRow=a;this.frameClone=e.clone()};a.Move.prototype.moveToolAt=function(b,a,c,e,f,g){this.shiftFrame(b-this.startCol,a-this.startRow,e,this.frameClone)};a.Move.prototype.shiftFrame=function(b,a,c,e){for(var f,
|
||||
g=0;g<c.getWidth();g++)for(var h=0;h<c.getHeight();h++)f=e.containsPixel(g-b,h-a)?e.getPixel(g-b,h-a):Constants.TRANSPARENT_COLOR,c.setPixel(g,h,f)};a.Move.prototype.releaseToolAt=function(b,a,c,e,f,g){this.moveToolAt(b,a,c,e,f);this.raiseSaveStateEvent({colDiff:b-this.startCol,rowDiff:a-this.startRow})};a.Move.prototype.replay=function(b,a){this.shiftFrame(a.colDiff,a.rowDiff,b,b.clone())}})();(function(){var a=$.namespace("pskl.drawingtools");a.PaintBucket=function(){this.toolId="tool-paint-bucket";this.helpText="Paint bucket tool"};pskl.utils.inherit(a.PaintBucket,a.BaseTool);a.PaintBucket.prototype.applyToolAt=function(b,a,c,e,f,g){pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(e,b,a,c);this.raiseSaveStateEvent({col:b,row:a,color:c})};a.PaintBucket.prototype.replay=function(b,a){pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(b,a.col,a.row,a.color)}})();(function(){var a=$.namespace("pskl.drawingtools");a.Rectangle=function(){a.ShapeTool.call(this);this.toolId="tool-rectangle";this.helpText="Rectangle tool"};pskl.utils.inherit(a.Rectangle,a.ShapeTool);a.Rectangle.prototype.draw_=function(b,a,c,e){b=pskl.PixelUtils.getBoundRectanglePixels(this.startCol,this.startRow,b,a);for(a=0;a<b.length;a++)e.setPixel(b[a].col,b[a].row,c)}})();(function(){var a=$.namespace("pskl.drawingtools");a.ShapeTool=function(){this.startRow=this.startCol=null};pskl.utils.inherit(a.ShapeTool,a.BaseTool);a.ShapeTool.prototype.applyToolAt=function(b,a,c,e,f,g){$.publish(Events.DRAG_START,[b,a]);this.startCol=b;this.startRow=a;f.setPixel(b,a,c)};a.ShapeTool.prototype.moveToolAt=function(b,a,c,e,f,g){b=this.getCoordinates_(b,a,g);$.publish(Events.CURSOR_MOVED,[b.col,b.row]);f.clear();c==Constants.TRANSPARENT_COLOR&&(c=Constants.SELECTION_TRANSPARENT_COLOR);
|
||||
this.draw_(b.col,b.row,c,f)};a.ShapeTool.prototype.releaseToolAt=function(b,a,c,e,f,g){f.clear();f=this.getCoordinates_(b,a,g);this.draw_(f.col,f.row,c,e);$.publish(Events.DRAG_END,[b,a]);this.raiseSaveStateEvent({col:b,row:a,startCol:this.startCol,startRow:this.startRow,color:c})};a.ShapeTool.prototype.replay=function(b,a){this.startCol=a.startCol;this.startRow=a.startRow;this.draw_(a.col,a.row,a.color,b)};a.ShapeTool.prototype.getCoordinates_=function(b,a,c){return c.shiftKey?this.getScaledCoordinates_(b,
|
||||
a):{col:b,row:a}};a.ShapeTool.prototype.getScaledCoordinates_=function(b,a){var c=this.startCol-b,e=Math.abs(c),f=this.startRow-a,g=Math.abs(f),h=Math.min(e,g);a=this.startRow-f/g*h;b=this.startCol-c/e*h;return{col:b,row:a}};a.ShapeTool.prototype.draw_=Constants.ABSTRACT_FUNCTION})();(function(){var a=$.namespace("pskl.drawingtools");a.SimplePen=function(){this.toolId="tool-pen";this.helpText="Pen tool";this.previousRow=this.previousCol=null;this.pixels=[]};pskl.utils.inherit(a.SimplePen,a.BaseTool);a.SimplePen.prototype.applyToolAt=function(b,a,c,e,f,g){e.setPixel(b,a,c);this.previousCol=b;this.previousRow=a;this.pixels.push({col:b,row:a})};a.SimplePen.prototype.moveToolAt=function(b,a,c,e,f,g){if(1<Math.abs(b-this.previousCol)||1<Math.abs(a-this.previousRow))for(var h=this.getLinePixels_(b,
|
||||
this.previousCol,a,this.previousRow),k=0,m=h.length;k<m;k++){var l=h[k];this.applyToolAt(l.col,l.row,c,e,f,g)}else this.applyToolAt(b,a,c,e,f);this.previousCol=b;this.previousRow=a};a.SimplePen.prototype.releaseToolAt=function(b,a,c,e,f,g){this.raiseSaveStateEvent({pixels:this.pixels.slice(0),color:c});this.pixels=[]};a.SimplePen.prototype.replay=function(b,a){a.pixels.forEach(function(c){b.setPixel(c.col,c.row,a.color)})}})();(function(){var a=$.namespace("pskl.drawingtools");a.Stroke=function(){this.toolId="tool-stroke";this.helpText="Stroke tool";this.startRow=this.startCol=null};pskl.utils.inherit(a.Stroke,a.BaseTool);a.Stroke.prototype.applyToolAt=function(b,a,c,e,f,g){this.startCol=b;this.startRow=a;f.setPixel(b,a,c)};a.Stroke.prototype.moveToolAt=function(b,a,c,e,f,g){f.clear();b=this.getLinePixels_(this.startCol,b,this.startRow,a);for(a=0;a<b.length;a++)c==Constants.TRANSPARENT_COLOR&&(c=Constants.SELECTION_TRANSPARENT_COLOR),
|
||||
f.setPixel(b[a].col,b[a].row,c)};a.Stroke.prototype.releaseToolAt=function(b,a,c,e,f,g){b=this.getLinePixels_(this.startCol,b,this.startRow,a);for(a=0;a<b.length;a++)e.setPixel(b[a].col,b[a].row,c);f.clear();this.raiseSaveStateEvent({pixels:b,color:c})};a.Stroke.prototype.replay=function(b,a){a.pixels.forEach(function(c){b.setPixel(c.col,c.row,a.color)})}})();(function(){var a=$.namespace("pskl.drawingtools");a.VerticalMirrorPen=function(){this.superclass.constructor.call(this);this.toolId="tool-vertical-mirror-pen";this.helpText="vertical mirror pen tool";this.swap=null};pskl.utils.inherit(a.VerticalMirrorPen,a.SimplePen);a.VerticalMirrorPen.prototype.setMirrorContext=function(){this.swap=this.previousCol;this.previousCol=this.mirroredPreviousCol};a.VerticalMirrorPen.prototype.unsetMirrorContext=function(){this.mirroredPreviousCol=this.previousCol;this.previousCol=
|
||||
this.swap};a.VerticalMirrorPen.prototype.applyToolAt=function(b,a,c,e,f,g){this.superclass.applyToolAt.call(this,b,a,c,e,f);this.mirroredPreviousCol=b=this.getSymmetricCol_(b,e);this.setMirrorContext();this.superclass.applyToolAt.call(this,b,a,c,e,f);this.unsetMirrorContext()};a.VerticalMirrorPen.prototype.getSymmetricCol_=function(b,a){return a.getWidth()-b-1}})();(function(){var a=$.namespace("pskl.drawingtools");a.BaseSelect=function(){this.secondaryToolId=pskl.drawingtools.Move.TOOL_ID;this.BodyRoot=$("body");this.selection=this.startRow=this.startCol=null};pskl.utils.inherit(a.BaseSelect,a.BaseTool);a.BaseSelect.prototype.applyToolAt=function(b,a,c,e,f,g){this.startCol=b;this.startRow=a;this.lastCol=b;this.lastRow=a;this.isInSelection(b,a)?(this.mode="moveSelection",this.onSelectionDragStart_(b,a,c,e,f)):(this.mode="select",this.onSelectStart_(b,a,c,e,
|
||||
f))};a.BaseSelect.prototype.moveToolAt=function(b,a,c,e,f,g){if("select"==this.mode)this.onSelect_(b,a,c,e,f);else if("moveSelection"==this.mode)this.onSelectionDrag_(b,a,c,e,f)};a.BaseSelect.prototype.releaseToolAt=function(b,a,c,e,f,g){if("select"==this.mode)this.onSelectEnd_(b,a,c,e,f);else if("moveSelection"==this.mode)this.onSelectionDragEnd_(b,a,c,e,f)};a.BaseSelect.prototype.moveUnactiveToolAt=function(b,a,c,e,f,g){f.containsPixel(b,a)&&(this.isInSelection(b,a)?(this.BodyRoot.addClass(this.secondaryToolId),
|
||||
this.BodyRoot.removeClass(this.toolId)):(this.BodyRoot.addClass(this.toolId),this.BodyRoot.removeClass(this.secondaryToolId)))};a.BaseSelect.prototype.isInSelection=function(b,a){return this.selection&&this.selection.pixels.some(function(c){return c.col===b&&c.row===a})};a.BaseSelect.prototype.hideHighlightedPixel=function(){};a.BaseSelect.prototype.drawSelectionOnOverlay_=function(b){for(var a=this.selection.pixels,c=0,e=a.length;c<e;c++){var f=a[c],f=f.color&&f.color!==Constants.TRANSPARENT_COLOR?
|
||||
this.getTransparentVariant(f.color):Constants.SELECTION_TRANSPARENT_COLOR;b.setPixel(a[c].col,a[c].row,f)}};a.BaseSelect.prototype.getTransparentVariant=function(b){b=window.tinycolor(b);b=window.tinycolor.lighten(b,10);b.setAlpha(0.5);return b.toRgbString()};a.BaseSelect.prototype.onSelectStart_=function(b,a,c,e,f){};a.BaseSelect.prototype.onSelect_=function(b,a,c,e,f){};a.BaseSelect.prototype.onSelectEnd_=function(b,a,c,e,f){};a.BaseSelect.prototype.onSelectionDragStart_=function(b,a,c,e,f){};a.BaseSelect.prototype.onSelectionDrag_=
|
||||
function(b,a,c,e,f){this.selection.move(b-this.lastCol,a-this.lastRow);f.clear();this.drawSelectionOnOverlay_(f);this.lastCol=b;this.lastRow=a};a.BaseSelect.prototype.onSelectionDragEnd_=function(b,a,c,e,f){this.onSelectionDrag_(b,a,c,e,f)}})();(function(){var a=$.namespace("pskl.drawingtools");a.RectangleSelect=function(){this.toolId="tool-rectangle-select";this.helpText="Rectangle selection tool";a.BaseSelect.call(this);this.hasSelection=!1};pskl.utils.inherit(a.RectangleSelect,a.BaseSelect);a.RectangleSelect.prototype.onSelectStart_=function(b,a,c,e,f){this.hasSelection?(this.hasSelection=!1,f.clear(),$.publish(Events.SELECTION_DISMISSED)):(this.hasSelection=!0,$.publish(Events.DRAG_START,[b,a]),f.setPixel(b,a,c))};a.RectangleSelect.prototype.onSelect_=
|
||||
function(b,a,c,e,f){this.hasSelection&&(f.clear(),this.selection=new pskl.selection.RectangularSelection(this.startCol,this.startRow,b,a),$.publish(Events.SELECTION_CREATED,[this.selection]),this.drawSelectionOnOverlay_(f))};a.RectangleSelect.prototype.onSelectEnd_=function(b,a,c,e,f){this.hasSelection&&(this.onSelect_(b,a,c,e,f),$.publish(Events.DRAG_END,[b,a]))}})();(function(){var a=$.namespace("pskl.drawingtools");a.ShapeSelect=function(){this.toolId="tool-shape-select";this.helpText="Shape selection tool";a.BaseSelect.call(this)};pskl.utils.inherit(a.ShapeSelect,a.BaseSelect);a.ShapeSelect.prototype.onSelectStart_=function(b,a,c,e,f){$.publish(Events.SELECTION_DISMISSED);f.clear();b=pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(e,b,a);this.selection=new pskl.selection.ShapeSelection(b);$.publish(Events.SELECTION_CREATED,[this.selection]);this.drawSelectionOnOverlay_(f)}})();(function(){var a=$.namespace("pskl.model"),b=0;a.Frame=function(d,c){if(d&&c)this.width=d,this.height=c,this.id=b++,this.version=0,this.pixels=a.Frame.createEmptyPixelGrid_(d,c),this.previousStates=[this.getPixels()],this.stateIndex=0;else throw"Bad arguments in pskl.model.Frame constructor : "+d+", "+c;};a.Frame.fromPixelGrid=function(b){if(b.length&&b[0].length){var a=new pskl.model.Frame(b.length,b[0].length);a.setPixels(b);return a}throw"Bad arguments in pskl.model.Frame.fromPixelGrid : "+b;
|
||||
};a.Frame.createEmptyPixelGrid_=function(b,a){for(var e=[],f=0;f<b;f++){for(var g=[],h=0;h<a;h++)g.push(Constants.TRANSPARENT_COLOR);e[f]=g}return e};a.Frame.createEmptyFromFrame=function(b){return new a.Frame(b.getWidth(),b.getHeight())};a.Frame.prototype.clone=function(){var b=new a.Frame(this.width,this.height);b.setPixels(this.getPixels());return b};a.Frame.prototype.getPixels=function(){return this.clonePixels_(this.pixels)};a.Frame.prototype.setPixels=function(b){this.pixels=this.clonePixels_(b);
|
||||
this.version++};a.Frame.prototype.clear=function(){var b=a.Frame.createEmptyPixelGrid_(this.getWidth(),this.getHeight());this.setPixels(b)};a.Frame.prototype.clonePixels_=function(b){for(var a=[],e=0;e<b.length;e++)a[e]=b[e].slice(0,b[e].length);return a};a.Frame.prototype.getHash=function(){return[this.id,this.version].join("-")};a.Frame.prototype.setPixel=function(b,a,e){this.containsPixel(b,a)&&this.pixels[b][a]!==e&&(this.pixels[b][a]=e,this.version++)};a.Frame.prototype.getPixel=function(b,a){return this.containsPixel(b,
|
||||
a)?this.pixels[b][a]:null};a.Frame.prototype.forEachPixel=function(b){for(var a=0;a<this.getWidth();a++)for(var e=0;e<this.getHeight();e++)b(this.getPixel(a,e),a,e)};a.Frame.prototype.getWidth=function(){return this.width};a.Frame.prototype.getHeight=function(){return this.height};a.Frame.prototype.containsPixel=function(b,a){return 0<=b&&0<=a&&b<this.width&&a<this.height};a.Frame.prototype.saveState=function(){this.previousStates.length=this.stateIndex+1;this.previousStates.push(this.getPixels());
|
||||
this.stateIndex=this.previousStates.length-1};a.Frame.prototype.loadPreviousState=function(){0<this.stateIndex&&(this.stateIndex--,this.setPixels(this.previousStates[this.stateIndex]))};a.Frame.prototype.loadNextState=function(){this.stateIndex<this.previousStates.length-1&&(this.stateIndex++,this.setPixels(this.previousStates[this.stateIndex]))};a.Frame.prototype.isSameSize=function(b){return this.getHeight()==b.getHeight()&&this.getWidth()==b.getWidth()}})();(function(){var a=$.namespace("pskl.model");a.Layer=function(b){if(b)this.name=b,this.frames=[];else throw"Invalid arguments in Layer constructor : 'name' is mandatory";};a.Layer.fromFrames=function(b,d){var c=new a.Layer(b);d.forEach(c.addFrame.bind(c));return c};a.Layer.prototype.getName=function(){return this.name};a.Layer.prototype.setName=function(b){this.name=b};a.Layer.prototype.getFrames=function(){return this.frames};a.Layer.prototype.getFrameAt=function(b){return this.frames[b]};a.Layer.prototype.addFrame=
|
||||
function(b){this.frames.push(b)};a.Layer.prototype.addFrameAt=function(b,a){this.frames.splice(a,0,b)};a.Layer.prototype.removeFrame=function(b){b=this.frames.indexOf(b);this.removeFrameAt(b)};a.Layer.prototype.removeFrameAt=function(b){if(this.frames[b])this.frames.splice(b,1);else throw"Invalid index in removeFrameAt : "+b+" (size : "+this.length()+")";};a.Layer.prototype.moveFrame=function(b,a){var c=this.frames.splice(b,1)[0];this.frames.splice(a,0,c)};a.Layer.prototype.swapFramesAt=function(b,
|
||||
a){var c=this.frames[b],e=this.frames[a];if(c&&e)this.frames[a]=c,this.frames[b]=e;else throw console.log("frames",this.frames),console.log("fromIndex",b,"toIndex",a),"Frame not found in moveFrameAt";};a.Layer.prototype.duplicateFrame=function(b){b=this.frames.indexOf(b);this.duplicateFrameAt(b)};a.Layer.prototype.duplicateFrameAt=function(b){var a=this.frames[b];if(a)a=a.clone(),this.addFrameAt(a,b);else throw"Frame not found in duplicateFrameAt";};a.Layer.prototype.length=function(){return this.frames.length}})();(function(){var a=$.namespace("pskl.model");a.Piskel=function(b,a,c){if(b&&a&&c)this.layers=[],this.width=b,this.height=a,this.descriptor=c;else throw"Missing arguments in Piskel constructor : "+Array.prototype.join.call(arguments,",");};a.Piskel.fromLayers=function(b,a){var c=null;if(0<b.length&&0<b[0].length())c=b[0].getFrameAt(0),c=new pskl.model.Piskel(c.getWidth(),c.getHeight(),a),b.forEach(c.addLayer.bind(c));else throw"Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument";
|
||||
return c};a.Piskel.prototype.getLayers=function(){return this.layers};a.Piskel.prototype.getHeight=function(){return this.height};a.Piskel.prototype.getWidth=function(){return this.width};a.Piskel.prototype.getLayers=function(){return this.layers};a.Piskel.prototype.getLayerAt=function(b){return this.layers[b]};a.Piskel.prototype.getLayersByName=function(b){return this.layers.filter(function(a){return a.getName()==b})};a.Piskel.prototype.addLayer=function(b){this.layers.push(b)};a.Piskel.prototype.moveLayerUp=
|
||||
function(b){var a=this.layers.indexOf(b);-1<a&&a<this.layers.length-1&&(this.layers[a]=this.layers[a+1],this.layers[a+1]=b)};a.Piskel.prototype.moveLayerDown=function(b){var a=this.layers.indexOf(b);0<a&&(this.layers[a]=this.layers[a-1],this.layers[a-1]=b)};a.Piskel.prototype.removeLayer=function(b){b=this.layers.indexOf(b);-1!=b&&this.layers.splice(b,1)};a.Piskel.prototype.removeLayerAt=function(b){this.layers.splice(b,1)};a.Piskel.prototype.getDescriptor=function(){return this.descriptor};a.Piskel.prototype.setDescriptor=
|
||||
function(b){this.descriptor=b;$(".piskel-name").html(this.descriptor.name)}})();(function(){$.namespace("pskl.model.piskel").Descriptor=function(a,b,d){this.name=a;this.description=b;this.isPublic=d}})();(function(){var a=$.namespace("pskl.rendering");a.AbstractRenderer=function(){};a.AbstractRenderer.prototype.clear=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.render=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.getCoordinates=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.setGridWidth=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.getGridWidth=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.setZoom=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.getZoom=
|
||||
Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.setOffset=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.getOffset=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.setDisplaySize=Constants.ABSTRACT_FUNCTION;a.AbstractRenderer.prototype.getDisplaySize=Constants.ABSTRACT_FUNCTION})();(function(){var a=$.namespace("pskl.rendering");a.CanvasRenderer=function(b,a){this.frame=b;this.zoom=a;this.transparentColor_="white"};a.CanvasRenderer.prototype.drawTransparentAs=function(b){this.transparentColor_=b};a.CanvasRenderer.prototype.render=function(){var b=this.createCanvas_(),a=b.getContext("2d");this.frame.forEachPixel(function(b,c,e){this.renderPixel_(b,c,e,a)}.bind(this));var c=this.createCanvas_(this.zoom),e=c.getContext("2d");pskl.CanvasUtils.disableImageSmoothing(c);e.scale(this.zoom,
|
||||
this.zoom);e.drawImage(b,0,0);return c};a.CanvasRenderer.prototype.renderPixel_=function(b,a,c,e){b==Constants.TRANSPARENT_COLOR&&(b=this.transparentColor_);e.fillStyle=b;e.fillRect(a,c,1,1)};a.CanvasRenderer.prototype.createCanvas_=function(b){b=b||1;var a=this.frame.getWidth()*b;b*=this.frame.getHeight();return pskl.CanvasUtils.createCanvas(a,b)}})();(function(){var a=$.namespace("pskl.rendering");a.CompositeRenderer=function(){this.renderers=[]};pskl.utils.inherit(pskl.rendering.CompositeRenderer,pskl.rendering.AbstractRenderer);a.CompositeRenderer.prototype.add=function(b){this.renderers.push(b);return this};a.CompositeRenderer.prototype.clear=function(){this.renderers.forEach(function(b){b.clear()})};a.CompositeRenderer.prototype.setZoom=function(b){this.renderers.forEach(function(a){a.setZoom(b)})};a.CompositeRenderer.prototype.getZoom=function(){return this.getSampleRenderer_().getZoom()};
|
||||
a.CompositeRenderer.prototype.setDisplaySize=function(b,a){this.renderers.forEach(function(c){c.setDisplaySize(b,a)})};a.CompositeRenderer.prototype.getDisplaySize=function(){return this.getSampleRenderer_().getDisplaySize()};a.CompositeRenderer.prototype.setOffset=function(b,a){this.renderers.forEach(function(c){c.setOffset(b,a)})};a.CompositeRenderer.prototype.getOffset=function(){return this.getSampleRenderer_().getOffset()};a.CompositeRenderer.prototype.setGridWidth=function(b){this.renderers.forEach(function(a){a.setGridWidth(b)})};
|
||||
a.CompositeRenderer.prototype.getGridWidth=function(){return this.getSampleRenderer_().getGridWidth()};a.CompositeRenderer.prototype.getSampleRenderer_=function(){if(0<this.renderers.length)return this.renderers[0];throw"Renderer manager is empty";}})();(function(){var a=$.namespace("pskl.rendering");a.DrawingLoop=function(){this.requestAnimationFrame=this.getRequestAnimationFrameShim_();this.isRunning=!1;this.previousTime=0;this.callbacks=[]};a.DrawingLoop.prototype.addCallback=function(b,a,c){b={fn:b,scope:a,args:c};this.callbacks.push(b);return b};a.DrawingLoop.prototype.removeCallback=function(b){b=this.callbacks.indexOf(b);-1!=b&&this.callbacks.splice(b,1)};a.DrawingLoop.prototype.start=function(){this.isRunning=!0;this.loop_()};a.DrawingLoop.prototype.loop_=
|
||||
function(){var b=Date.now();this.executeCallbacks_(b-this.previousTime);this.previousTime=b;this.requestAnimationFrame.call(window,this.loop_.bind(this))};a.DrawingLoop.prototype.executeCallbacks_=function(b){for(var a=0;a<this.callbacks.length;a++){var c=this.callbacks[a];c.fn.call(c.scope,b,c.args)}};a.DrawingLoop.prototype.stop=function(){this.isRunning=!1};a.DrawingLoop.prototype.getRequestAnimationFrameShim_=function(){return window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||
|
||||
window.msRequestAnimationFrame||function(b){window.setTimeout(b,1E3/60)}}})();(function(){var a=$.namespace("pskl.rendering");a.FramesheetRenderer=function(b){if(0<b.length)this.frames=b;else throw"FramesheetRenderer : Invalid argument : frames is empty";};a.FramesheetRenderer.prototype.renderAsCanvas=function(){for(var b=this.createCanvas_(),a=0;a<this.frames.length;a++){var c=this.frames[a];this.drawFrameInCanvas_(c,b,a*c.getWidth(),0)}return b};a.FramesheetRenderer.prototype.drawFrameInCanvas_=function(b,a,c,e){var f=a.getContext("2d");b.forEachPixel(function(b,a,d){b!=
|
||||
Constants.TRANSPARENT_COLOR&&(f.fillStyle=b,f.fillRect(a+c,d+e,1,1))})};a.FramesheetRenderer.prototype.createCanvas_=function(){var b=this.frames[0],a=this.frames.length*b.getWidth(),b=b.getHeight();return pskl.CanvasUtils.createCanvas(a,b)}})();(function(){var a=$.namespace("pskl.rendering");a.PiskelRenderer=function(b){for(var d=[],c=0;c<b.getFrameCount();c++)d.push(b.getFrameAt(c));a.FramesheetRenderer.call(this,d)};pskl.utils.inherit(a.PiskelRenderer,a.FramesheetRenderer)})();(function(){var a=$.namespace("pskl.rendering.frame");a.CachedFrameRenderer=function(b,a,c){pskl.rendering.frame.FrameRenderer.call(this,b,a,c);this.serializedFrame=""};pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer,pskl.rendering.frame.FrameRenderer);a.CachedFrameRenderer.prototype.setDisplaySize=function(b,a){this.displayWidth===b&&this.displayHeight===a||this.superclass.setDisplaySize.call(this,b,a)};a.CachedFrameRenderer.prototype.render=function(b){var a=this.getOffset(),c=this.getDisplaySize(),
|
||||
a=[this.getZoom(),this.getGridWidth(),a.x,a.y,c.width,c.height,b.getHash()].join("-");this.serializedFrame!=a&&(this.serializedFrame=a,this.superclass.render.call(this,b))}})();(function(){var a=$.namespace("pskl.rendering.frame");a.FrameRenderer=function(b,a,c){this.defaultRenderingOptions={supportGridRendering:!1,zoom:1};a=$.extend(!0,{},this.defaultRenderingOptions,a);if(void 0===b)throw"Bad FrameRenderer initialization. <container> undefined.";if(isNaN(a.zoom))throw"Bad FrameRenderer initialization. <zoom> not well defined.";this.container=b;this.zoom=a.zoom;this.offset={x:0,y:0};this.margin={x:0,y:0};this.supportGridRendering=a.supportGridRendering;this.classes=c||
|
||||
[];this.classes.push("canvas");this.displayCanvas=this.canvas=null;this.setDisplaySize(a.width,a.height);this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));$.subscribe(Events.USER_SETTINGS_CHANGED,this.onUserSettingsChange_.bind(this))};pskl.utils.inherit(pskl.rendering.frame.FrameRenderer,pskl.rendering.AbstractRenderer);a.FrameRenderer.prototype.render=function(b){b&&(this.clear(),this.renderFrame_(b))};a.FrameRenderer.prototype.clear=function(){pskl.CanvasUtils.clear(this.canvas);
|
||||
pskl.CanvasUtils.clear(this.displayCanvas)};a.FrameRenderer.prototype.setZoom=function(b){if(b>Constants.MINIMUM_ZOOM){var a=this.offset.x+this.displayWidth/(2*this.zoom),c=this.offset.y+this.displayHeight/(2*this.zoom);this.zoom=b;this.setOffset(a-this.displayWidth/(2*this.zoom),c-this.displayHeight/(2*this.zoom))}};a.FrameRenderer.prototype.getZoom=function(){return this.zoom};a.FrameRenderer.prototype.setDisplaySize=function(b,a){this.displayWidth=b;this.displayHeight=a;this.displayCanvas&&($(this.displayCanvas).remove(),
|
||||
this.displayCanvas=null);this.createDisplayCanvas_()};a.FrameRenderer.prototype.getDisplaySize=function(){return{height:this.displayHeight,width:this.displayWidth}};a.FrameRenderer.prototype.getOffset=function(){return{x:this.offset.x,y:this.offset.y}};a.FrameRenderer.prototype.setOffset=function(b,a){this.canvas&&(b=pskl.utils.Math.minmax(b,0,this.canvas.width-this.displayWidth/this.zoom),a=pskl.utils.Math.minmax(a,0,this.canvas.height-this.displayHeight/this.zoom));this.offset.x=b;this.offset.y=
|
||||
a};a.FrameRenderer.prototype.setGridWidth=function(b){this.gridWidth_=b};a.FrameRenderer.prototype.getGridWidth=function(){return this.supportGridRendering?this.gridWidth_:0};a.FrameRenderer.prototype.updateMargins_=function(b){var a=this.displayWidth-this.zoom*b.getWidth();this.margin.x=Math.max(0,a)/2;b=this.displayHeight-this.zoom*b.getHeight();this.margin.y=Math.max(0,b)/2};a.FrameRenderer.prototype.createDisplayCanvas_=function(){this.displayCanvas=pskl.CanvasUtils.createCanvas(this.displayWidth,
|
||||
this.displayHeight,this.classes);pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);this.container.append(this.displayCanvas)};a.FrameRenderer.prototype.onUserSettingsChange_=function(b,a,c){a==pskl.UserSettings.GRID_WIDTH&&this.setGridWidth(c)};a.FrameRenderer.prototype.renderPixel_=function(b,a,c,e){b!=Constants.TRANSPARENT_COLOR&&(e.fillStyle=b,e.fillRect(a,c,1,1))};a.FrameRenderer.prototype.getCoordinates=function(b,a){var c=this.container.offset();b-=c.left;a-=c.top;b-=this.margin.x;
|
||||
a-=this.margin.y;c=this.zoom;b+=this.offset.x*c;a+=this.offset.y*c;return{x:Math.floor(b/c),y:Math.floor(a/c)}};a.FrameRenderer.prototype.renderFrame_=function(b){this.canvas&&b.getWidth()==this.canvas.width&&b.getHeight()==this.canvas.height||(this.canvas=pskl.CanvasUtils.createCanvas(b.getWidth(),b.getHeight()));for(var a=this.canvas.getContext("2d"),c=0,e=b.getWidth();c<e;c++)for(var f=0,g=b.getHeight();f<g;f++){var h=b.getPixel(c,f);this.renderPixel_(h,c,f,a)}this.updateMargins_(b);b=this.displayCanvas.getContext("2d");
|
||||
b.save();this.canvas.width*this.zoom<this.displayCanvas.width&&(b.fillStyle=Constants.ZOOMED_OUT_BACKGROUND_COLOR,b.fillRect(0,0,this.displayCanvas.width,this.displayCanvas.height));b.translate(this.margin.x-this.offset.x*this.zoom,this.margin.y-this.offset.y*this.zoom);b.clearRect(0,0,this.canvas.width*this.zoom,this.canvas.height*this.zoom);a=pskl.utils.UserAgent.isIE&&10===pskl.utils.UserAgent.version;c=this.getGridWidth();0<c||a?(a=pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas,this.zoom,
|
||||
c),b.drawImage(a,0,0)):(b.scale(this.zoom,this.zoom),b.drawImage(this.canvas,0,0));b.restore()}})();(function(){var a=$.namespace("pskl.rendering.frame");a.TiledFrameRenderer=function(b,a){this.container=b;this.setZoom(a);this.displayContainer=document.createElement("div");this.displayContainer.classList.add("tiled-frame-container");b.get(0).appendChild(this.displayContainer)};a.TiledFrameRenderer.prototype.render=function(b){b=new pskl.utils.FrameUtils.toImage(b,this.zoom);this.displayContainer.style.backgroundImage="url("+b.toDataURL("image/png")+")"};a.TiledFrameRenderer.prototype.show=function(){this.displayContainer&&
|
||||
(this.displayContainer.style.display="block")};a.TiledFrameRenderer.prototype.setZoom=function(b){this.zoom=b};a.TiledFrameRenderer.prototype.getZoom=function(){return this.zoom}})();(function(){var a=$.namespace("pskl.rendering.layer");a.LayersRenderer=function(b,a,c){pskl.rendering.CompositeRenderer.call(this);this.piskelController=c;this.belowRenderer=new pskl.rendering.frame.FrameRenderer(b,a,["layers-canvas","layers-below-canvas"]);this.aboveRenderer=new pskl.rendering.frame.FrameRenderer(b,a,["layers-canvas","layers-above-canvas"]);this.add(this.belowRenderer);this.add(this.aboveRenderer);this.serializedRendering=""};pskl.utils.inherit(pskl.rendering.layer.LayersRenderer,
|
||||
pskl.rendering.CompositeRenderer);a.LayersRenderer.prototype.render=function(){var b=this.getOffset(),a=this.getDisplaySize(),c=this.piskelController.getLayers(),e=this.piskelController.getCurrentFrameIndex(),f=this.piskelController.getCurrentLayerIndex(),b=[this.getZoom(),this.getGridWidth(),b.x,b.y,a.width,a.height,e,f,c.length].join("-");this.serializedRendering!=b&&(this.serializedRendering=b,this.clear(),b=c.slice(0,f),0<b.length&&(b=this.getFrameForLayersAt_(e,b),this.belowRenderer.render(b)),
|
||||
c=c.slice(f+1,c.length),0<c.length&&(e=this.getFrameForLayersAt_(e,c),this.aboveRenderer.render(e)))};a.LayersRenderer.prototype.setDisplaySize=function(b,a){var c=this.getDisplaySize();c.width===b&&c.height===a||this.superclass.setDisplaySize.call(this,b,a)};a.LayersRenderer.prototype.getFrameForLayersAt_=function(b,a){var c=a.map(function(a){return a.getFrameAt(b)});return pskl.utils.FrameUtils.merge(c)}})();(function(){var a=$.namespace("pskl.selection");a.BaseSelection=function(){this.reset()};a.BaseSelection.prototype.reset=function(){this.pixels=[];this.hasPastedContent=!1};a.BaseSelection.prototype.move=function(b,a){for(var c,e=[],f=0,g=this.pixels.length;f<g;f++)c=this.pixels[f],c.col+=b,c.row+=a,e.push(c);this.pixels=e};a.BaseSelection.prototype.fillSelectionFromFrame=function(b){this.pixels.forEach(function(a){a.color=b.getPixel(a.col,a.row)});this.hasPastedContent=!0}})();(function(){var a=$.namespace("pskl.selection");a.RectangularSelection=function(b,a,c,e){this.pixels=pskl.PixelUtils.getRectanglePixels(b,a,c,e)};pskl.utils.inherit(a.RectangularSelection,a.BaseSelection)})();(function(){var a=$.namespace("pskl.selection");a.SelectionManager=function(b){this.piskelController=b;this.currentSelection=null};a.SelectionManager.prototype.init=function(){$.subscribe(Events.SELECTION_CREATED,$.proxy(this.onSelectionCreated_,this));$.subscribe(Events.SELECTION_DISMISSED,$.proxy(this.onSelectionDismissed_,this));$.subscribe(Events.SELECTION_MOVE_REQUEST,$.proxy(this.onSelectionMoved_,this));pskl.app.shortcutService.addShortcut("ctrl+V",this.paste.bind(this));pskl.app.shortcutService.addShortcut("ctrl+shift+V",
|
||||
this.pasteOpaqueOnly.bind(this));pskl.app.shortcutService.addShortcut("ctrl+X",this.cut.bind(this));pskl.app.shortcutService.addShortcut("ctrl+C",this.copy.bind(this));pskl.app.shortcutService.addShortcut("del",this.erase.bind(this));pskl.app.shortcutService.addShortcut("back",this.onBackPressed_.bind(this));$.subscribe(Events.TOOL_SELECTED,$.proxy(this.onToolSelected_,this))};a.SelectionManager.prototype.cleanSelection_=function(){this.currentSelection&&(this.currentSelection.reset(),this.currentSelection=
|
||||
null)};a.SelectionManager.prototype.onToolSelected_=function(b,a){a instanceof pskl.drawingtools.BaseSelect||this.cleanSelection_()};a.SelectionManager.prototype.onSelectionDismissed_=function(b){this.cleanSelection_()};a.SelectionManager.prototype.onBackPressed_=function(b){if(this.currentSelection)this.erase();else return!0};a.SelectionManager.prototype.erase=function(){for(var b=this.currentSelection.pixels,a=this.piskelController.getCurrentFrame(),c=0,e=b.length;c<e;c++)a.setPixel(b[c].col,b[c].row,
|
||||
Constants.TRANSPARENT_COLOR);$.publish(Events.PISKEL_SAVE_STATE,{type:pskl.service.HistoryService.REPLAY,scope:this,replay:{type:"REPLAY_ERASE",pixels:JSON.parse(JSON.stringify(b.slice(0)))}})};a.SelectionManager.prototype.cut=function(){if(this.currentSelection)this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame()),this.erase();else throw"Bad state for CUT callback in SelectionManager";};a.SelectionManager.prototype.paste=function(){this.currentSelection&&this.currentSelection.hasPastedContent&&
|
||||
this.pastePixels(this.currentSelection.pixels)};a.SelectionManager.prototype.pasteOpaqueOnly=function(){if(this.currentSelection&&this.currentSelection.hasPastedContent){var b=this.currentSelection.pixels.filter(function(b){return b.color!==Constants.TRANSPARENT_COLOR});this.pastePixels(b)}};a.SelectionManager.prototype.pastePixels=function(b){var a=this.piskelController.getCurrentFrame();$.publish(Events.PISKEL_SAVE_STATE,{type:pskl.service.HistoryService.REPLAY,scope:this,replay:{type:"REPLAY_PASTE",
|
||||
pixels:JSON.parse(JSON.stringify(b.slice(0)))}});b.forEach(function(b){a.setPixel(b.col,b.row,b.color)})};a.SelectionManager.prototype.replay=function(b,a){a.pixels.forEach(function(c){b.setPixel(c.col,c.row,"REPLAY_PASTE"===a.type?c.color:Constants.TRANSPARENT_COLOR)})};a.SelectionManager.prototype.copy=function(){if(this.currentSelection&&this.piskelController.getCurrentFrame())this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());else throw"Bad state for CUT callback in SelectionManager";
|
||||
};a.SelectionManager.prototype.onSelectionCreated_=function(b,a){if(a)this.currentSelection=a;else throw"No selection set in SelectionManager";};a.SelectionManager.prototype.onSelectionMoved_=function(b,a,c){if(this.currentSelection)this.currentSelection.move(a,c);else throw"Bad state: No currentSelection set when trying to move it in SelectionManager";}})();(function(){var a=$.namespace("pskl.selection");a.ShapeSelection=function(b){this.pixels=b};pskl.utils.inherit(a.ShapeSelection,a.BaseSelection)})();(function(){var a=$.namespace("pskl.service");a.AppEngineStorageService=function(b){this.piskelController=b};a.AppEngineStorageService.prototype.init=function(){};a.AppEngineStorageService.prototype.store=function(b){var a=this.prepareFormData_(),c=new XMLHttpRequest;c.open("POST",Constants.APPENGINE.URL.SAVE,!0);c.onload=function(a){if(200==this.status)b.success(),b.after();else this.onerror(a)};c.onerror=function(a){b.error(this.status);b.after()};c.send(a)};a.AppEngineStorageService.prototype.prepareFormData_=
|
||||
function(){var b=this.piskelController.getPiskel().getDescriptor(),a=new FormData;a.append("framesheet",this.piskelController.serialize());a.append("fps",this.piskelController.getFPS());a.append("name",b.name);a.append("description",b.description);b.isPublic&&a.append("public",!0);a.append("frames",this.piskelController.getFrameCount());a.append("first_frame_as_png",pskl.app.getFirstFrameAsPng());a.append("framesheet_as_png",pskl.app.getFramesheetAsPng());return a}})();(function(){var a=$.namespace("pskl.service");a.CurrentColorsService=function(b){this.piskelController=b;this.currentColors=[];this.framesColorsCache_={}};a.CurrentColorsService.prototype.init=function(){$.subscribe(Events.PISKEL_RESET,this.onPiskelUpdated_.bind(this));$.subscribe(Events.TOOL_RELEASED,this.onPiskelUpdated_.bind(this))};a.CurrentColorsService.prototype.getCurrentColors=function(){return this.currentColors};a.CurrentColorsService.prototype.onPiskelUpdated_=function(b){var a={};this.piskelController.getLayers().map(function(b){return b.getFrames()}).reduce(function(b,
|
||||
a){return b.concat(a)}).forEach(function(b){var e=b.getHash();if(!this.framesColorsCache_[e]){var f={};b.forEachPixel(function(b,a,d){f[b]=!0});this.framesColorsCache_[e]=f}Object.keys(this.framesColorsCache_[e]).forEach(function(b){a[b]=!0})}.bind(this));delete a[Constants.TRANSPARENT_COLOR];this.currentColors=Object.keys(a);this.currentColors=this.currentColors.sort(function(b,a){return b<a?-1:b>a?1:0});$.publish(Events.CURRENT_COLORS_UPDATED,a)}})();(function(){var a=$.namespace("pskl.service");a.GithubStorageService=function(b){this.piskelController=b};a.GithubStorageService.prototype.init=function(){};a.GithubStorageService.prototype.store=function(b){b=new XMLHttpRequest;var a=new FormData;a.append("framesheet_content",this.piskelController.serialize());a.append("fps_speed",this.piskelController.getFPS());b.open("POST",Constants.STATIC.URL.SAVE,!0);b.onload=function(b){if(200==this.status)b=window.location.href.replace(window.location.search,
|
||||
""),window.location.href=b+"?frameId="+this.responseText;else this.onerror(b)};b.onerror=function(b){$.publish(Events.SHOW_NOTIFICATION,[{content:"Saving failed ("+this.status+")"}])};b.send(a)}})();(function(){var a=$.namespace("pskl.service");a.HistoryService=function(b){this.piskelController=b;this.stateQueue=[];this.currentIndex=-1;this.saveState__b=this.onSaveStateEvent.bind(this);this.lastLoadState=-1};a.HistoryService.SNAPSHOT="SNAPSHOT";a.HistoryService.REPLAY="REPLAY";a.HistoryService.prototype.init=function(){$.subscribe(Events.PISKEL_SAVE_STATE,this.saveState__b);pskl.app.shortcutService.addShortcut("ctrl+Z",this.undo.bind(this));pskl.app.shortcutService.addShortcut("ctrl+Y",this.redo.bind(this));
|
||||
this.saveState({type:a.HistoryService.SNAPSHOT})};a.HistoryService.prototype.onSaveStateEvent=function(b,a){this.saveState(a)};a.HistoryService.prototype.saveState=function(b){this.stateQueue=this.stateQueue.slice(0,this.currentIndex+1);this.currentIndex+=1;var d={action:b,frameIndex:this.piskelController.currentFrameIndex,layerIndex:this.piskelController.currentLayerIndex};if(b.type===a.HistoryService.SNAPSHOT||0===this.currentIndex%50)d.piskel=this.piskelController.serialize(!0);this.stateQueue.push(d)};
|
||||
a.HistoryService.prototype.undo=function(){this.loadState(this.currentIndex-1)};a.HistoryService.prototype.redo=function(){this.loadState(this.currentIndex+1)};a.HistoryService.prototype.isLoadStateAllowed_=function(b){var a=50<Date.now()-this.lastLoadState;b=0<=b&&b<this.stateQueue.length;return a&&b};a.HistoryService.prototype.getPreviousSnapshotIndex_=function(b){for(;this.stateQueue[b]&&!this.stateQueue[b].piskel;)b-=1;return b};a.HistoryService.prototype.loadState=function(b){if(this.isLoadStateAllowed_(b)){this.lastLoadState=
|
||||
Date.now();var a=this.getPreviousSnapshotIndex_(b);if(0>a)throw"Could not find previous SNAPSHOT saved in history stateQueue";var c=this.getSnapshotFromState_(a);b=this.onPiskelLoaded_.bind(this,b,a);pskl.utils.serialization.Deserializer.deserialize(c,b)}};a.HistoryService.prototype.getSnapshotFromState_=function(b){b=this.stateQueue[b];var a=b.piskel;"string"===typeof a&&(a=JSON.parse(a),b.piskel=a);return a};a.HistoryService.prototype.onPiskelLoaded_=function(b,a,c){var e=this.getPiskelSize_();
|
||||
c.setDescriptor(this.piskelController.piskel.getDescriptor());this.piskelController.setPiskel(c);for(a+=1;a<=b;a++)c=this.stateQueue[a],this.setupState(c),this.replayState(c);this.setupState(this.stateQueue[b]);this.currentIndex=b;$.publish(Events.PISKEL_RESET);e!==this.getPiskelSize_()&&$.publish(Events.FRAME_SIZE_CHANGED)};a.HistoryService.prototype.getPiskelSize_=function(){return this.piskelController.getWidth()+"x"+this.piskelController.getHeight()};a.HistoryService.prototype.setupState=function(b){this.piskelController.setCurrentFrameIndex(b.frameIndex);
|
||||
this.piskelController.setCurrentLayerIndex(b.layerIndex)};a.HistoryService.prototype.replayState=function(b){var a=b.action;b=this.piskelController.getLayerAt(b.layerIndex).getFrameAt(b.frameIndex);a.scope.replay(b,a.replay)}})();(function(){var a=$.namespace("pskl.service");a.ImageUploadService=function(){};a.ImageUploadService.prototype.init=function(){};a.ImageUploadService.prototype.upload=function(b,a,c){var e=new XMLHttpRequest,f=new FormData;f.append("data",b);e.open("POST",Constants.IMAGE_SERVICE_UPLOAD_URL,!0);e.onload=function(b){200==this.status?a(Constants.IMAGE_SERVICE_GET_URL+this.responseText):c()};e.send(f)}})();(function(){var a=$.namespace("pskl.service");a.LocalStorageService=function(b){if(void 0===b)throw"Bad LocalStorageService initialization: <undefined piskelController>";this.piskelController=b};a.LocalStorageService.prototype.init=function(){};a.LocalStorageService.prototype.save=function(b,a,c){this.removeFromKeys_(b);this.addToKeys_(b,a,Date.now());window.localStorage.setItem("piskel."+b,c)};a.LocalStorageService.prototype.load=function(b){var a=this.getPiskel(b),c=this.getKey_(b);pskl.utils.serialization.Deserializer.deserialize(JSON.parse(a),
|
||||
function(a){a.setDescriptor(new pskl.model.piskel.Descriptor(b,c.description,!0));pskl.app.piskelController.setPiskel(a)})};a.LocalStorageService.prototype.remove=function(b){this.removeFromKeys_(b);window.localStorage.removeItem("piskel."+b)};a.LocalStorageService.prototype.saveKeys_=function(b){window.localStorage.setItem("piskel.keys",JSON.stringify(b))};a.LocalStorageService.prototype.removeFromKeys_=function(b){var a=this.getKeys().filter(function(a){return a.name!==b});this.saveKeys_(a)};a.LocalStorageService.prototype.getKey_=
|
||||
function(b){var a=this.getKeys().filter(function(a){return a.name===b});return 0<a.length?a[0]:null};a.LocalStorageService.prototype.addToKeys_=function(b,a,c){var e=this.getKeys();e.push({name:b,description:a,date:c});this.saveKeys_(e)};a.LocalStorageService.prototype.getPiskel=function(b){return window.localStorage.getItem("piskel."+b)};a.LocalStorageService.prototype.getKeys=function(b){b=window.localStorage.getItem("piskel.keys");return JSON.parse(b)||[]}})();(function(){var a=$.namespace("pskl.service");a.SavedStatusService=function(b){this.piskelController=b};a.SavedStatusService.prototype.init=function(){$.subscribe(Events.TOOL_RELEASED,this.onToolReleased.bind(this));$.subscribe(Events.PISKEL_RESET,this.onPiskelReset.bind(this));$.subscribe(Events.PISKEL_SAVED,this.onPiskelSaved.bind(this));window.addEventListener("beforeunload",this.onBeforeUnload.bind(this))};a.SavedStatusService.prototype.onPiskelReset=function(){var b=this.piskelController.getPiskel();
|
||||
b.firstResetDone_?this.updateDirtyStatus(!0):b.firstResetDone_=!0};a.SavedStatusService.prototype.onToolReleased=function(){this.updateDirtyStatus(!0)};a.SavedStatusService.prototype.onPiskelSaved=function(){this.updateDirtyStatus(!1)};a.SavedStatusService.prototype.updateDirtyStatus=function(b){var a=this.piskelController.getPiskel();a.isDirty_!==b&&(a.isDirty_=b,this.updatePiskelName())};a.SavedStatusService.prototype.updatePiskelName=function(){var b=this.piskelController.getPiskel(),a=b.getDescriptor().name;
|
||||
b.isDirty_?$(".piskel-name").html(a+" *"):$(".piskel-name").html(a)};a.SavedStatusService.prototype.onBeforeUnload=function(b){if(this.piskelController.getPiskel().isDirty_)return(b||window.event).returnValue="Your Piskel seems to have unsaved changes"}})();(function(){var a=$.namespace("pskl.service.keyboard");a.CheatsheetService=function(){this.isDisplayed_=!1};a.CheatsheetService.prototype.init=function(){this.cheatsheetEl_=document.getElementById("cheatsheet-wrapper");if(!this.cheatsheetEl_)throw"cheatsheetEl_ DOM element could not be retrieved";this.initMarkup_();pskl.app.shortcutService.addShortcut("shift+?",this.toggleCheatsheet_.bind(this));pskl.app.shortcutService.addShortcut("?",this.toggleCheatsheet_.bind(this));$(".cheatsheet-link").click(this.toggleCheatsheet_.bind(this));
|
||||
$.subscribe(Events.TOGGLE_HELP,this.toggleCheatsheet_.bind(this));$.subscribe(Events.ESCAPE,this.onEscape_.bind(this))};a.CheatsheetService.prototype.toggleCheatsheet_=function(){this.isDisplayed_?this.hideCheatsheet_():this.showCheatsheet_()};a.CheatsheetService.prototype.onEscape_=function(){this.isDisplayed_&&this.hideCheatsheet_()};a.CheatsheetService.prototype.showCheatsheet_=function(){pskl.app.shortcutService.addShortcut("ESC",this.hideCheatsheet_.bind(this));this.cheatsheetEl_.style.display=
|
||||
"block";this.isDisplayed_=!0};a.CheatsheetService.prototype.hideCheatsheet_=function(){pskl.app.shortcutService.removeShortcut("ESC");this.cheatsheetEl_.style.display="none";this.isDisplayed_=!1};a.CheatsheetService.prototype.initMarkup_=function(){this.initMarkupForTools_();this.initMarkupForMisc_();this.initMarkupForSelection_()};a.CheatsheetService.prototype.toDescriptor_=function(b,a,c){return{shortcut:b,description:a,icon:c}};a.CheatsheetService.prototype.getDomFromDescriptor_=function(b){var a=
|
||||
pskl.utils.Template.get("cheatsheet-shortcut-template");b=pskl.utils.Template.replace(a,{shortcutIcon:b.icon,shortcutDescription:b.description,shortcutKey:b.shortcut});return pskl.utils.Template.createFromHTML(b)};a.CheatsheetService.prototype.initMarkupAbstract_=function(b,a){for(var c=$(a,this.cheatsheetEl_).get(0),e=0;e<b.length;e++){var f=this.getDomFromDescriptor_(b[e]);c.appendChild(f)}};a.CheatsheetService.prototype.initMarkupForTools_=function(){var b=pskl.app.toolController.tools.map(function(b){return this.toDescriptor_(b.shortcut,
|
||||
b.instance.helpText,"tool-icon "+b.instance.toolId)}.bind(this));this.initMarkupAbstract_(b,".cheatsheet-tool-shortcuts")};a.CheatsheetService.prototype.initMarkupForMisc_=function(){var b=[this.toDescriptor_("X","Swap primary/secondary colors"),this.toDescriptor_("D","Reset default colors"),this.toDescriptor_("ctrl + Z","Undo"),this.toDescriptor_("ctrl + Y","Redo"),this.toDescriptor_("￪","Select previous frame"),this.toDescriptor_("￬","Select next frame"),this.toDescriptor_("N","Create new frame"),
|
||||
this.toDescriptor_("shift + N","Duplicate selected frame"),this.toDescriptor_("shift + ?","Open/Close this popup"),this.toDescriptor_("alt + P","Open the Palette Manager")];this.initMarkupAbstract_(b,".cheatsheet-misc-shortcuts")};a.CheatsheetService.prototype.initMarkupForSelection_=function(){var b=[this.toDescriptor_("ctrl + X","Cut selection"),this.toDescriptor_("ctrl + C","Copy selection"),this.toDescriptor_("ctrl + V","Paste selection"),this.toDescriptor_("del","Delete selection")];this.initMarkupAbstract_(b,
|
||||
".cheatsheet-selection-shortcuts")}})();(function(){var a={191:"?",8:"back",27:"esc",38:"up",40:"down",46:"del"};$.namespace("pskl.service.keyboard").KeycodeTranslator={toChar:function(b){return 48<=b&&57>=b?b-48+"":65<=b&&90>=b?(b-65+10).toString(36):a[b]}}})();(function(){var a=$.namespace("pskl.service.keyboard");a.ShortcutService=function(){this.shortcuts_={}};a.ShortcutService.prototype.init=function(){$(document.body).keydown($.proxy(this.onKeyUp_,this))};a.ShortcutService.prototype.addShortcut=function(b,a){var c=this.parseKey_(b.toLowerCase()),e=c.key,c=c.meta;this.shortcuts_[e]=this.shortcuts_[e]||{};this.shortcuts_[e][c]?console.error("[ShortcutService] >>> Shortcut ["+(("normal"!==c?c+" + ":"")+e)+"] already registered"):this.shortcuts_[e][c]=
|
||||
a};a.ShortcutService.prototype.removeShortcut=function(b){var a=this.parseKey_(b.toLowerCase());b=a.key;a=a.meta;this.shortcuts_[b]=this.shortcuts_[b]||{};this.shortcuts_[b][a]=null};a.ShortcutService.prototype.parseKey_=function(b){var a=this.getMetaKey_({alt:-1!=b.indexOf("alt+"),shift:-1!=b.indexOf("shift+"),ctrl:-1!=b.indexOf("ctrl+")});b=b.split("+");b=b[b.length-1];return{meta:a,key:b}};a.ShortcutService.prototype.getMetaKey_=function(b){var a=[];["alt","ctrl","shift"].forEach(function(c){b[c]&&
|
||||
a.push(c)});return 0<a.length?a.join("+"):"normal"};a.ShortcutService.prototype.onKeyUp_=function(b){if(!this.isInInput_(b)){var a=b.which;b.target.nodeName.toUpperCase();var a=pskl.service.keyboard.KeycodeTranslator.toChar(a),c=this.shortcuts_[a];if(c){var e=this.getMetaKey_({alt:this.isAltKeyPressed_(b),shift:this.isShiftKeyPressed_(b),ctrl:this.isCtrlKeyPressed_(b)});(c=c[e])&&!0!==c(a)&&b.preventDefault()}}};a.ShortcutService.prototype.isInInput_=function(b){b=b.target.nodeName.toUpperCase();
|
||||
return"INPUT"===b||"TEXTAREA"===b};a.ShortcutService.prototype.isCtrlKeyPressed_=function(b){return this.isMac_()?b.metaKey:b.ctrlKey};a.ShortcutService.prototype.isShiftKeyPressed_=function(b){return b.shiftKey};a.ShortcutService.prototype.isAltKeyPressed_=function(b){return b.altKey};a.ShortcutService.prototype.isMac_=function(){return-1!=navigator.appVersion.indexOf("Mac")}})();(function(){$.namespace("pskl").CanvasUtils={createCanvas:function(a,b,d){var c=document.createElement("canvas");c.setAttribute("width",a);c.setAttribute("height",b);"string"==typeof d&&(d=[d]);if(Array.isArray(d))for(a=0;a<d.length;a++)c.classList.add(d[a]);return c},createFromImageData:function(a){var b=pskl.CanvasUtils.createCanvas(a.width,a.height);b.getContext("2d").putImageData(a,0,0);return b},disableImageSmoothing:function(a){a=a.getContext("2d");a.imageSmoothingEnabled=!1;a.mozImageSmoothingEnabled=
|
||||
!1;a.oImageSmoothingEnabled=!1;a.webkitImageSmoothingEnabled=!1;a.msImageSmoothingEnabled=!1},clear:function(a){a&&a.getContext("2d").clearRect(0,0,a.width,a.height)},getImageDataFromCanvas:function(a){return a.getContext("2d").getImageData(0,0,a.width,a.height).data},getBase64FromCanvas:function(a,b){var d=a.toDataURL("image/"+(b||"png"));return d.substr(d.indexOf(",")+1)}}})();(function(){$.namespace("pskl.utils").Dom={isParent:function(a,b,d){if(a&&b)for(d&&(a=a.parentNode);a;){if(a===b)return!0;a=a.parentNode}return!1},getParentWithData:function(a,b){for(;a;){if(a.dataset&&"undefined"!==typeof a.dataset[b])return a;a=a.parentNode}return null}}})();(function(){$.namespace("pskl.utils").FileUtils={readFile:function(a,b){var d=new FileReader;d.onload=function(a){b(a.target.result)};d.readAsDataURL(a)},downloadAsFile:function(a,b){var d=window.saveAs||navigator.msSaveBlob&&navigator.msSaveBlob.bind(navigator);d?d(b,a):(d=document.createElement("a"),b=window.URL.createObjectURL(b),d.setAttribute("href",b),d.setAttribute("download",a),document.body.appendChild(d),d.click(),document.body.removeChild(d))}}})();(function(){var a={};$.namespace("pskl.utils").FrameUtils={merge:function(b){var a=null;if(b.length){a=b[0].clone();a.getWidth();a.getHeight();for(var c=1;c<b.length;c++)pskl.utils.FrameUtils.mergeFrames_(a,b[c])}return a},mergeFrames_:function(b,a){a.forEachPixel(function(a,d,f){a!=Constants.TRANSPARENT_COLOR&&b.setPixel(d,f,a)})},resize:function(b,a,c,e){b=pskl.utils.FrameUtils.toImage(b);a=pskl.utils.ImageResizer.resize(b,a,c,e);return pskl.utils.FrameUtils.createFromImage(a)},mergePixels:function(b,
|
||||
a,c){b=pskl.utils.FrameUtils.toRgba(b);a=pskl.utils.FrameUtils.toRgba(a);"number"==typeof c&&(b=JSON.parse(JSON.stringify(b)),b.a*=c);c=b.a+a.a*(1-b.a);return"rgba("+((b.r*b.a+a.r*a.a*(1-b.a))/c|0)+","+((b.g*b.a+a.g*a.a*(1-b.a))/c|0)+","+((b.b*b.a+a.b*a.a*(1-b.a))/c|0)+","+c+")"},toRgba:function(b){if(a[b])return a[b];var d;"TRANSPARENT"===b?d={r:0,g:0,b:0,a:0}:-1!=b.indexOf("rgba(")?(d=/rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(1|0\.\d+)\s*\)/.exec(b),d={r:parseInt(d[1],10),g:parseInt(d[2],10),
|
||||
b:parseInt(d[3],10),a:parseFloat(d[4])}):-1!=b.indexOf("rgb(")?(d=/rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(b),d={r:parseInt(d[1],10),g:parseInt(d[2],10),b:parseInt(d[3],10),a:1}):(d=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(b),d={r:parseInt(d[1],16),g:parseInt(d[2],16),b:parseInt(d[3],16),a:1});return a[b]=d},createFromImage:function(a){var d=a.width,c=a.height,e=pskl.CanvasUtils.createCanvas(d,c).getContext("2d");e.drawImage(a,0,0,d,c,0,0,d,c);a=e.getImageData(0,0,d,c).data;return pskl.utils.FrameUtils.createFromImageData(a,
|
||||
d,c)},createFromImageData:function(a,d,c){for(var e=[],f=0;f<d;f++){e[f]=[];for(var g=0;g<c;g++){var h=4*(g*d+f),k=a[h],m=a[h+1],l=a[h+2];e[f][g]=125>a[h+3]?Constants.TRANSPARENT_COLOR:pskl.utils.FrameUtils.rgbToHex(k,m,l)}}return pskl.model.Frame.fromPixelGrid(e)},rgbToHex:function(a,d,c){return"#"+this.componentToHex(a)+this.componentToHex(d)+this.componentToHex(c)},componentToHex:function(a){a=a.toString(16);return 1==a.length?"0"+a:a},toImage:function(a,d,c){c=c||Constants.TRANSPARENT_COLOR;a=
|
||||
new pskl.rendering.CanvasRenderer(a,d||1);a.drawTransparentAs(c);return a.render()}}})();(function(){$.namespace("pskl.utils").ImageResizer={resize:function(a,b,d,c){var e=pskl.CanvasUtils.createCanvas(b,d),f=e.getContext("2d");f.save();c||pskl.CanvasUtils.disableImageSmoothing(e);f.translate(e.width/2,e.height/2);f.scale(b/a.width,d/a.height);f.drawImage(a,-a.width/2,-a.height/2);f.restore();return e},resizeNearestNeighbour:function(a,b,d,c){d=d||0;for(var e=pskl.CanvasUtils.createCanvas(b*a.width,b*a.height),f=e.getContext("2d"),g=pskl.CanvasUtils.getImageDataFromCanvas(a),h={},k=0,
|
||||
m=0,l,n,q=0;q<a.width;q++){l=Math.floor((q+1)*b)-k;for(var p=0;p<a.height;p++){h[p+""]||(h[p+""]=Math.floor((p+1)*b)-m);n=h[p+""];var r=4*(p*a.width+q);f.fillStyle="rgba("+g[r]+","+g[r+1]+","+g[r+2]+","+g[r+3]/255+")";f.fillRect(k,m,l-d,n-d);d&&c&&(f.fillStyle=c,f.fillRect(k+l-d,m,d,n),f.fillRect(k,m+n-d,l,d));m+=n}m=0;k+=l}return e}}})();(function(){$.namespace("pskl.utils").LayerUtils={createFromImage:function(a,b){var d=a.width,c=a.height,e=d/b,f=pskl.CanvasUtils.createCanvas(d,c).getContext("2d");f.drawImage(a,0,0,d,c,0,0,d,c);for(var d=[],g=0;g<b;g++){var h=f.getImageData(e*g,0,e,c).data,h=pskl.utils.FrameUtils.createFromImageData(h,e,c);d.push(h)}return d}}})();(function(){$.namespace("pskl.utils").Math={minmax:function(a,b,d){return Math.max(Math.min(a,d),b)}}})();(function(){$.namespace("pskl").PixelUtils={getRectanglePixels:function(a,b,d,c){a=this.getOrderedRectangleCoordinates(a,b,d,c);b=[];for(d=a.x0;d<=a.x1;d++)for(c=a.y0;c<=a.y1;c++)b.push({col:d,row:c});return b},getBoundRectanglePixels:function(a,b,d,c){a=this.getOrderedRectangleCoordinates(a,b,d,c);b=[];for(d=a.x0;d<=a.x1;d++)b.push({col:d,row:a.y0}),b.push({col:d,row:a.y1});for(d=a.y0;d<=a.y1;d++)b.push({col:a.x0,row:d}),b.push({col:a.x1,row:d});return b},getOrderedRectangleCoordinates:function(a,
|
||||
b,d,c){return{x0:Math.min(a,d),y0:Math.min(b,c),x1:Math.max(a,d),y1:Math.max(b,c)}},getSimilarConnectedPixelsFromFrame:function(a,b,d){a=a.clone();return this.paintSimilarConnectedPixelsFromFrame(a,b,d,"sdfsdfsdf")},paintSimilarConnectedPixelsFromFrame:function(a,b,d,c){var e=[],f=[],g=[-1,0,1,0],h=[0,1,0,-1],k;try{k=a.getPixel(b,d)}catch(m){}if(k!=c){f.push({col:b,row:d});b=0;for(d=a.getWidth()*a.getHeight();0<f.length;){b++;var l=f.pop();a.setPixel(l.col,l.row,c);e.push({col:l.col,row:l.row});for(var n=
|
||||
0;4>n;n++){var q=l.col+h[n],p=l.row+g[n];try{a.containsPixel(q,p)&&a.getPixel(q,p)==k&&f.push({col:q,row:p})}catch(r){}}if(b>10*d){console.log("loop breaker called");break}}return e}},calculateZoomForContainer:function(a,b,d){return this.calculateZoom(a.height(),a.width(),b,d)}}})();(function(){$.namespace("pskl.utils").Template={get:function(a){var b=document.getElementById(a);if(b)return b.innerHTML;console.error("Could not find template for id :",a)},createFromHTML:function(a){var b=document.createElement("div");b.innerHTML=a;return b.children[0]},replace:function(a,b){for(var d in b)if(b.hasOwnProperty(d)){var c=b[d];-1!==d.indexOf(":")&&(!0===c?c=d.split(":")[1]:!1===c&&(c=""));a=a.replace(RegExp("\\{\\{"+d+"\\}\\}","g"),c)}return a}}})();(function(){var a=$.namespace("pskl.utils"),b=navigator.userAgent;a.UserAgent={isIE:/MSIE/i.test(b),isChrome:/Chrome/i.test(b),isFirefox:/Firefox/i.test(b)};a.UserAgent.version=function(){if(pskl.utils.UserAgent.isIE)return parseInt(/MSIE\s?(\d+)/i.exec(b)[1],10);if(pskl.utils.UserAgent.isChrome)return parseInt(/Chrome\/(\d+)/i.exec(b)[1],10);if(pskl.utils.UserAgent.isFirefox)return parseInt(/Firefox\/(\d+)/i.exec(b)[1],10)}()})();(function(){$.namespace("pskl").UserSettings={GRID_WIDTH:"GRID_WIDTH",CANVAS_BACKGROUND:"CANVAS_BACKGROUND",SELECTED_PALETTE:"SELECTED_PALETTE",TILED_PREVIEW:"TILED_PREVIEW",KEY_TO_DEFAULT_VALUE_MAP_:{GRID_WIDTH:0,CANVAS_BACKGROUND:"lowcont-dark-canvas-background",SELECTED_PALETTE:Constants.CURRENT_COLORS_PALETTE_ID,TILED_PREVIEW:!1},cache_:{},get:function(a){this.checkKeyValidity_(a);a in this.cache_||(this.cache_[a]=this.readFromLocalStorage_(a)||this.readFromDefaults_(a));return this.cache_[a]},
|
||||
set:function(a,b){this.checkKeyValidity_(a);this.cache_[a]=b;this.writeToLocalStorage_(a,b);$.publish(Events.USER_SETTINGS_CHANGED,[a,b])},readFromLocalStorage_:function(a){a=window.localStorage[a];"undefined"!=typeof a&&(a=JSON.parse(a));return a},writeToLocalStorage_:function(a,b){window.localStorage[a]=JSON.stringify(b)},readFromDefaults_:function(a){return this.KEY_TO_DEFAULT_VALUE_MAP_[a]},checkKeyValidity_:function(a){a in this.KEY_TO_DEFAULT_VALUE_MAP_||console.log("UserSettings key <"+a+"> not find in supported keys.")}}})();jQuery.namespace=function(){var a=arguments,b=null,d,c,e;for(d=0;d<a.length;d+=1)for(e=a[d].split("."),b=window,c=0;c<e.length;c+=1)b[e[c]]=b[e[c]]||{},b=b[e[c]];return b};"function"!==typeof Function.prototype.bind&&(Function.prototype.bind=function(a){var b=this;return function(){return b.apply(a,arguments)}});
|
||||
(function(){var a=$.namespace("pskl.utils");a.rgbToHex=function(a,d,c){if(255<a||255<d||255<c)throw"Invalid color component";return(a<<16|d<<8|c).toString(16)};a.inherit=function(a,d){a.prototype=Object.create(d.prototype);a.prototype.constructor=a;a.prototype.superclass=d.prototype};a.wrap=function(a,d){for(var c in d)"function"===typeof d[c]&&"undefined"===typeof a[c]&&(a[c]=d[c].bind(d))}})();(function(){var a=$.namespace("pskl.utils.serialization");a.Deserializer=function(a,d){this.layersToLoad_=0;this.data_=a;this.callback_=d;this.piskel_=null};a.Deserializer.deserialize=function(b,d){(b.modelVersion==Constants.MODEL_VERSION?new a.Deserializer(b,d):1==b.modelVersion?new a.backward.Deserializer_v1(b,d):new a.backward.Deserializer_v0(b,d)).deserialize()};a.Deserializer.prototype.deserialize=function(a){var d=this.data_.piskel;a=new pskl.model.piskel.Descriptor(a||"Deserialized piskel",
|
||||
"");this.piskel_=new pskl.model.Piskel(d.width,d.height,a);this.layersToLoad_=d.layers.length;d.expanded?d.layers.forEach(this.loadExpandedLayer.bind(this)):d.layers.forEach(this.deserializeLayer.bind(this))};a.Deserializer.prototype.deserializeLayer=function(a){var d=JSON.parse(a),c=new pskl.model.Layer(d.name);a=d.base64PNG;var e=new Image;e.onload=function(){var a=pskl.utils.LayerUtils.createFromImage(e,d.frameCount);this.addFramesToLayer(a,c)}.bind(this);e.src=a;return c};a.Deserializer.prototype.loadExpandedLayer=
|
||||
function(a){var d=new pskl.model.Layer(a.name);a=a.grids.map(function(a){return pskl.model.Frame.fromPixelGrid(a)});this.addFramesToLayer(a,d);return d};a.Deserializer.prototype.addFramesToLayer=function(a,d){a.forEach(d.addFrame.bind(d));this.piskel_.addLayer(d);this.onLayerLoaded_()};a.Deserializer.prototype.onLayerLoaded_=function(){this.layersToLoad_-=1;0===this.layersToLoad_&&this.callback_(this.piskel_)}})();(function(){$.namespace("pskl.utils").Serializer={serializePiskel:function(a,b){var d=a.getLayers().map(function(a){return pskl.utils.Serializer.serializeLayer(a,b)});return JSON.stringify({modelVersion:Constants.MODEL_VERSION,piskel:{height:a.getHeight(),width:a.getWidth(),layers:d,expanded:b}})},serializeLayer:function(a,b){var d=a.getFrames(),c=new pskl.rendering.FramesheetRenderer(d),e={name:a.getName(),frameCount:d.length};if(b)return e.grids=d.map(function(a){return a.pixels}),e;e.base64PNG=
|
||||
c.renderAsCanvas().toDataURL();return JSON.stringify(e)}}})();(function(){var a=$.namespace("pskl.utils.serialization.backward");a.Deserializer_v0=function(a,d){this.data_=a;this.callback_=d};a.Deserializer_v0.prototype.deserialize=function(){var a=this.data_.map(function(a){return pskl.model.Frame.fromPixelGrid(a)}),d=new pskl.model.piskel.Descriptor("Deserialized piskel",""),a=pskl.model.Layer.fromFrames("Layer 1",a);this.callback_(pskl.model.Piskel.fromLayers([a],d))}})();(function(){var a=$.namespace("pskl.utils.serialization.backward");a.Deserializer_v1=function(a,d){this.callback_=d;this.data_=a};a.Deserializer_v1.prototype.deserialize=function(){var a=this.data_.piskel,d=new pskl.model.piskel.Descriptor("Deserialized piskel",""),c=new pskl.model.Piskel(a.width,a.height,d);a.layers.forEach(function(a){a=this.deserializeLayer(a);c.addLayer(a)}.bind(this));this.callback_(c)};a.Deserializer_v1.prototype.deserializeLayer=function(a){a=JSON.parse(a);var d=new pskl.model.Layer(a.name);
|
||||
a.frames.forEach(function(a){a=this.deserializeFrame(a);d.addFrame(a)}.bind(this));return d};a.Deserializer_v1.prototype.deserializeFrame=function(a){a=JSON.parse(a);return pskl.model.Frame.fromPixelGrid(a)}})();(function(){window.onPiskelReady=function(){var a=document.getElementById("loading-mask");a.style.opacity=0;window.setTimeout(function(){a.parentNode.removeChild(a)},600);pskl.app.init();delete window.pskl_exports;delete window.loadDebugScripts;delete window.done};var a=function(a,b){a=window.pskl&&window.pskl.appEngineToken_?"../"+a:a;var c=window.document.createElement("script");c.setAttribute("src",a);c.setAttribute("onload",b);window.document.body.appendChild(c)},b=function(a){a=window.pskl&&
|
||||
window.pskl.appEngineToken_?"../"+a:a;var b=document.createElement("link");b.setAttribute("href",a);b.setAttribute("rel","stylesheet");b.setAttribute("type","text/css");document.head.appendChild(b)};if(-1!=window.location.href.indexOf("debug")){window.pskl_exports={};var d=0;window.loadNextScript=function(){if(d==window.pskl_exports.scripts.length)window.onPiskelReady();else a(window.pskl_exports.scripts[d],"loadNextScript()"),d++};a("piskel-script-list.js","loadNextScript()");window.loadStyles=function(){for(var a=
|
||||
window.pskl_exports.styles,c=0;c<a.length;c++)b(a[c])};a("piskel-style-list.js","loadStyles()")}else{var c;c=-1!=window.location.href.indexOf("pack")?"js/piskel-packaged.js":"js/piskel-packaged-min.js";b("css/piskel-style-packaged.css");var e=window.setInterval(function(){0===document.querySelectorAll("[data-iframe-loader]").length?(window.clearInterval(e),a(c,"onPiskelReady()")):console.log("waiting for templates to load ....")},100)}})();("undefined"!=typeof exports?exports:pskl_exports).scripts="js/lib/jquery-1.8.0.js js/lib/jquery-ui-1.10.3.custom.js js/lib/pubsub.js js/lib/bootstrap/bootstrap.js js/lib/gif/gif.worker.js js/lib/gif/gif.js js/lib/gif/libgif.js js/lib/jszip/jszip.min.js js/lib/canvastoblob/canvasToBlob.js js/lib/spectrum/spectrum.js js/Constants.js js/Events.js js/utils/core.js js/utils/UserAgent.js js/utils/CanvasUtils.js js/utils/Dom.js js/utils/Math.js js/utils/FileUtils.js js/utils/FrameUtils.js js/utils/LayerUtils.js js/utils/ImageResizer.js js/utils/PixelUtils.js js/utils/Template.js js/utils/UserSettings.js js/utils/serialization/Serializer.js js/utils/serialization/Deserializer.js js/utils/serialization/backward/Deserializer_v0.js js/utils/serialization/backward/Deserializer_v1.js js/rendering/DrawingLoop.js js/model/Frame.js js/model/Layer.js js/model/piskel/Descriptor.js js/model/Piskel.js js/selection/SelectionManager.js js/selection/BaseSelection.js js/selection/RectangularSelection.js js/selection/ShapeSelection.js js/rendering/AbstractRenderer.js js/rendering/CompositeRenderer.js js/rendering/layer/LayersRenderer.js js/rendering/frame/FrameRenderer.js js/rendering/frame/TiledFrameRenderer.js js/rendering/frame/CachedFrameRenderer.js js/rendering/CanvasRenderer.js js/rendering/FramesheetRenderer.js js/rendering/PiskelRenderer.js js/controller/piskel/PiskelController.js js/controller/piskel/PublicPiskelController.js js/controller/CursorCoordinatesController.js js/controller/DrawingController.js js/controller/PreviewFilmController.js js/controller/LayersListController.js js/controller/AnimatedPreviewController.js js/controller/MinimapController.js js/controller/ToolController.js js/controller/PaletteController.js js/controller/PalettesListController.js js/controller/NotificationController.js js/controller/CanvasBackgroundController.js js/controller/settings/ApplicationSettingsController.js js/controller/settings/ResizeController.js js/controller/settings/GifExportController.js js/controller/settings/PngExportController.js js/controller/settings/LocalStorageController.js js/controller/settings/SaveController.js js/controller/settings/ImportController.js js/controller/settings/SettingsController.js js/controller/dialogs/PaletteManagerController.js js/controller/dialogs/DialogsController.js js/service/LocalStorageService.js js/service/GithubStorageService.js js/service/AppEngineStorageService.js js/service/HistoryService.js js/service/SavedStatusService.js js/service/keyboard/ShortcutService.js js/service/keyboard/KeycodeTranslator.js js/service/keyboard/CheatsheetService.js js/service/ImageUploadService.js js/service/CurrentColorsService.js js/drawingtools/BaseTool.js js/drawingtools/ShapeTool.js js/drawingtools/SimplePen.js js/drawingtools/VerticalMirrorPen.js js/drawingtools/Eraser.js js/drawingtools/Stroke.js js/drawingtools/PaintBucket.js js/drawingtools/Rectangle.js js/drawingtools/Circle.js js/drawingtools/Move.js js/drawingtools/selectiontools/BaseSelect.js js/drawingtools/selectiontools/RectangleSelect.js js/drawingtools/selectiontools/ShapeSelect.js js/drawingtools/ColorPicker.js js/app.js".split(" ");
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
}
|
||||
|
||||
.tool-icon {
|
||||
position : relative;
|
||||
cursor : pointer;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
|
|
@ -19,10 +20,16 @@
|
|||
.tool-icon.selected {
|
||||
cursor: default;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.tool-icon.selected:before {
|
||||
content:"";
|
||||
position : absolute;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
border: 3px solid gold;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
background-position: 9px 9px;
|
||||
}
|
||||
|
||||
.tool-icon:hover {
|
||||
|
|
@ -42,10 +49,6 @@
|
|||
background-size: 38px 27px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-vertical-mirror-pen.selected {
|
||||
background-position: -3px 7px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-paint-bucket {
|
||||
background-image: url(../img/tools/paintbucket.png);
|
||||
}
|
||||
|
|
@ -79,15 +82,16 @@
|
|||
background-size: 24px 20px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-rectangle.selected,
|
||||
.tool-icon.tool-rectangle-select.selected {
|
||||
background-position: 9px 11px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-shape-select {
|
||||
background-image: url(../img/tools/magicwand.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-lighten {
|
||||
background-image: url(../img/tools/lighten.png);
|
||||
background-size: 30px 30px;
|
||||
background-position: 8px 8px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-colorpicker {
|
||||
background-image: url(../img/tools/eyedropper.png);
|
||||
background-size: 23px 23px;
|
||||
|
|
@ -105,7 +109,8 @@
|
|||
cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
|
||||
}
|
||||
|
||||
.tool-pen .drawing-canvas-container:hover {
|
||||
.tool-pen .drawing-canvas-container:hover,
|
||||
.tool-lighten .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
src/img/tools/lighten.png
Normal file
BIN
src/img/tools/lighten.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -17,6 +17,7 @@
|
|||
toDescriptor('move', 'M', new pskl.drawingtools.Move()),
|
||||
toDescriptor('rectangleSelect', 'S', new pskl.drawingtools.RectangleSelect()),
|
||||
toDescriptor('shapeSelect', 'Z', new pskl.drawingtools.ShapeSelect()),
|
||||
toDescriptor('lighten', 'U', new pskl.drawingtools.Lighten()),
|
||||
toDescriptor('colorPicker', 'O', new pskl.drawingtools.ColorPicker())
|
||||
];
|
||||
|
||||
|
|
|
|||
63
src/js/drawingtools/Lighten.js
Normal file
63
src/js/drawingtools/Lighten.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/**
|
||||
* @provide pskl.drawingtools.Eraser
|
||||
*
|
||||
* @require Constants
|
||||
* @require pskl.utils
|
||||
*/
|
||||
(function() {
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.Lighten = function() {
|
||||
this.superclass.constructor.call(this);
|
||||
this.toolId = "tool-lighten";
|
||||
this.helpText = "Lighten / Darken";
|
||||
this.step = 3;
|
||||
this.resetUsedPixels_();
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Lighten, ns.SimplePen);
|
||||
|
||||
ns.Lighten.prototype.resetUsedPixels_ = function() {
|
||||
this.usedPixels_ = {
|
||||
darken : {},
|
||||
lighten : {}
|
||||
};
|
||||
};
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Lighten.prototype.applyToolAt = function(col, row, color, frame, overlay, event, mouseButton) {
|
||||
var isDarken = event.ctrlKey || event.cmdKey;
|
||||
var isSinglePass = event.shiftKey;
|
||||
|
||||
var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten;
|
||||
|
||||
var key = col+'-'+row;
|
||||
if (isSinglePass && usedPixels[key]) {
|
||||
return;
|
||||
}
|
||||
|
||||
var step = isSinglePass ? this.step * 2 : this.step;
|
||||
var pixelColor = frame.getPixel(col, row);
|
||||
if (pixelColor === Constants.TRANSPARENT_COLOR) {
|
||||
pixelColor = isDarken ? 'white' : 'black';
|
||||
}
|
||||
if (isDarken) {
|
||||
color = window.tinycolor.darken(pixelColor, step);
|
||||
} else {
|
||||
color = window.tinycolor.lighten(pixelColor, step);
|
||||
}
|
||||
|
||||
if (color) {
|
||||
usedPixels[key] = true;
|
||||
this.superclass.applyToolAt.call(this, col, row, color.toRgbString(), frame, overlay, event);
|
||||
}
|
||||
};
|
||||
|
||||
ns.Lighten.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
|
||||
this.resetUsedPixels_();
|
||||
$.publish(Events.PISKEL_SAVE_STATE, {
|
||||
type : pskl.service.HistoryService.SNAPSHOT
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
}
|
||||
else {
|
||||
this.applyToolAt(col, row, color, frame, overlay);
|
||||
this.applyToolAt(col, row, color, frame, overlay, event);
|
||||
}
|
||||
|
||||
this.previousCol = col;
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@
|
|||
"js/drawingtools/BaseTool.js",
|
||||
"js/drawingtools/ShapeTool.js",
|
||||
"js/drawingtools/SimplePen.js",
|
||||
"js/drawingtools/Lighten.js",
|
||||
"js/drawingtools/VerticalMirrorPen.js",
|
||||
"js/drawingtools/Eraser.js",
|
||||
"js/drawingtools/Stroke.js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue