Refactored piskel controller to extract the event creation

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();

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;
-  };
 })();

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);
+  };
+
+})();

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 () {

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);
   };

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({

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;
+      var p = this.pixels[col][row];
-      this.version++;
+      if (p !== color) {
+        this.s = null;
+        this.pixels[col][row] = color;
+        this.version++;
+      }
     }
   };
 

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);
     }

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 currentFrameIndex = this.piskelController.getCurrentFrameIndex();
-    var currentLayerIndex = this.piskelController.currentLayerIndex;
+    var currentLayerIndex = this.piskelController.getCurrentLayerIndex();
 
     var serializedRendering = [
       this.getZoom(),

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();

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);
   };

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";
 

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",