diff --git a/css/style.css b/css/style.css index 9889c932..fc983431 100644 --- a/css/style.css +++ b/css/style.css @@ -265,6 +265,7 @@ ul, li { left: 40%; background-color: #F9EDBE; padding: 7px 22px; + padding-right: 42px; border-top-left-radius: 7px; border-top-right-radius: 7px; font-family: ‘Arial Black’, Gadget, sans-serif; @@ -276,6 +277,20 @@ ul, li { z-index: 10000; } +.user-message .close { + position: absolute; + top: 3px; + right: 6px; + color: gray; + font-weight: bold; + cursor: pointer; + font-size: 18px; +} + +.user-message .close:hover { + color: black; +} + /* Force apparition of scrollbars on leopard */ ::-webkit-scrollbar { -webkit-appearance: none; diff --git a/index.html b/index.html index 648a11ba..0e08365e 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@
-
@@ -75,7 +75,9 @@ - + + + diff --git a/js/Constants.js b/js/Constants.js index 38253dc7..f7c397dd 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -1,3 +1,6 @@ var Constants = { - TRANSPARENT_COLOR : "TRANSPARENT" + + DEFAULT_PEN_COLOR : '#000000', + TRANSPARENT_COLOR : "TRANSPARENT", + PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com' }; \ No newline at end of file diff --git a/js/Events.js b/js/Events.js index a5cbfd7f..abcee5dc 100644 --- a/js/Events.js +++ b/js/Events.js @@ -1,6 +1,26 @@ Events = { TOOL_SELECTED : "TOOL_SELECTED", + COLOR_SELECTED: "COLOR_SELECTED", + COLOR_USED: "COLOR_USED", + + /** + * When this event is emitted, a request is sent to the localstorage + * Service to save the current framesheet. The storage service + * may not immediately store data (internal throttling of requests). + */ + LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST", + CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED", - CANVAS_RIGHT_CLICK_RELEASED: "CANVAS_RIGHT_CLICK_RELEASED" + CANVAS_RIGHT_CLICK_RELEASED: "CANVAS_RIGHT_CLICK_RELEASED", + + /** + * Event to requset a refresh of the display. + * A bit overkill but, it's just workaround in our current drawing system. + * TODO: Remove or rework when redraw system is refactored. + */ + REFRESH: "REFRESH", + + SHOW_NOTIFICATION: "SHOW_NOTIFICATION", + HIDE_NOTIFICATION: "HIDE_NOTIFICATION" }; \ No newline at end of file diff --git a/js/LocalStorageService.js b/js/LocalStorageService.js new file mode 100644 index 00000000..d697adf7 --- /dev/null +++ b/js/LocalStorageService.js @@ -0,0 +1,95 @@ +/* + * @provide pskl.LocalStrageService + * + * @require Constants + * @require Events + */ +$.namespace("pskl"); + +pskl.LocalStorageService = (function() { + + var frameSheet_; + + /** + * @private + */ + var localStorageThrottler_ = null; + + /** + * @private + */ + var persistToLocalStorageRequest_ = function() { + // Persist to localStorage when drawing. We throttle localStorage accesses + // for high frequency drawing (eg mousemove). + if(localStorageThrottler_ != null) { + window.clearTimeout(localStorageThrottler_); + } + localStorageThrottler_ = window.setTimeout(function() { + persistToLocalStorage_(); + localStorageThrottler_ = null; + }, 1000); + }; + + /** + * @private + */ + var persistToLocalStorage_ = function() { + console.log('[LocalStorage service]: Snapshot stored') + window.localStorage['snapShot'] = frameSheet_.serialize(); + }; + + /** + * @private + */ + var restoreFromLocalStorage_ = function() { + frameSheet_.deserialize(window.localStorage['snapShot']); + // Model updated, redraw everything: + $.publish(Events.REFRESH); + }; + + /** + * @private + */ + var cleanLocalStorage_ = function() { + console.log('[LocalStorage service]: Snapshot removed') + delete window.localStorage['snapShot']; + }; + + return { + init: function(frameSheet) { + + if(frameSheet == undefined) { + throw "Bad LocalStorageService initialization: " + } + frameSheet_ = frameSheet; + + $.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_); + }, + + // TODO(vincz): Find a good place to put this UI rendering, a service should not render UI. + displayRestoreNotification: function() { + if(window.localStorage && window.localStorage['snapShot']) { + var reloadLink = "reload"; + var discardLink = "discard"; + var content = "Non saved version found. " + reloadLink + " or " + discardLink; + + $.publish(Events.SHOW_NOTIFICATION, [{ + "content": content, + "behavior": function(rootNode) { + rootNode = $(rootNode); + rootNode.click(function(evt) { + var target = $(evt.target); + if(target.hasClass("localstorage-restore")) { + restoreFromLocalStorage_(); + } + else if (target.hasClass("localstorage-discard")) { + cleanLocalStorage_(); + } + $.publish(Events.HIDE_NOTIFICATION); + }); + } + }]); + } + } + }; +})(); \ No newline at end of file diff --git a/js/Notification.js b/js/Notification.js new file mode 100644 index 00000000..2ff6908f --- /dev/null +++ b/js/Notification.js @@ -0,0 +1,39 @@ +/* + * @provide pskl.NotificationService + * + */ +$.namespace("pskl"); + +pskl.NotificationService = (function() { + + /** + * @private + */ + var displayMessage_ = function (evt, messageInfo) { + var message = document.createElement('div'); + message.id = "user-message"; + message.className = "user-message"; + message.innerHTML = messageInfo.content; + message.innerHTML = message.innerHTML + "
x
"; + document.body.appendChild(message); + $(message).find(".close").click(removeMessage_); + if(messageInfo.behavior) messageInfo.behavior(message); + }; + + /** + * @private + */ + var removeMessage_ = function (evt) { + var message = $("#user-message"); + if (message.length) { + message.remove(); + } + }; + + return { + init: function() { + $.subscribe(Events.SHOW_NOTIFICATION, displayMessage_); + $.subscribe(Events.HIDE_NOTIFICATION, removeMessage_); + } + }; +})(); diff --git a/js/ToolSelector.js b/js/ToolSelector.js index 11d47765..5b630c59 100644 --- a/js/ToolSelector.js +++ b/js/ToolSelector.js @@ -5,9 +5,12 @@ * @require Events * @require pskl.drawingtools */ +$.namespace("pskl"); pskl.ToolSelector = (function() { + var paletteColors = []; + var toolInstances = { "simplePen" : new pskl.drawingtools.SimplePen(), "eraser" : new pskl.drawingtools.Eraser(), @@ -19,7 +22,6 @@ pskl.ToolSelector = (function() { var previousSelectedTool = toolInstances.simplePen; var selectTool_ = function(tool) { - var maincontainer = $("body"); var previousSelectedToolClass = maincontainer.data("selected-tool-class"); if(previousSelectedToolClass) { @@ -46,6 +48,9 @@ pskl.ToolSelector = (function() { $.publish(Events.TOOL_SELECTED, [tool]); }; + /** + * @private + */ var onToolIconClicked_ = function(evt) { var target = $(evt.target); var clickedTool = target.closest(".tool-icon"); @@ -63,8 +68,76 @@ pskl.ToolSelector = (function() { } }; + /** + * @private + */ + var onPickerChange_ = function(evt) { + var inputPicker = $(evt.target); + $.publish(Events.COLOR_SELECTED, [inputPicker.val()]); + }; + + /** + * @private + */ + var addColorToPalette_ = function (color) { + if (paletteColors.indexOf(color) == -1) { + var paletteEl = $("#palette"); + var colorEl = document.createElement("li"); + colorEl.className = "palette-color"; + colorEl.setAttribute("data-color", color); + colorEl.setAttribute("title", color); + colorEl.style.background = color; + paletteEl[0].appendChild(colorEl); + paletteColors.push(color); + } + }, + + /** + * @private + */ + onPaletteColorClick_ = function (event) { + var selectedColor = $(event.target).data("color"); + var colorPicker = $('#color-picker'); + if (selectedColor == Constants.TRANSPARENT_COLOR) { + // We can set the current palette color to transparent. + // You can then combine this transparent color with an advanced + // tool for customized deletions. + // Eg: bucket + transparent: Delete a colored area + // Stroke + transparent: hollow out the equivalent of a stroke + + // The colorpicker can't be set to a transparent state. + // We set its background to white and insert the + // string "TRANSPARENT" to mimic this state: + colorPicker[0].color.fromString("#fff"); + colorPicker.val("TRANSPARENT"); + } else { + colorPicker[0].color.fromString(selectedColor); + } + $.publish(Events.COLOR_SELECTED, [selectedColor]) + }; + return { init: function() { + + // Initialize tool: + // Set SimplePen as default selected tool: + selectTool_(toolInstances.simplePen); + // Activate listener on tool panel: + $("#tools-container").click(onToolIconClicked_); + + // Initialize colorpicker: + var colorPicker = $('#color-picker'); + colorPicker.val(Constants.DEFAULT_PEN_COLOR); + colorPicker.change(onPickerChange_); + + // Initialize palette: + $("#palette").click(onPaletteColorClick_); + $.subscribe(Events.COLOR_USED, function(evt, color) { + addColorToPalette_(color); + }); + + + // Special right click handlers (select the eraser tool) $.subscribe(Events.CANVAS_RIGHT_CLICKED, function() { previousSelectedTool = currentSelectedTool; currentSelectedTool = toolInstances.eraser; @@ -75,12 +148,9 @@ pskl.ToolSelector = (function() { currentSelectedTool = previousSelectedTool; $.publish(Events.TOOL_SELECTED, [currentSelectedTool]); }); - - // Set SimplePen as default selected tool: - selectTool_(toolInstances.simplePen); - - // Activate listener on tool panel: - $("#tools-container").click(onToolIconClicked_); } }; -})() \ No newline at end of file +})(); + + + diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index e4a71678..dd5fd2ec 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -21,8 +21,8 @@ context.clearRect(col * dpi, row * dpi, dpi, dpi); } else { - // TODO(vincz): Remove this global access to piskel when Palette component is created. - piskel.addColorToPalette(color); + // TODO(vincz): Found a better design to update the palette, it's called too frequently. + $.publish(Events.COLOR_USED, [color]); context.fillStyle = color; context.fillRect(col * dpi, row * dpi, dpi, dpi); } diff --git a/js/drawingtools/Eraser.js b/js/drawingtools/Eraser.js index cd2cdd79..7cda1fc4 100644 --- a/js/drawingtools/Eraser.js +++ b/js/drawingtools/Eraser.js @@ -20,7 +20,7 @@ // Change model: frame[col][row] = Constants.TRANSPARENT_COLOR; - + // Draw on canvas: // TODO: Remove that when we have the centralized redraw loop this.drawPixelInCanvas(col, row, canvas, Constants.TRANSPARENT_COLOR, dpi); @@ -33,4 +33,9 @@ this.applyToolAt(col, row, frame, color, canvas, dpi); }; + ns.Eraser.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) { + // TODO: Create a afterRelease event hook or put that deep in the model + $.publish(Events.FRAMESHEET_UPDATED); + }; + })(); \ No newline at end of file diff --git a/js/drawingtools/PaintBucket.js b/js/drawingtools/PaintBucket.js index ed016798..f953cb43 100644 --- a/js/drawingtools/PaintBucket.js +++ b/js/drawingtools/PaintBucket.js @@ -21,12 +21,18 @@ var targetColor = pskl.utils.normalizeColor(frame[col][row]); //this.recursiveFloodFill_(frame, col, row, targetColor, color); this.queueLinearFloodFill_(frame, col, row, targetColor, color); - + $.publish(Events.FRAMESHEET_UPDATED); + // Draw in canvas: // TODO: Remove that when we have the centralized redraw loop this.drawFrameInCanvas(frame, canvas, dpi); }; + ns.PaintBucket.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) { + // TODO: Create a afterRelease event hook or put that deep in the model + $.publish(Events.FRAMESHEET_UPDATED); + }; + /** * Flood-fill (node, target-color, replacement-color): * 1. Set Q to the empty queue. diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js index d139ee04..c955aac1 100644 --- a/js/drawingtools/Rectangle.js +++ b/js/drawingtools/Rectangle.js @@ -81,9 +81,12 @@ // TODO: Remove that when we have the centralized redraw loop this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi); } - + // For now, we are done with the stroke tool and don't need an overlay anymore: this.removeCanvasOverlays(); + + // TODO: Create a afterRelease event hook or put that deep in the model + $.publish(Events.FRAMESHEET_UPDATED); }; /** diff --git a/js/drawingtools/SimplePen.js b/js/drawingtools/SimplePen.js index a7d4f45c..8dbeb222 100644 --- a/js/drawingtools/SimplePen.js +++ b/js/drawingtools/SimplePen.js @@ -52,4 +52,9 @@ this.previousCol = col; this.previousRow = row; }; + + ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) { + // TODO: Create a afterRelease event hook or out that deep in the model + $.publish(Events.FRAMESHEET_UPDATED); + }; })(); diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js index 6702a2c8..89d5ae21 100644 --- a/js/drawingtools/Stroke.js +++ b/js/drawingtools/Stroke.js @@ -97,6 +97,9 @@ // For now, we are done with the stroke tool and don't need an overlay anymore: this.removeCanvasOverlays(); + + // TODO: Create a afterRelease event hook or out that deep in the model + $.publish(Events.FRAMESHEET_UPDATED); }; })(); diff --git a/js/frameSheetModel.js b/js/frameSheetModel.js index 20f2544c..1e8a18f1 100644 --- a/js/frameSheetModel.js +++ b/js/frameSheetModel.js @@ -1,5 +1,7 @@ -var FrameSheetModel = (function() { +$.namespace("pskl"); + +pskl.FrameSheetModel = (function() { var inst; var frames = []; diff --git a/js/lib/pubsub.js b/js/lib/pubsub.js index f6f0b168..b1569894 100644 --- a/js/lib/pubsub.js +++ b/js/lib/pubsub.js @@ -7,7 +7,7 @@ var o = $({}); $.subscribe = function() { - console.log("SUBSCRIBE: " + arguments[0]); + //console.log("SUBSCRIBE: " + arguments[0]); o.on.apply(o, arguments); }; @@ -16,7 +16,7 @@ }; $.publish = function() { - console.log("PUBLISH: " + arguments[0]); + //console.log("PUBLISH: " + arguments[0]); o.trigger.apply(o, arguments); }; diff --git a/js/piskel.js b/js/piskel.js index f3310022..7852ee35 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -5,11 +5,11 @@ $.namespace("pskl"); (function () { - var frameSheet, - // Constants: - DEFAULT_PEN_COLOR = '#000000', - PISKEL_SERVICE_URL = 'http://2.piskel-app.appspot.com', + /** + * FrameSheetModel instance. + */ + var frameSheet, // Temporary zoom implementation to easily get bigger canvases to // see how good perform critical algorithms on big canvas. @@ -33,15 +33,13 @@ $.namespace("pskl"); drawingAreaContainer, drawingAreaCanvas, previewCanvas, - paletteEl, - + // States: isClicked = false, isRightClicked = false, activeFrameIndex = -1, animIndex = 0, - penColor = DEFAULT_PEN_COLOR, - paletteColors = [], + penColor = Constants.DEFAULT_PEN_COLOR, currentFrame = null; currentToolBehavior = null, previousMousemoveTime = 0, @@ -53,25 +51,29 @@ $.namespace("pskl"); } else { return "#" + color; } - }, - - // setTimeout/setInterval references: - localStorageThrottler = null - ; - + }; + /** + * Main application controller + */ var piskel = { + init : function () { - frameSheet = FrameSheetModel.getInstance(framePixelWidth, framePixelHeight); + frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight); frameSheet.addEmptyFrame(); this.setActiveFrame(0); + pskl.NotificationService.init(); + pskl.LocalStorageService.init(frameSheet); + + // TODO: Add comments var frameId = this.getFrameIdFromUrl(); if (frameId) { - this.displayMessage("Loading animation with id : [" + frameId + "]"); + $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + frameId + "]"}]); this.loadFramesheetFromService(frameId); } else { this.finishInit(); + pskl.LocalStorageService.displayRestoreNotification(); } }, @@ -82,15 +84,22 @@ $.namespace("pskl"); currentToolBehavior = toolBehavior; }); - this.initPalette(); - this.initDrawingArea(); - this.initPreviewSlideshow(); - this.initAnimationPreview(); - this.initColorPicker(); - this.initLocalStorageBackup(); - pskl.ToolSelector.init(); + $.subscribe(Events.COLOR_SELECTED, function(evt, color) { + console.log("Color selected: ", color); + penColor = color; + }); + $.subscribe(Events.REFRESH, function() { + piskel.setActiveFrameAndRedraw(0); + }); + + // TODO: Move this into their service or behavior files: + this.initDrawingArea(); + this.initPreviewSlideshow(); + this.initAnimationPreview(); this.startAnimation(); + + pskl.ToolSelector.init(); }, getFrameIdFromUrl : function() { @@ -102,73 +111,23 @@ $.namespace("pskl"); loadFramesheetFromService : function (frameId) { var xhr = new XMLHttpRequest(); - xhr.open('GET', PISKEL_SERVICE_URL + '/get?l=' + frameId, true); + xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true); xhr.responseType = 'text'; xhr.onload = function(e) { frameSheet.deserialize(this.responseText); - piskel.removeMessage(); + $.publish(Events.HIDE_NOTIFICATION); piskel.finishInit(); }; xhr.onerror = function () { - piskel.removeMessage(); + $.publish(Events.HIDE_NOTIFICATION); piskel.finishInit(); }; xhr.send(); }, - initLocalStorageBackup: function() { - if(window.localStorage && window.localStorage['snapShot']) { - var reloadLink = "reload"; - var discardLink = "discard"; - this.displayMessage("Non saved version found. " + reloadLink + " or " + discardLink); - } - }, - - displayMessage : function (content) { - var message = document.createElement('div'); - message.id = "user-message"; - message.className = "user-message"; - message.innerHTML = content; - message.onclick = this.removeMessage; - document.body.appendChild(message); - }, - - removeMessage : function () { - var message = $("#user-message"); - if (message.length) { - message.remove(); - } - }, - - persistToLocalStorageRequest: function() { - // Persist to localStorage when drawing. We throttle localStorage accesses - // for high frequency drawing (eg mousemove). - if(localStorageThrottler != null) { - window.clearTimeout(localStorageThrottler); - } - localStorageThrottler = window.setTimeout(function() { - piskel.persistToLocalStorage(); - localStorageThrottler = null; - }, 1000); - }, - - persistToLocalStorage: function() { - console.log('persited') - window.localStorage['snapShot'] = frameSheet.serialize(); - }, - - restoreFromLocalStorage: function() { - frameSheet.deserialize(window.localStorage['snapShot']); - this.setActiveFrameAndRedraw(0); - }, - - cleanLocalStorage: function() { - delete window.localStorage['snapShot']; - }, - setActiveFrame: function(index) { activeFrameIndex = index; currentFrame = frameSheet.getFrameByIndex(activeFrameIndex) @@ -194,33 +153,6 @@ $.namespace("pskl"); return activeFrameIndex; }, - initColorPicker: function() { - this.colorPicker = $('#color-picker'); - this.colorPicker.val(DEFAULT_PEN_COLOR); - this.colorPicker.change(this.onPickerChange.bind(this)); - }, - - onPickerChange : function(evt) { - var inputPicker = $(evt.target); - penColor = _normalizeColor(inputPicker.val()); - }, - - initPalette : function (color) { - paletteEl = $('#palette')[0]; - }, - - addColorToPalette : function (color) { - if (color && color != Constants.TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) { - var colorEl = document.createElement("li"); - colorEl.className = "palette-color"; - colorEl.setAttribute("data-color", color); - colorEl.setAttribute("title", color); - colorEl.style.background = color; - paletteEl.appendChild(colorEl); - paletteColors.push(color); - } - }, - initDrawingArea : function() { drawingAreaContainer = $('#drawing-canvas-container')[0]; @@ -394,8 +326,8 @@ $.namespace("pskl"); penColor, drawingAreaCanvas, drawingCanvasDpi); - - piskel.persistToLocalStorageRequest(); + + $.publish(Events.LOCALSTORAGE_REQUEST); }, onCanvasMousemove : function (event) { @@ -417,7 +349,7 @@ $.namespace("pskl"); // TODO(vincz): Find a way to move that to the model instead of being at the interaction level. // Eg when drawing, it may make sense to have it here. However for a non drawing tool, // you don't need to draw anything when mousemoving and you request useless localStorage. - piskel.persistToLocalStorageRequest(); + $.publish(Events.LOCALSTORAGE_REQUEST); } previousMousemoveTime = currentTime; } @@ -477,28 +409,6 @@ $.namespace("pskl"); return false; }, - onPaletteClick : function (event) { - var color = $(event.target).data("color"); - var colorPicker = $('#color-picker'); - if (color == "TRANSPARENT") { - // We can set the current palette color to transparent. - // You can then combine this transparent color with an advanced - // tool for customized deletions. - // Eg: bucket + transparent: Delete a colored area - // Stroke + transparent: hollow out the equivalent of a stroke - penColor = Constants.TRANSPARENT_COLOR; - - // The colorpicker can't be set to a transparent state. - // We set its background to white and insert the - // string "TRANSPARENT" to mimic this state: - colorPicker[0].color.fromString("#fff"); - colorPicker.val("TRANSPARENT"); - } else if (null !== color) { - colorPicker[0].color.fromString(color); - penColor = color; - } - }, - getRelativeCoordinates : function (x, y) { var canvasRect = drawingAreaCanvas.getBoundingClientRect(); return { @@ -518,11 +428,12 @@ $.namespace("pskl"); // TODO(julz): Create package ? storeSheet : function (event) { + // TODO Refactor using jquery ? var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('framesheet_content', frameSheet.serialize()); formData.append('fps_speed', $('#preview-fps').val()); - xhr.open('POST', PISKEL_SERVICE_URL + "/store", true); + xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true); xhr.onload = function(e) { if (this.status == 200) { var baseUrl = window.location.href.replace(window.location.search, ""); @@ -541,4 +452,4 @@ $.namespace("pskl"); window.piskel = piskel; piskel.init(); -})(function(id){return document.getElementById(id)}); +})();