From 620e8d9929b6f1ed016290f7fd57d0e42e9bf5c2 Mon Sep 17 00:00:00 2001
From: Reaby <petri.jarvisalo@gmail.com>
Date: Wed, 15 May 2019 01:14:51 +0300
Subject: [PATCH] add centering of text, add fontsize...

---
 public/js/edit.js          | 61 +++++++++++++++++++++++---------------
 views/admin/editSlide.twig |  5 +++-
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/public/js/edit.js b/public/js/edit.js
index af4b157..ba44ec3 100644
--- a/public/js/edit.js
+++ b/public/js/edit.js
@@ -256,18 +256,18 @@ socket.on('callback.edit', function (data) {
     $('#currentTransition').text(data.slideData.transition || "default");
 
     if (data.bundleData.useWebFonts) {
-            WebFont.load({
-                google: {
-                    families: [data.bundleData.styleHeader.fontFamily +  ":700,900", data.bundleData.styleText.fontFamily+":700,900"]
-                },
-                timeout: 2000,
-                active: function () {
-                    nextSlide(data, true);
-                },
-                inactive: function () {
-                    nextSlide(data, true);
-                }
-            });
+        WebFont.load({
+            google: {
+                families: [data.bundleData.styleHeader.fontFamily + ":700,900", data.bundleData.styleText.fontFamily + ":700,900"]
+            },
+            timeout: 2000,
+            active: function () {
+                nextSlide(data, true);
+            },
+            inactive: function () {
+                nextSlide(data, true);
+            }
+        });
     } else {
         nextSlide(data, true);
     }
@@ -306,23 +306,26 @@ function setBackground(background) {
 }
 
 function setStyle(object, styleName, value) {
-    var style = { };
+    var style = {};
     style[styleName] = value;
 
     if (object.setSelectionStyles && object.isEditing) {
         object.setSelectionStyles(style);
-    }
-    else {
-        object.setOptions({styles: {} });
+    } else {
+        object.setOptions({styles: {}});
         object.setOptions(style);
     }
-
 }
 
 function getStyle(object, styleName) {
-    return (object.getSelectionStyles && object.isEditing)
-        ? object.getSelectionStyles()[styleName]
-        : object[styleName];
+    if (object.getSelectionStyles && object.isEditing) {
+        if (object.getSelectionStyles()[styleName]) {
+            return object.getSelectionStyles()[styleName];
+        }
+        return object[styleName];
+    } else {
+        return object[styleName];
+    }
 }
 
 function parseUrl(url) {
@@ -699,19 +702,29 @@ function changeColor(elem) {
     canvas.renderAll();
 }
 
+function setCenter(direction) {
+    switch (direction) {
+        case "h":
+            canvas.getActiveObject().viewportCenterH();
+            break;
+        case "v":
+            canvas.getActiveObject().viewportCenterV();
+            break;
+    }
+}
+
 function fontSize(direction) {
     for (var obj of canvas.getActiveObjects()) {
         var sizes = [20, 28, 32, 36, 40, 44, 48, 50, 54, 58, 64, 72, 96];
         if (obj.type === "i-text") {
-
-            var idx = closest(sizes, obj.get("fontSize"));
+            var idx = closest(sizes, getStyle(obj, "fontSize"));
 
             if ((idx + direction) < sizes.length && (idx + direction) > 0) {
-                obj.setOptions({fontSize: sizes[idx + direction]});
+                setStyle(obj, "fontSize", sizes[idx + direction]);
             }
         }
     }
-    canvas.renderAll();
+    canvas.requestRenderAll();
 }
 
 function closest(list, x) {
diff --git a/views/admin/editSlide.twig b/views/admin/editSlide.twig
index 32d0602..acd7801 100644
--- a/views/admin/editSlide.twig
+++ b/views/admin/editSlide.twig
@@ -132,7 +132,6 @@
                     <i class="corner font icon"></i>
                 </i>
             </div>
-
         </div>
         <div class="item">
             <div id="colorPicker" class="ui basic button">{{ t("admin.editSlide.changeColor") }} </div>
@@ -154,6 +153,10 @@
                 <div onclick="changeColor(this);" class="ui brown icon button"></div>
             </div>
         </div>
+        <div class="item">
+            <div class="ui basic icon button" onclick="setCenter('h')"><i class="arrows alternate horizontal icon"></i></div>
+            <div class="ui basic icon button" onclick="setCenter('v')"><i class="arrows alternate vertical icon"></i></div>
+        </div>
 
         <div class="right menu">
             <div class="item">