Merge branch 'punktetool'

javascript/src/Plugins/qfq.fabric.js

@@ -297,6 +297,7 @@ $(function (n) {
         this.generateCanvas(width, height);
         if (this.outputField.val()) {
             this.canvas.loadFromJSON(this.outputField.val(), function() {
+                that.setBackground();
                 that.resizeCanvas();
                 that.setBrush();
                 that.canvas.renderAll();
@@ -375,7 +376,7 @@ $(function (n) {
         this.parentElement.append(canvas);
         this.canvas = this.__canvas = new fabric.StaticCanvas(canvas);
         this.parentElement.on("click", function(e) { that.toggleObjects(); });
-        $(window).resize(function() { that.scaled = false; that.resizeCanvas(); });
+        $(window).resize(function() { that.resizeCanvas(); });
     };
 
     n.Fabric.prototype.getMeta = function(url, callback) {
@@ -424,7 +425,7 @@ $(function (n) {
         window.addEventListener('keydown', function(e) { that.defaultKeyStrokeHandler(e) });
         window.addEventListener('dragend', function(e) { that.dragEndEvent(e) });
         this.parentElement.on('contextmenu', function(e) { that.defaultRightClickHandler(e) });
-        $(window).resize(function() { that.scaled=false; that.resizeCanvas(); });
+        $(window).resize(function() { that.resizeCanvas(); });
     };
 
     n.Fabric.prototype.dragEndEvent = function(e) {
@@ -439,8 +440,19 @@ $(function (n) {
         this.mouseInsideCanvas = true;
     };
 
+    /*
+    *
+    * Function is called at initialization and at each window resize.
+    * forceJSON is to tell resizeCanvas to ALWAYS use the JSON data as base
+    *           Used for static canvas initialization
+    * this.scaled - after the first call it sets scaled to true, which prevents
+    *               accidental wrong scaling when multiple resizeCanvas get started
+    *               in parallel. When scaled is true resize will only use real time
+    *               browser values and ignore database / json values.
+    *
+     */
     n.Fabric.prototype.resizeCanvas = function (forceJSON) {
-        console.log("resize canvas started 1111");
+        console.log("resize canvas started");
         var source = false;
         var backgroundSizing = false;
         var oldWidth = this.canvas.getWidth();
@@ -457,7 +469,8 @@ $(function (n) {
         if (source) {
             backgroundImageWidth = source.backgroundImage.width;
         }
-        if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0) {
+        if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0 && !this.scaled) {
+            console.log("Background Width: " + backgroundImageWidth);
             oldWidth = backgroundImageWidth;
             backgroundSizing = true;
         }
@@ -476,18 +489,16 @@ $(function (n) {
             this.canvas.setWidth(newWidth);
             this.canvas.setHeight(oldHeight * scaleMultiplier);
 
-
-            if (!this.scaled) {
-                var objects = this.canvas.getObjects();
-                for (var i in objects) {
+            var objects = this.canvas.getObjects();
+            for (var i in objects) {
                     objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                     objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                     objects[i].left = objects[i].left * scaleMultiplier;
                     objects[i].top = objects[i].top * scaleMultiplier;
                     objects[i].setCoords();
-                }
-                this.scaled = true;
+
             }
+            this.scaled=true;
             this.setBackground();
             this.canvas.renderAll();
         }