From 65f4fd0f271eec8f3841c20380a1f650fb366e5f Mon Sep 17 00:00:00 2001
From: janczer <menshikov.ivn@gmail.com>
Date: Wed, 26 Sep 2018 17:15:03 +0200
Subject: [PATCH] Refactoring. Create function to get current frame

---
 src/css/layout.css                               |  7 ++++++-
 src/js/controller/CursorCoordinatesController.js | 13 +++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/css/layout.css b/src/css/layout.css
index 36fd064e..e78f3195 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -93,6 +93,11 @@
   left: 1px;
 }
 
+.cursor-coordinates .frame-info {
+  line-height: 1.5;
+  text-align: left;
+}
+
 /**
  * Canvases layout
  */
@@ -164,4 +169,4 @@
 .canvas.drawing-canvas       {z-index:  8;}
 .canvas.canvas-overlay       {z-index:  9;}
 .canvas.onion-skin-canvas    {z-index:  10;}
-.canvas.layers-above-canvas  {z-index:  11;}
\ No newline at end of file
+.canvas.layers-above-canvas  {z-index:  11;}
diff --git a/src/js/controller/CursorCoordinatesController.js b/src/js/controller/CursorCoordinatesController.js
index 7b98e089..dfd222ec 100644
--- a/src/js/controller/CursorCoordinatesController.js
+++ b/src/js/controller/CursorCoordinatesController.js
@@ -18,6 +18,7 @@
     $.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.redraw.bind(this));
     $.subscribe(Events.ZOOM_CHANGED, this.redraw.bind(this));
+    $.subscribe(Events.PISKEL_RESET, this.redraw.bind(this));
 
     this.redraw();
   };
@@ -45,15 +46,19 @@
       html += '<div class="drawing-zoom">x' + zoom + '</div>';
     }
 
-    this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html;
+    this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html + this.getCurrentFrameIndexHTML_();
+  };
+
+  ns.CursorCoordinatesController.prototype.getCurrentFrameIndexHTML_ = function () {
+    var currentFrameIndex = this.piskelController.getCurrentFrameIndex() + 1;
+    var frameCount = this.piskelController.getFrameCount();
+    return '<div class="frame-info">' + currentFrameIndex + '/' + frameCount + '</div>';
   };
 
   ns.CursorCoordinatesController.prototype.getFrameSizeHTML_ = function () {
     var w = this.piskelController.getWidth();
     var h = this.piskelController.getHeight();
-    var currentFrameIndex = this.piskelController.getCurrentFrameIndex() + 1;
-    var frameCount = this.piskelController.getFrameCount();
-    return '[' + w + 'x' + h + '] ' + currentFrameIndex + '/' + frameCount;
+    return '[' + w + 'x' + h + '] ';
   };
 
   ns.CursorCoordinatesController.prototype.onCursorMoved_ = function (event, x, y) {