From 7f28669a704cf6a75ddb1bb759ad790ca5bb0615 Mon Sep 17 00:00:00 2001
From: Matti Jokitulppo <melonmanchan@gmail.com>
Date: Mon, 22 Feb 2016 12:06:41 +0200
Subject: [PATCH] =?UTF-8?q?Drawing=20scaling=C2=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/js/services/drawinghandler.js | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/js/services/drawinghandler.js b/app/js/services/drawinghandler.js
index e9ef6be..f728ad1 100644
--- a/app/js/services/drawinghandler.js
+++ b/app/js/services/drawinghandler.js
@@ -81,33 +81,42 @@ drawinghandler.factory('drawingFactory', function (configFactory, $window, $stat
             var data = JSON.stringify(e.path);
 
             peerFactory.sendDataToPeer(JSON.stringify({
-                type: 'newPathCreated',
-                tag:  canvas.tag,
-                data: data,
-                currentlyZoomedInRemoteCanvas: currentlyZoomedInCanvas
+                type                          : 'newPathCreated',
+                tag                           : canvas.tag,
+                data                          : data,
+                currentlyZoomedInRemoteCanvas : currentlyZoomedInCanvas,
+                remoteCanvasSize              : canvasSize
             }));
 
             createPathRemoveTimer(canvas, e.path);
         });
     };
 
-    var addPathToCanvas = function (canvasTag, pathData, currentlyZoomedInRemoteCanvas) {
-        console.log('addPathToCanvas')
+    var addPathToCanvas = function (canvasTag, pathData, currentlyZoomedInRemoteCanvas, remoteCanvasSize) {
         if (canvasTag === 'local') {
-            addNewPathToCanvas(remoteCanvas, pathData, currentlyZoomedInRemoteCanvas);
+            addNewPathToCanvas(remoteCanvas, pathData, currentlyZoomedInRemoteCanvas, remoteCanvasSize);
         }
         else if (canvasTag === 'remote') {
-            addNewPathToCanvas(localCanvas, pathData, currentlyZoomedInRemoteCanvas);
+            addNewPathToCanvas(localCanvas, pathData, currentlyZoomedInRemoteCanvas, remoteCanvasSize);
         }
     };
 
-    var addNewPathToCanvas = function (canvas, pathData, currentlyZoomedInRemoteCanvas) {
+    var addNewPathToCanvas = function (canvas, pathData, currentlyZoomedInRemoteCanvas, remoteCanvasSize) {
+        console.log("remoteCanvasSize", remoteCanvasSize);
+        console.log("own canvas size", canvasSize);
         pathData = JSON.parse(pathData);
         fabric.util.enlivenObjects([pathData], function(objects) {
 
         objects.forEach(function (o) {
                 o.stroke = config.remoteColor;
 
+                o.set({
+                    top:    o.top    / (remoteCanvasSize.height / canvasSize.height),
+                    left:   o.left   / (remoteCanvasSize.width  / canvasSize.width),
+                    scaleY: o.scaleX / (remoteCanvasSize.height / canvasSize.height),
+                    scaleX: o.scaleY / (remoteCanvasSize.width  / canvasSize.width)
+                });
+
                 if (currentlyZoomedInCanvas == null && currentlyZoomedInRemoteCanvas != null) {
                     o.set({
                         top:    o.top    * config.size.height,
@@ -186,7 +195,7 @@ drawinghandler.factory('drawingFactory', function (configFactory, $window, $stat
            setUpDataCallbacks: function() {
                 peerFactory.registerCallback('newPathCreated', function (data) {
                     var data = JSON.parse(data);
-                    addPathToCanvas(data.tag, data.data, data.currentlyZoomedInRemoteCanvas);
+                    addPathToCanvas(data.tag, data.data, data.currentlyZoomedInRemoteCanvas, data.remoteCanvasSize);
                 });
            },
            zoomInCanvasByTag: function (tag) {