diff --git a/src/js/app.js b/src/js/app.js index 07885727..28225379 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -30,7 +30,10 @@ piskel.addLayer(layer); - this.piskelController = new pskl.controller.PiskelController(piskel); + this.corePiskelController = new pskl.controller.piskel.PiskelController(piskel); + this.corePiskelController.init(); + + this.piskelController = new pskl.controller.piskel.PublicPiskelController(this.corePiskelController); this.piskelController.init(); this.paletteController = new pskl.controller.PaletteController(); @@ -69,7 +72,7 @@ this.selectionManager = new pskl.selection.SelectionManager(this.piskelController); this.selectionManager.init(); - this.historyService = new pskl.service.HistoryService(this.piskelController); + this.historyService = new pskl.service.HistoryService(this.corePiskelController); this.historyService.init(); this.notificationController = new pskl.controller.NotificationController(); diff --git a/src/js/controller/PiskelController.js b/src/js/controller/piskel/PiskelController.js similarity index 71% rename from src/js/controller/PiskelController.js rename to src/js/controller/piskel/PiskelController.js index b1d56273..494555c2 100644 --- a/src/js/controller/PiskelController.js +++ b/src/js/controller/piskel/PiskelController.js @@ -1,10 +1,9 @@ (function () { - var ns = $.namespace('pskl.controller'); + var ns = $.namespace('pskl.controller.piskel'); ns.PiskelController = function (piskel) { if (piskel) { this.setPiskel(piskel); - this.silenced = false; } else { throw 'A piskel instance is mandatory for instanciating PiskelController'; } @@ -16,21 +15,9 @@ this.currentFrameIndex = 0; this.layerIdCounter = 1; - - if (!this.silenced) { - $.publish(Events.FRAME_SIZE_CHANGED); - $.publish(Events.PISKEL_RESET); - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'FULL' - }); - } }; ns.PiskelController.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)); }; ns.PiskelController.prototype.getHeight = function () { @@ -92,15 +79,6 @@ this.getLayers().forEach(function (l) { l.addFrameAt(this.createEmptyFrame_(), index); }.bind(this)); - - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'ADD_FRAME', - index : index - }); - - $.publish(Events.PISKEL_RESET); - } }; ns.PiskelController.prototype.createEmptyFrame_ = function () { @@ -116,14 +94,6 @@ if (this.currentFrameIndex >= index && this.currentFrameIndex > 0) { this.setCurrentFrameIndex(this.currentFrameIndex - 1); } - - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'DELETE_FRAME', - index : index - }); - $.publish(Events.PISKEL_RESET); - } }; ns.PiskelController.prototype.duplicateCurrentFrame = function () { @@ -134,31 +104,12 @@ this.getLayers().forEach(function (l) { l.duplicateFrameAt(index); }); - - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'DUPLICATE_FRAME', - index : index - }); - - $.publish(Events.PISKEL_RESET); - } }; ns.PiskelController.prototype.moveFrame = function (fromIndex, toIndex) { this.getLayers().forEach(function (l) { l.moveFrame(fromIndex, toIndex); }); - - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'MOVE_FRAME', - from : fromIndex, - to : toIndex - }); - - $.publish(Events.PISKEL_RESET); - } }; ns.PiskelController.prototype.getFrameCount = function () { @@ -168,9 +119,6 @@ ns.PiskelController.prototype.setCurrentFrameIndex = function (index) { this.currentFrameIndex = index; - if (!this.silenced) { - $.publish(Events.PISKEL_RESET); - } }; ns.PiskelController.prototype.selectNextFrame = function () { @@ -189,9 +137,6 @@ ns.PiskelController.prototype.setCurrentLayerIndex = function (index) { this.currentLayerIndex = index; - if (!this.silenced) { - $.publish(Events.PISKEL_RESET); - } }; ns.PiskelController.prototype.selectLayer = function (layer) { @@ -205,13 +150,6 @@ var layer = this.getLayerByIndex(index); if (layer) { layer.setName(name); - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'RENAME_LAYER', - index : index, - name : name - }); - } } }; @@ -245,12 +183,6 @@ this.piskel.addLayer(layer); this.setCurrentLayerIndex(this.piskel.getLayers().length - 1); - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'CREATE_LAYER', - name : name - }); - } } else { throw 'Layer name should be unique'; } @@ -264,22 +196,12 @@ var layer = this.getCurrentLayer(); this.piskel.moveLayerUp(layer); this.selectLayer(layer); - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'LAYER_UP' - }); - } }; ns.PiskelController.prototype.moveLayerDown = function () { var layer = this.getCurrentLayer(); this.piskel.moveLayerDown(layer); this.selectLayer(layer); - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'LAYER_DOWN' - }); - } }; ns.PiskelController.prototype.removeCurrentLayer = function () { @@ -287,28 +209,10 @@ var layer = this.getCurrentLayer(); this.piskel.removeLayer(layer); this.setCurrentLayerIndex(0); - - if (!this.silenced) { - $.publish(Events.PISKEL_SAVE_STATE, { - type : 'REMOVE_LAYER' - }); - } } }; ns.PiskelController.prototype.serialize = function (compressed) { return pskl.utils.Serializer.serializePiskel(this.piskel, compressed); }; - - ns.PiskelController.prototype.load = function (data) { - this.deserialize(JSON.stringify(data)); - }; - - ns.PiskelController.prototype.silence = function () { - this.silenced = true; - }; - - ns.PiskelController.prototype.voice = function () { - this.silenced = false; - }; })(); \ No newline at end of file diff --git a/src/js/controller/piskel/PublicPiskelController.js b/src/js/controller/piskel/PublicPiskelController.js new file mode 100644 index 00000000..91c366f0 --- /dev/null +++ b/src/js/controller/piskel/PublicPiskelController.js @@ -0,0 +1,203 @@ +(function () { + var ns = $.namespace('pskl.controller.piskel'); + + ns.PublicPiskelController = function (piskelController) { + this.piskelController = piskelController; + }; + + ns.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)); + }; + + ns.PublicPiskelController.prototype.setPiskel = function (piskel) { + this.piskelController.setPiskel(piskel); + + $.publish(Events.FRAME_SIZE_CHANGED); + $.publish(Events.PISKEL_RESET); + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'FULL' + }); + }; + + ns.PublicPiskelController.prototype.getHeight = function () { + return this.piskelController.getHeight(); + }; + + ns.PublicPiskelController.prototype.getWidth = function () { + return this.piskelController.getWidth(); + }; + + ns.PublicPiskelController.prototype.getFPS = function () { + return this.piskelController.getFPS(); + }; + + ns.PublicPiskelController.prototype.getLayers = function () { + return this.piskelController.getLayers(); + }; + + ns.PublicPiskelController.prototype.getCurrentLayer = function () { + return this.piskelController.getCurrentLayer(); + }; + + ns.PublicPiskelController.prototype.getCurrentLayerIndex = function () { + return this.piskelController.currentLayerIndex; + }; + + ns.PublicPiskelController.prototype.getLayerAt = function (index) { + return this.piskelController.getLayerAt(index); + }; + + ns.PublicPiskelController.prototype.getCurrentFrame = function () { + return this.piskelController.getCurrentFrame(); + }; + + ns.PublicPiskelController.prototype.getCurrentFrameIndex = function () { + return this.piskelController.currentFrameIndex; + }; + + ns.PublicPiskelController.prototype.getPiskel = function () { + return this.piskelController.piskel; + }; + + ns.PublicPiskelController.prototype.getFrameAt = function (index) { + return this.piskelController.getFrameAt(index); + }; + + ns.PublicPiskelController.prototype.hasFrameAt = function (index) { + return this.piskelController.hasFrameAt(index); + }; + + ns.PublicPiskelController.prototype.addFrame = function () { + this.addFrameAt(this.piskelController.getFrameCount()); + }; + + ns.PublicPiskelController.prototype.addFrameAtCurrentIndex = function () { + this.addFrameAt(this.getCurrentFrameIndex()); + }; + + ns.PublicPiskelController.prototype.addFrameAt = function (index) { + this.piskelController.addFrameAt(index); + + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'ADD_FRAME', + index : index + }); + + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.removeFrameAt = function (index) { + this.piskelController.removeFrameAt(index); + + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'DELETE_FRAME', + index : index + }); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.duplicateCurrentFrame = function () { + this.piskelController.duplicateFrameAt(this.getCurrentFrameIndex()); + }; + + ns.PublicPiskelController.prototype.duplicateFrameAt = function (index) { + this.piskelController.duplicateFrameAt(index); + + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'DUPLICATE_FRAME', + index : index + }); + + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.moveFrame = function (fromIndex, toIndex) { + this.piskelController.moveFrame(fromIndex, toIndex); + + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'MOVE_FRAME', + from : fromIndex, + to : toIndex + }); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.getFrameCount = function () { + return this.piskelController.getFrameCount(); + }; + + ns.PublicPiskelController.prototype.setCurrentFrameIndex = function (index) { + this.piskelController.setCurrentFrameIndex(index); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.selectNextFrame = function () { + this.piskelController.selectNextFrame(); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.selectPreviousFrame = function () { + this.piskelController.selectPreviousFrame(); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.setCurrentLayerIndex = function (index) { + this.piskelController.setCurrentLayerIndex(index); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.selectLayer = function (layer) { + this.piskelController.selectLayer(layer); + $.publish(Events.PISKEL_RESET); + }; + + ns.PublicPiskelController.prototype.renameLayerAt = function (index, name) { + this.piskelController.renameLayerAt(index, name); + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'RENAME_LAYER', + index : index, + name : name + }); + }; + + ns.PublicPiskelController.prototype.getLayerByIndex = function (index) { + return this.piskelController.getLayerByIndex(index); + }; + + ns.PublicPiskelController.prototype.createLayer = function (name) { + this.piskelController.createLayer(name); + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'CREATE_LAYER', + name : name + }); + }; + + ns.PublicPiskelController.prototype.moveLayerUp = function () { + this.piskelController.moveLayerUp(); + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'LAYER_UP' + }); + }; + + ns.PublicPiskelController.prototype.moveLayerDown = function () { + this.piskelController.removeCurrentLayer(); + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'LAYER_DOWN' + }); + }; + + ns.PublicPiskelController.prototype.removeCurrentLayer = function () { + this.piskelController.moveLayerDown(); + $.publish(Events.PISKEL_SAVE_STATE, { + type : 'REMOVE_LAYER' + }); + }; + + ns.PublicPiskelController.prototype.serialize = function (compressed) { + return this.piskelController.serialize(compressed); + }; + +})(); \ No newline at end of file diff --git a/src/js/controller/settings/PngExportController.js b/src/js/controller/settings/PngExportController.js index 33e9e546..5afba0b9 100644 --- a/src/js/controller/settings/PngExportController.js +++ b/src/js/controller/settings/PngExportController.js @@ -56,7 +56,7 @@ }; ns.PngExportController.prototype.getPiskelName_ = function () { - return this.piskelController.piskel.getDescriptor().name; + return this.piskelController.getPiskel().getDescriptor().name; }; ns.PngExportController.prototype.getFramesheetAsBase64Png = function () { diff --git a/src/js/controller/settings/ResizeController.js b/src/js/controller/settings/ResizeController.js index 7ed4cec9..550946d7 100644 --- a/src/js/controller/settings/ResizeController.js +++ b/src/js/controller/settings/ResizeController.js @@ -39,7 +39,7 @@ layers.push(layer); } - var piskel = pskl.model.Piskel.fromLayers(layers, this.piskelController.piskel.getDescriptor()); + var piskel = pskl.model.Piskel.fromLayers(layers, this.piskelController.getPiskel().getDescriptor()); pskl.app.piskelController.setPiskel(piskel); $.publish(Events.CLOSE_SETTINGS_DRAWER); }; diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js index 01c7a6f9..fc083339 100644 --- a/src/js/controller/settings/SaveController.js +++ b/src/js/controller/settings/SaveController.js @@ -21,7 +21,7 @@ this.status = $('#save-status'); - var descriptor = this.piskelController.piskel.getDescriptor(); + var descriptor = this.piskelController.getPiskel().getDescriptor(); this.nameInput.val(descriptor.name); this.descriptionInput.val(descriptor.description); @@ -46,7 +46,7 @@ var isPublic = !!this.isPublicCheckbox.prop('checked'); var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic); - this.piskelController.piskel.setDescriptor(descriptor); + this.piskelController.getPiskel().setDescriptor(descriptor); this.beforeSaving_(); pskl.app.store({ diff --git a/src/js/model/Frame.js b/src/js/model/Frame.js index 50c4e6c8..c928591d 100644 --- a/src/js/model/Frame.js +++ b/src/js/model/Frame.js @@ -60,6 +60,7 @@ */ ns.Frame.prototype.setPixels = function (pixels) { this.pixels = this.clonePixels_(pixels); + this.s = null; this.version++; }; @@ -81,13 +82,19 @@ }; ns.Frame.prototype.getHash = function () { + if (!this.s) this.s = JSON.stringify(this.pixels); + return this.s; return [this.id, this.version].join('-'); }; ns.Frame.prototype.setPixel = function (col, row, color) { if (this.containsPixel(col, row)) { - this.pixels[col][row] = color; - this.version++; + var p = this.pixels[col][row]; + if (p !== color) { + this.s = null; + this.pixels[col][row] = color; + this.version++; + } } }; diff --git a/src/js/rendering/frame/CachedFrameRenderer.js b/src/js/rendering/frame/CachedFrameRenderer.js index e8a8f618..0c77ac07 100644 --- a/src/js/rendering/frame/CachedFrameRenderer.js +++ b/src/js/rendering/frame/CachedFrameRenderer.js @@ -39,6 +39,7 @@ frame.getHash() ].join('-'); if (this.serializedFrame != serializedFrame) { + // console.log('rendering') this.serializedFrame = serializedFrame; this.superclass.render.call(this, frame); } diff --git a/src/js/rendering/layer/LayersRenderer.js b/src/js/rendering/layer/LayersRenderer.js index fd09a45c..2c5763a1 100644 --- a/src/js/rendering/layer/LayersRenderer.js +++ b/src/js/rendering/layer/LayersRenderer.js @@ -22,8 +22,8 @@ var offset = this.getOffset(); var size = this.getDisplaySize(); var layers = this.piskelController.getLayers(); - var currentFrameIndex = this.piskelController.currentFrameIndex; - var currentLayerIndex = this.piskelController.currentLayerIndex; + var currentFrameIndex = this.piskelController.getCurrentFrameIndex(); + var currentLayerIndex = this.piskelController.getCurrentLayerIndex(); var serializedRendering = [ this.getZoom(), diff --git a/src/js/service/AppEngineStorageService.js b/src/js/service/AppEngineStorageService.js index 47184b37..8c93f23a 100644 --- a/src/js/service/AppEngineStorageService.js +++ b/src/js/service/AppEngineStorageService.js @@ -29,7 +29,7 @@ }; ns.AppEngineStorageService.prototype.prepareFormData_ = function () { - var piskel = this.piskelController.piskel; + var piskel = this.piskelController.getPiskel(); var descriptor = piskel.getDescriptor(); var formData = new FormData(); diff --git a/src/js/service/HistoryService.js b/src/js/service/HistoryService.js index 224cb8bb..b9c9d982 100644 --- a/src/js/service/HistoryService.js +++ b/src/js/service/HistoryService.js @@ -1,7 +1,7 @@ (function () { var ns = $.namespace('pskl.service'); - var SNAPSHOT_PERIOD = 5; + var SNAPSHOT_PERIOD = 50; ns.HistoryService = function (piskelController) { this.piskelController = piskelController; @@ -57,7 +57,6 @@ ns.HistoryService.prototype.loadState = function (index) { $.unsubscribe(Events.PISKEL_SAVE_STATE, this.saveState__b); - this.piskelController.silence(); // get nearest snaphot index var snapshotIndex = -1; @@ -93,7 +92,6 @@ var lastState = this.stateQueue[index]; this.setupState(lastState); - this.piskelController.voice(); $.subscribe(Events.PISKEL_SAVE_STATE, this.saveState__b); $.publish(Events.PISKEL_RESET); }; diff --git a/src/js/service/SavedStatusService.js b/src/js/service/SavedStatusService.js index ac3d6a23..04ab950b 100644 --- a/src/js/service/SavedStatusService.js +++ b/src/js/service/SavedStatusService.js @@ -2,7 +2,7 @@ var ns = $.namespace('pskl.service'); ns.SavedStatusService = function (piskelController) { - this.piskelController_ = piskelController; + this.piskelController = piskelController; }; ns.SavedStatusService.prototype.init = function () { @@ -15,7 +15,7 @@ }; ns.SavedStatusService.prototype.onPiskelReset = function () { - var piskel = this.piskelController_.piskel; + var piskel = this.piskelController.getPiskel(); // A first PISKEL_RESET is triggered during the load of a new Piskel, it should be ignored // putting a firstResetDone flag as a nasty workaround for this if (piskel.firstResetDone_) { @@ -34,7 +34,7 @@ }; ns.SavedStatusService.prototype.updateDirtyStatus = function (status) { - var piskel = this.piskelController_.piskel; + var piskel = this.piskelController.getPiskel(); if (piskel.isDirty_ !== status) { // Redraw piskel name only if dirty status actually changed piskel.isDirty_ = status; @@ -43,7 +43,7 @@ }; ns.SavedStatusService.prototype.updatePiskelName = function () { - var piskel = this.piskelController_.piskel; + var piskel = this.piskelController.getPiskel(); var name = piskel.getDescriptor().name; if (piskel.isDirty_) { $('.piskel-name').html(name + ' *'); @@ -53,7 +53,7 @@ }; ns.SavedStatusService.prototype.onBeforeUnload = function (evt) { - var piskel = this.piskelController_.piskel; + var piskel = this.piskelController.getPiskel(); if (piskel.isDirty_) { var confirmationMessage = "Your Piskel seems to have unsaved changes"; diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 3a7b8809..26eb3d22 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -65,7 +65,8 @@ "js/rendering/PiskelRenderer.js", // Controllers - "js/controller/PiskelController.js", + "js/controller/piskel/PiskelController.js", + "js/controller/piskel/PublicPiskelController.js", "js/controller/CursorCoordinatesController.js", "js/controller/DrawingController.js", "js/controller/PreviewFilmController.js",