Add simple sizeInfo to context menu for single selected images and texts

locales/de/translation.json

@@ -31,7 +31,8 @@
     "addVideo": "Video hinzufügen",
     "addWebPage": "Webseite hinzufügen",
     "announce": "Sofort anzeigen",
-    "announceAll": "Global sofort anzeigen"
+    "announceAll": "Global sofort anzeigen",
+    "sizeInfo": "Größe"
   },
   "navs": {
     "bundle": "Pakete",

locales/en/translation.json

@@ -31,7 +31,8 @@
     "addVideo": "Add Video",
     "addWebPage": "Add Web page",
     "announce": "Fast Announce",
-    "announceAll": "Global Announce"
+    "announceAll": "Global Announce",
+    "sizeInfo": "Size"
   },
   "navs": {
     "bundle": "bundle",

locales/fi/translation.json

@@ -31,7 +31,8 @@
     "addVideo": "Lisää Video",
     "addWebPage": "Lisää Web-sivu",
     "announce": "Ilmoita",
-    "announceAll": "Ilmoita Kaikille"
+    "announceAll": "Ilmoita Kaikille",
+    "sizeInfo": "Koko"
   },
   "navs": {
     "bundle": "DiaPaketti",

public/js/edit.js

@@ -144,12 +144,28 @@ $(document).bind("contextmenu", function (event) {
     var objects = canvas.getActiveObjects();
 
     if (objects.length > 0) {
-        // Show contextmenu
+        // Show contextmenu and hide size info to avoid laggy oppening
+        const sizeInfo = $('[data-action="sizeInfo"]')
+        sizeInfo.hide()
         $("#contextmenu").finish().toggle(100).// In the right position (the mouse)
             css({
                 top: event.pageY + "px",
                 left: event.pageX + "px"
             });
+        // only show the size info in case a single object is selected
+        if (objects.length === 1) {
+            const prevText = sizeInfo.text()
+            const labelPart = prevText.split(':')[0]
+            let sizePart = ""
+            if (objects[0].type === "image") {
+                sizePart = Math.round(objects[0].width*objects[0].scaleX) 
+                sizePart += ' x ' + Math.round(objects[0].height*objects[0].scaleY)
+            } else if (objects[0].type === "i-text") {                
+                sizePart = objects[0].fontSize
+            }
+            sizeInfo.text(labelPart+ ': ' + sizePart)
+            sizeInfo.show()
+        }
     }
 
 });

views/admin/editSlide.twig

@@ -285,6 +285,9 @@
 		<a class="item" data-action="delete">
 			{{ t("actions.delete") }}
 		</a>
+		<a class="item disabled" data-action="sizeInfo">
+			{{ t("actions.sizeInfo") }}:
+		</a>
 	</div>
 
 	<div id="imageLayer" class="ui modal">