fix ImageFromJson

Do not use the same content for insertable image and gicon. The former depends on the area size whereas the later is square.

area.js

@@ -1105,8 +1105,9 @@ var DrawingArea = new Lang.Class({
     },
     
     // Used by the menu.
-    getSvgContentForJson(json) {
+    getSvgContentsForJson(json) {
         let elements = [];
+        let elementsContent = '';
         
         elements.push(...JSON.parse(json.contents).map(object => {
             if (object.color)
@@ -1117,16 +1118,21 @@ var DrawingArea = new Lang.Class({
                 object.image = new Files.Image(object.image);
             return new Elements.DrawingElement(object);
         }));
-        
+        elements.forEach(element => elementsContent += element.buildSVG('transparent'));
-        let size = Math.min(this.monitor.width, this.monitor.height);
-        let [x, y] = [(this.monitor.width - size) / 2, (this.monitor.height - size) / 2];
         
         let prefixes = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
-        let content = `<svg viewBox="${x} ${y} ${size} ${size}" ${prefixes}>`;
-        elements.forEach(element => content += element.buildSVG('transparent'));
-        content += "\n</svg>";
         
-        return content;
+        let getGiconSvgContent = () => {
+            let size = Math.min(this.monitor.width, this.monitor.height);
+            let [x, y] = [(this.monitor.width - size) / 2, (this.monitor.height - size) / 2];
+            return `<svg viewBox="${x} ${y} ${size} ${size}" ${prefixes}>${elementsContent}\n</svg>`;
+        };
+        
+        let getImageSvgContent = () => {
+            return `<svg viewBox="0 0 ${this.width} ${this.height}" ${prefixes}>${elementsContent}\n</svg>`;
+        };
+        
+        return [getGiconSvgContent, getImageSvgContent];
     },
     
     saveAsSvg: function() {

files.js

@@ -406,14 +406,15 @@ var Json = new Lang.Class({
         this._contents = contents;
     },
     
-    createGicon: function(svgContent) {
+    addSvgContents: function(getGiconSvgContent, getImageSvgContent) {
-        this.svgBytes = new GLib.Bytes(svgContent);
+        let giconSvgBytes = new GLib.Bytes(getGiconSvgContent());
-        this.gicon = Gio.BytesIcon.new(this.svgBytes);
+        this.gicon = Gio.BytesIcon.new(giconSvgBytes);
+        this.getImageSvgBytes = () => new GLib.Bytes(getImageSvgContent());
     },
     
     get image() {
         if (!this._image)
-            this._image = new ImageFromJson({ bytes: this.svgBytes, gicon: this.gicon, displayName: this.displayName });
+            this._image = new ImageFromJson({ bytes: this.getImageSvgBytes(), gicon: this.gicon, displayName: this.displayName });
         
         return this._image;
     }

menu.js

@@ -599,10 +599,8 @@ var DrawingMenu = new Lang.Class({
     _populateOpenDrawingSubMenu: function() {
         this.openDrawingSubMenu.removeAll();
         Files.Jsons.getSorted().forEach(json => {
-            if (!json.gicon) {
+            if (!json.gicon)
-                let svgContent = this.area.getSvgContentForJson(json);
+                json.addSvgContents(...this.area.getSvgContentsForJson(json));
-                json.createGicon(svgContent);
-            }
             
             let subItem = this.openDrawingSubMenu.addAction(`<i>${String(json)}</i>`, () => {
                 this.area.loadJson(json);