From b11b16b427ce4d69dd333769e89f889b95aab9cf Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 6 Dec 2013 18:04:04 +0100 Subject: [PATCH 1/6] initial --- css/tools.css | 12 +++++++---- index.html | 1 + js/app.js | 1 + js/controller/settings/SaveController.js | 18 +++++++++++++++++ js/controller/settings/SettingsController.js | 4 ++++ js/model/Piskel.js | 15 ++++++++++++++ js/model/PiskelDescriptor.js | 0 piskel-script-list.js | 1 + templates/settings.html | 21 +++++++------------- templates/settings/save.html | 16 +++++++++++++++ 10 files changed, 71 insertions(+), 18 deletions(-) create mode 100644 js/controller/settings/SaveController.js create mode 100644 js/model/PiskelDescriptor.js create mode 100644 templates/settings/save.html diff --git a/css/tools.css b/css/tools.css index f0a69e10..fee6ca36 100644 --- a/css/tools.css +++ b/css/tools.css @@ -19,8 +19,10 @@ .tool-icon.selected { cursor: default; background-color: #444; - border: 1px gold solid; - margin: 0; + border: 3px solid gold; + box-sizing: border-box; + -moz-box-sizing: border-box; + background-position: 9px 9px; } .tool-icon:hover { @@ -64,7 +66,6 @@ .tool-icon.tool-move { background-image: url(../img/tools/hand.png); - background-position: 12px 12px; background-size: 24px 24px; } @@ -74,13 +75,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-colorpicker { background-image: url(../img/tools/eyedropper.png); - background-position: 12px 12px; background-size: 23px 23px; } diff --git a/index.html b/index.html index f7ff5b04..69bbc344 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@ + diff --git a/js/app.js b/js/app.js index 6ddccc21..f9d43a46 100644 --- a/js/app.js +++ b/js/app.js @@ -15,6 +15,7 @@ var size = this.readSizeFromURL_(); var piskel = new pskl.model.Piskel(size.width, size.height); + piskel.setDescriptor("New Piskel", "Some text ..."); var layer = new pskl.model.Layer("Layer 1"); var frame = new pskl.model.Frame(size.width, size.height); diff --git a/js/controller/settings/SaveController.js b/js/controller/settings/SaveController.js new file mode 100644 index 00000000..11b330cb --- /dev/null +++ b/js/controller/settings/SaveController.js @@ -0,0 +1,18 @@ +(function () { + var ns = $.namespace("pskl.controller.settings"); + + ns.SaveController = function (piskelController) { + this.piskelController = piskelController; + }; + + /** + * @public + */ + ns.SaveController.prototype.init = function () { + this.titleInput = document.getElementById("save-title"); + this.descriptionInput = document.getElementById("save-description"); + + this.titleInput.value = this.piskelController.piskel.getDescriptor().name; + this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description; + }; +})(); \ No newline at end of file diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js index 708b3fa1..10db6890 100644 --- a/js/controller/settings/SettingsController.js +++ b/js/controller/settings/SettingsController.js @@ -13,6 +13,10 @@ 'import' : { template : 'templates/settings/import.html', controller : ns.ImportController + }, + 'save' : { + template : 'templates/settings/save.html', + controller : ns.SaveController } }; diff --git a/js/model/Piskel.js b/js/model/Piskel.js index 77e7f261..11f520d7 100644 --- a/js/model/Piskel.js +++ b/js/model/Piskel.js @@ -5,6 +5,8 @@ * @constructor * @param {Number} width * @param {Number} height + * @param {String} name + * @param {String} description */ ns.Piskel = function (width, height) { if (width && height) { @@ -16,6 +18,8 @@ /** @type {Number} */ this.height = height; + + this.descriptor = null; } else { throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ","); } @@ -96,4 +100,15 @@ this.layers.splice(index, 1); }; + ns.Piskel.prototype.getDescriptor = function () { + return this.descriptor; + }; + + ns.Piskel.prototype.setDescriptor = function (name, desc) { + this.descriptor = { + name : name, + description : desc + }; + }; + })(); \ No newline at end of file diff --git a/js/model/PiskelDescriptor.js b/js/model/PiskelDescriptor.js new file mode 100644 index 00000000..e69de29b diff --git a/piskel-script-list.js b/piskel-script-list.js index b4e54c12..cd7651f5 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -69,6 +69,7 @@ exports.scripts = [ // Settings sub-controllers "js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/GifExportController.js", + "js/controller/settings/SaveController.js", "js/controller/settings/ImportController.js", // Settings controller "js/controller/settings/SettingsController.js", diff --git a/templates/settings.html b/templates/settings.html index efb455eb..72c80ccd 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -1,4 +1,11 @@
+
+
+
- - -
-
-
+
Save
+
+
+
+ +
+ +
+ +
+ + +
+
+
\ No newline at end of file From 8b6958bf0b0ee77b1b575dc38432e79508499653 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Tue, 10 Dec 2013 21:22:53 +0100 Subject: [PATCH 2/6] feature:save-panel : reuse textfield css --- css/forms.css | 3 +++ css/settings.css | 2 +- templates/settings/save.html | 4 ++-- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/css/forms.css b/css/forms.css index 8cc1dd53..2d364327 100644 --- a/css/forms.css +++ b/css/forms.css @@ -4,6 +4,9 @@ border-radius : 2px; padding : 3px 10px; color : white; + + box-sizing:border-box; + -moz-box-sizing:border-box; } .textfield[disabled=disabled] { diff --git a/css/settings.css b/css/settings.css index 9d147179..a07be5b4 100644 --- a/css/settings.css +++ b/css/settings.css @@ -152,7 +152,7 @@ } .import-resize-field { - width: 30px; + width: 50px; margin-right: 8px; text-align: right; } diff --git a/templates/settings/save.html b/templates/settings/save.html index 1e979ff7..b8a6b324 100644 --- a/templates/settings/save.html +++ b/templates/settings/save.html @@ -5,11 +5,11 @@
- +
- +
From b77f7057d7cc6992d0d3a4dfcd001444db028813 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Tue, 10 Dec 2013 21:25:36 +0100 Subject: [PATCH 3/6] save-panel : added piskel descriptor --- css/forms.css | 4 +++ css/settings.css | 8 +++++ js/app.js | 27 +++++++-------- js/controller/settings/ImportController.js | 4 ++- js/controller/settings/SaveController.js | 12 ++++--- js/model/Piskel.js | 17 ++++----- js/model/PiskelDescriptor.js | 0 js/model/piskel/Descriptor.js | 8 +++++ js/rendering/DrawingLoop.js | 6 +++- js/service/HistoryService.js | 8 ++++- js/service/LocalStorageService.js | 1 + js/service/keyboard/ShortcutService.js | 40 +++++++++++++--------- js/utils/serialization/Deserializer.js | 4 ++- piskel-script-list.js | 1 + templates/settings/save.html | 19 ++++++---- 15 files changed, 103 insertions(+), 56 deletions(-) delete mode 100644 js/model/PiskelDescriptor.js create mode 100644 js/model/piskel/Descriptor.js diff --git a/css/forms.css b/css/forms.css index 8cc1dd53..96873c88 100644 --- a/css/forms.css +++ b/css/forms.css @@ -1,3 +1,7 @@ +.row { + display: block; +} + .textfield { background : black; border : 1px solid #888; diff --git a/css/settings.css b/css/settings.css index 9d147179..648cce73 100644 --- a/css/settings.css +++ b/css/settings.css @@ -51,6 +51,10 @@ text-shadow: 1px 1px #000; } +.settings-section .button { + margin: 0; +} + .settings-title { margin-top: 20px; margin-bottom: 10px; @@ -61,6 +65,10 @@ .settings-item {} +.settings-form-section { + margin-bottom: 10px; +} + .background-picker-wrapper { overflow: hidden; padding: 10px 5px 20px 5px; diff --git a/js/app.js b/js/app.js index f9d43a46..ea3c3ea0 100644 --- a/js/app.js +++ b/js/app.js @@ -14,8 +14,9 @@ this.shortcutService.init(); var size = this.readSizeFromURL_(); - var piskel = new pskl.model.Piskel(size.width, size.height); - piskel.setDescriptor("New Piskel", "Some text ..."); + + var descriptor = new pskl.model.piskel.Descriptor('New Piskel', ''); + var piskel = new pskl.model.Piskel(size.width, size.height, descriptor); var layer = new pskl.model.Layer("Layer 1"); var frame = new pskl.model.Frame(size.width, size.height); @@ -65,7 +66,6 @@ this.imageUploadService = new pskl.service.ImageUploadService(); this.imageUploadService.init(); - this.cheatsheetService = new pskl.service.keyboard.CheatsheetService(); this.cheatsheetService.init(); @@ -74,7 +74,7 @@ drawingLoop.addCallback(this.render, this); drawingLoop.start(); - this.initBootstrapTooltips_(); + this.initTooltips_(); /** * True when piskel is running in static mode (no back end needed). @@ -110,7 +110,7 @@ } }, - initBootstrapTooltips_ : function () { + initTooltips_ : function () { $('body').tooltip({ selector: '[rel=tooltip]' }); @@ -123,8 +123,8 @@ }, readSizeFromURL_ : function () { - var sizeParam = this.readUrlParameter_("size"), - size; + var sizeParam = this.readUrlParameter_("size"); + var size; // parameter expected as size=64x48 => size=widthxheight var parts = sizeParam.split("x"); if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) { @@ -149,13 +149,12 @@ }, readUrlParameter_ : function (paramName) { - var searchString = window.location.search.substring(1), - i, val, params = searchString.split("&"); - - for (i = 0; i < params.length; i++) { - val = params[i].split("="); - if (val[0] == paramName) { - return window.unescape(val[1]); + var searchString = window.location.search.substring(1); + var params = searchString.split("&"); + for (var i = 0; i < params.length; i++) { + var param = params[i].split("="); + if (param[0] == paramName) { + return window.unescape(param[1]); } } return ""; diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js index 3c94eaa5..0186adfe 100644 --- a/js/controller/settings/ImportController.js +++ b/js/controller/settings/ImportController.js @@ -154,7 +154,9 @@ var frame = pskl.utils.FrameUtils.createFromImage(image); var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]); - var piskel = pskl.model.Piskel.fromLayers([layer]); + + var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', ''); + var piskel = pskl.model.Piskel.fromLayers([layer], descriptor); pskl.app.piskelController.setPiskel(piskel); pskl.app.animationController.setFPS(Constants.DEFAULT.FPS); diff --git a/js/controller/settings/SaveController.js b/js/controller/settings/SaveController.js index 11b330cb..17ba844d 100644 --- a/js/controller/settings/SaveController.js +++ b/js/controller/settings/SaveController.js @@ -1,5 +1,5 @@ (function () { - var ns = $.namespace("pskl.controller.settings"); + var ns = $.namespace('pskl.controller.settings'); ns.SaveController = function (piskelController) { this.piskelController = piskelController; @@ -9,10 +9,12 @@ * @public */ ns.SaveController.prototype.init = function () { - this.titleInput = document.getElementById("save-title"); - this.descriptionInput = document.getElementById("save-description"); + this.titleInput = $('#save-title'); + this.descriptionInput = $('#save-description'); + this.saveForm = $('form[name=save-form]'); - this.titleInput.value = this.piskelController.piskel.getDescriptor().name; - this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description; + var descriptor = this.piskelController.piskel.getDescriptor(); + this.titleInput.val(descriptor.name); + this.descriptionInput.val(descriptor.description); }; })(); \ No newline at end of file diff --git a/js/model/Piskel.js b/js/model/Piskel.js index 11f520d7..d87d05fe 100644 --- a/js/model/Piskel.js +++ b/js/model/Piskel.js @@ -8,8 +8,8 @@ * @param {String} name * @param {String} description */ - ns.Piskel = function (width, height) { - if (width && height) { + ns.Piskel = function (width, height, descriptor) { + if (width && height && descriptor) { /** @type {Array} */ this.layers = []; @@ -19,7 +19,7 @@ /** @type {Number} */ this.height = height; - this.descriptor = null; + this.descriptor = descriptor; } else { throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ","); } @@ -31,11 +31,11 @@ * @param {Array} layers * @return {pskl.model.Piskel} */ - ns.Piskel.fromLayers = function (layers) { + ns.Piskel.fromLayers = function (layers, descriptor) { var piskel = null; if (layers.length > 0 && layers[0].length() > 0) { var sampleFrame = layers[0].getFrameAt(0); - piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight()); + piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor); layers.forEach(piskel.addLayer.bind(piskel)); } else { throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument'; @@ -104,11 +104,8 @@ return this.descriptor; }; - ns.Piskel.prototype.setDescriptor = function (name, desc) { - this.descriptor = { - name : name, - description : desc - }; + ns.Piskel.prototype.setDescriptor = function (name, description) { + this.descriptor = new pskl.model.piskel.Descriptor(name, description); }; })(); \ No newline at end of file diff --git a/js/model/PiskelDescriptor.js b/js/model/PiskelDescriptor.js deleted file mode 100644 index e69de29b..00000000 diff --git a/js/model/piskel/Descriptor.js b/js/model/piskel/Descriptor.js new file mode 100644 index 00000000..07ed40d4 --- /dev/null +++ b/js/model/piskel/Descriptor.js @@ -0,0 +1,8 @@ +(function () { + var ns = $.namespace('pskl.model.piskel'); + + ns.Descriptor = function (name, description) { + this.name = name; + this.description = description; + }; +})(); \ No newline at end of file diff --git a/js/rendering/DrawingLoop.js b/js/rendering/DrawingLoop.js index e1816011..d746f684 100644 --- a/js/rendering/DrawingLoop.js +++ b/js/rendering/DrawingLoop.js @@ -6,6 +6,7 @@ this.isRunning = false; this.previousTime = 0; this.callbacks = []; + this.i = 0; }; ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) { @@ -33,7 +34,10 @@ ns.DrawingLoop.prototype.loop_ = function () { var currentTime = Date.now(); var delta = currentTime - this.previousTime; - this.executeCallbacks_(delta); + this.i++; + if(this.i%2 === 0) { + this.executeCallbacks_(delta); + } this.previousTime = currentTime; this.requestAnimationFrame.call(window, this.loop_.bind(this)); }; diff --git a/js/service/HistoryService.js b/js/service/HistoryService.js index bfc6d03b..a9067ac5 100644 --- a/js/service/HistoryService.js +++ b/js/service/HistoryService.js @@ -2,11 +2,13 @@ var ns = $.namespace("pskl.service"); ns.HistoryService = function (piskelController) { this.piskelController = piskelController; + this.saveState__b = this.saveState.bind(this); }; ns.HistoryService.prototype.init = function () { - $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this)); + $.subscribe(Events.PISKEL_RESET, this.saveState__b); + $.subscribe(Events.TOOL_RELEASED, this.saveState__b); pskl.app.shortcutService.addShortcut('ctrl+Z', this.undo.bind(this)); pskl.app.shortcutService.addShortcut('ctrl+Y', this.redo.bind(this)); @@ -18,12 +20,16 @@ ns.HistoryService.prototype.undo = function () { this.piskelController.getCurrentFrame().loadPreviousState(); + $.unsubscribe(Events.PISKEL_RESET, this.saveState__b); $.publish(Events.PISKEL_RESET); + $.subscribe(Events.PISKEL_RESET, this.saveState__b); }; ns.HistoryService.prototype.redo = function () { this.piskelController.getCurrentFrame().loadNextState(); + $.unsubscribe(Events.PISKEL_RESET, this.saveState__b); $.publish(Events.PISKEL_RESET); + $.subscribe(Events.PISKEL_RESET, this.saveState__b); }; })(); \ No newline at end of file diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js index 783211c3..c68cee38 100644 --- a/js/service/LocalStorageService.js +++ b/js/service/LocalStorageService.js @@ -45,6 +45,7 @@ */ ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() { var framesheet = JSON.parse(window.localStorage.snapShot); + pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) { pskl.app.piskelController.setPiskel(piskel); }); diff --git a/js/service/keyboard/ShortcutService.js b/js/service/keyboard/ShortcutService.js index 07419af7..648abc6c 100644 --- a/js/service/keyboard/ShortcutService.js +++ b/js/service/keyboard/ShortcutService.js @@ -54,28 +54,36 @@ * @private */ ns.ShortcutService.prototype.onKeyUp_ = function(evt) { - // jquery names FTW ... - var keycode = evt.which; - var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode); + if (!this.isInInput_(evt)) { + // jquery names FTW ... + var keycode = evt.which; + var targetTagName = evt.target.nodeName.toUpperCase(); + var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode); - var keyShortcuts = this.shortcuts_[charkey]; - if(keyShortcuts) { - var cb; - if (this.isCtrlKeyPressed_(evt)) { - cb = keyShortcuts.ctrl; - } else if (this.isShiftKeyPressed_(evt)) { - cb = keyShortcuts.shift; - } else { - cb = keyShortcuts.normal; - } + var keyShortcuts = this.shortcuts_[charkey]; + if(keyShortcuts) { + var cb; + if (this.isCtrlKeyPressed_(evt)) { + cb = keyShortcuts.ctrl; + } else if (this.isShiftKeyPressed_(evt)) { + cb = keyShortcuts.shift; + } else { + cb = keyShortcuts.normal; + } - if(cb) { - cb(charkey); - evt.preventDefault(); + if(cb) { + cb(charkey); + evt.preventDefault(); + } } } }; + ns.ShortcutService.prototype.isInInput_ = function (evt) { + var targetTagName = evt.target.nodeName.toUpperCase(); + return targetTagName === 'INPUT' || targetTagName === 'TEXTAREA'; + }; + ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) { return this.isMac_() ? evt.metaKey : evt.ctrlKey; }; diff --git a/js/utils/serialization/Deserializer.js b/js/utils/serialization/Deserializer.js index 118538c6..799b1f09 100644 --- a/js/utils/serialization/Deserializer.js +++ b/js/utils/serialization/Deserializer.js @@ -23,7 +23,9 @@ ns.Deserializer.prototype.deserialize = function () { var data = this.data_; var piskelData = data.piskel; - this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height); + + var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', ''); + this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor); this.layersToLoad_ = piskelData.layers.length; diff --git a/piskel-script-list.js b/piskel-script-list.js index cd7651f5..aa986e27 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -37,6 +37,7 @@ exports.scripts = [ // Models "js/model/Frame.js", "js/model/Layer.js", + "js/model/piskel/Descriptor.js", "js/model/Piskel.js", // Selection diff --git a/templates/settings/save.html b/templates/settings/save.html index 1e979ff7..6f933314 100644 --- a/templates/settings/save.html +++ b/templates/settings/save.html @@ -2,15 +2,20 @@
Save
-
- +
+ +
- -
- +
+ +
- - +
+ +
+
\ No newline at end of file From 4056142b97025f43ddd5ec63a047ea6ffa311617 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 18 Dec 2013 23:37:17 +0100 Subject: [PATCH 4/6] Issue#145 : Hide highlighted pixel + BaseTool : added new method hideHighlightedPixel + DrawingController : mousemove event plugged on mousenter and unplugged on mouseleave + DrawingController : tool.hideHighlightPixel called on mouseleave and when switching the current tool to active (i.e. when user starts clicking) --- js/controller/DrawingController.js | 25 +++++++++++++++++++++---- js/drawingtools/BaseTool.js | 7 +++++++ 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index 71a7ce31..ee7ab623 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -63,7 +63,8 @@ ns.DrawingController.prototype.initMouseBehavior = function() { var body = $('body'); this.container.mousedown($.proxy(this.onMousedown_, this)); - this.container.mousemove($.proxy(this.onMousemove_, this)); + this.container.mouseenter($.proxy(this.onMouseenter_, this)); + this.container.mouseleave($.proxy(this.onMouseleave_, this)); if (pskl.utils.UserAgent.isChrome) { this.container.on('mousewheel', $.proxy(this.onMousewheel_, this)); @@ -82,7 +83,7 @@ window.clearInterval(this.resizeTimer); } this.resizeTimer = window.setTimeout($.proxy(this.afterWindowResize_, this), 200); - }, + }; ns.DrawingController.prototype.afterWindowResize_ = function () { var initialWidth = this.compositeRenderer.getDisplaySize().width; @@ -93,7 +94,7 @@ this.compositeRenderer.setZoom(newZoom); $.publish(Events.ZOOM_CHANGED); - }, + }; /** * @private @@ -102,7 +103,7 @@ if(settingsName == pskl.UserSettings.SHOW_GRID) { console.warn('DrawingController:onUserSettingsChange_ not implemented !'); } - }, + }; ns.DrawingController.prototype.onFrameSizeChanged_ = function () { this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_()); @@ -111,6 +112,21 @@ $.publish(Events.ZOOM_CHANGED); }; + /** + * @private + */ + ns.DrawingController.prototype.onMouseenter_ = function (event) { + this.container.bind('mousemove', $.proxy(this.onMousemove_, this)); + }; + + /** + * @private + */ + ns.DrawingController.prototype.onMouseleave_ = function (event) { + this.container.unbind('mousemove'); + this.currentToolBehavior.hideHighlightedPixel(this.overlayFrame); + }; + /** * @private */ @@ -124,6 +140,7 @@ } } else { this.isClicked = true; + this.currentToolBehavior.hideHighlightedPixel(this.overlayFrame); this.currentToolBehavior.applyToolAt( coords.x, diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index b3e33e30..890c045b 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -31,6 +31,13 @@ } }; + ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) { + overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); + this.highlightedPixelRow = null; + this.highlightedPixelCol = null; + }; + + ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {}; /** From fbdf1aaf9a60b1cce292c383413d8124d59302b5 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Mon, 23 Dec 2013 15:04:13 +0100 Subject: [PATCH 5/6] added loading over + fixed bug with highlighted pixel removal --- index.html | 13 +++++++++++++ js/drawingtools/BaseTool.js | 8 +++++--- js/drawingtools/selectiontools/BaseSelect.js | 3 +++ js/rendering/DrawingLoop.js | 6 +----- piskel-boot.js | 20 ++++++++++++++------ 5 files changed, 36 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index b6bb7fff..9550a6b8 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,19 @@ +
+ Loading pixels ... +
diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index 890c045b..1d2dfd40 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -32,9 +32,11 @@ }; ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) { - overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); - this.highlightedPixelRow = null; - this.highlightedPixelCol = null; + if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) { + overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); + this.highlightedPixelRow = null; + this.highlightedPixelCol = null; + } }; diff --git a/js/drawingtools/selectiontools/BaseSelect.js b/js/drawingtools/selectiontools/BaseSelect.js index 19972394..f6475699 100644 --- a/js/drawingtools/selectiontools/BaseSelect.js +++ b/js/drawingtools/selectiontools/BaseSelect.js @@ -70,6 +70,9 @@ } }; + ns.BaseSelect.prototype.hideHighlightedPixel = function () { + // not implemented for selection tools + }; /** * If we mouseover the selection draw inside the overlay frame, show the 'move' cursor diff --git a/js/rendering/DrawingLoop.js b/js/rendering/DrawingLoop.js index d746f684..e1816011 100644 --- a/js/rendering/DrawingLoop.js +++ b/js/rendering/DrawingLoop.js @@ -6,7 +6,6 @@ this.isRunning = false; this.previousTime = 0; this.callbacks = []; - this.i = 0; }; ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) { @@ -34,10 +33,7 @@ ns.DrawingLoop.prototype.loop_ = function () { var currentTime = Date.now(); var delta = currentTime - this.previousTime; - this.i++; - if(this.i%2 === 0) { - this.executeCallbacks_(delta); - } + this.executeCallbacks_(delta); this.previousTime = currentTime; this.requestAnimationFrame.call(window, this.loop_.bind(this)); }; diff --git a/piskel-boot.js b/piskel-boot.js index 9317ca2b..b9be8a96 100644 --- a/piskel-boot.js +++ b/piskel-boot.js @@ -1,4 +1,16 @@ (function () { + + window.onPiskelReady = function () { + var loadingMask = document.getElementById('loading-mask'); + loadingMask.style.opacity = 0; + window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600) + pskl.app.init(); + // cleanup + delete window.exports; + delete window.loadDebugScripts; + delete window.done; + }; + var prefixPath = function (path) { if (window.pskl && window.pskl.appEngineToken_) { return '../' + path; @@ -29,11 +41,7 @@ var scriptIndex = 0; window.loadNextScript = function () { if (scriptIndex == window.exports.scripts.length) { - pskl.app.init(); - // cleanup - delete window.exports; - delete window.loadDebugScripts; - delete window.done; + window.onPiskelReady(); } else { loadScript(window.exports.scripts[scriptIndex], "loadNextScript()"); scriptIndex ++; @@ -60,7 +68,7 @@ var loaderInterval = window.setInterval(function () { if (document.querySelectorAll("[data-iframe-loader]").length === 0) { window.clearInterval(loaderInterval); - loadScript(script, "pskl.app.init()"); + loadScript(script, "onPiskelReady()"); } else { console.log("waiting for templates to load ...."); } From fc19695a4a1e4802b5e2c152a61923d88d4d01a6 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Tue, 24 Dec 2013 11:51:41 +0100 Subject: [PATCH 6/6] Misc : start frame index at 1 in PreviewFilm --- js/controller/PreviewFilmController.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index 67f0f03f..8fdce874 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -180,7 +180,7 @@ } var tileCount = document.createElement("div"); tileCount.className = "tile-overlay tile-count"; - tileCount.innerHTML = tileNumber; + tileCount.innerHTML = tileNumber + 1; previewTileRoot.appendChild(tileCount);