Added background image support

script/Application.js

@@ -897,7 +897,7 @@ Application.prototype.onLoad = function()
 {
     this.canvas = this.document.getElementById('canvas');
 
-    this.SetDefaultHandler();
+    this.SetDefaultHandler()
 
     this.updateMessage();
     this.redrawGraph();
@@ -1193,7 +1193,7 @@ Application.prototype.SaveSVGGraphOnDisk = function (showDialogCallback)
                           
     return imageName;
 }
-                          
+
 Application.prototype.LoadGraphFromString = function (str)
 {
     var graph = new Graph();
@@ -1601,8 +1601,16 @@ Application.prototype.SaveUserSettings = function()
                 
             if (needEnd)
                 res = res + ",";
+
+            let valueJson = "";
+            if (typeof entry.value.saveToJson === "function") {
+                valueJson = entry.value.saveToJson();
+            } else {
+                valueJson = JSON.stringify(entry.value);
+            }
                 
-            res = res + "\"" + entry.field + "\"" + ":" + JSON.stringify(entry.value);
+                
+            res = res + "\"" + entry.field + "\"" + ":" + valueJson;
             needEnd = true;
         });
     
@@ -1676,6 +1684,13 @@ Application.prototype.LoadUserSettings = function(json)
                 }
                 else
                 {
+                    if (typeof entry.value.loadFromJson === "function") {
+                        entry.value.loadFromJson(parsedSave[entry.field], function () {
+                                setTimeout( function() { app.redrawGraph() }, 1000);
+                            });
+                        return;
+                    }
+
                     if (!entry.deep)
                         entry.value.Clear();
 

script/BaseBackgroundDrawer.js

@@ -7,12 +7,14 @@ function CommonBackgroundStyle()
 {
 	this.commonColor   = '#ffffff';
 	this.commonOpacity = 1.0;
+    this.image = null;
 }
 
 CommonBackgroundStyle.prototype.Clear = function ()
 {
   delete this.commonColor;
   delete this.commonOpacity;
+  delete this.image;
 }
 
 CommonBackgroundStyle.prototype.ShouldLoad = function (field)
@@ -20,6 +22,25 @@ CommonBackgroundStyle.prototype.ShouldLoad = function (field)
   return true;
 }
 
+CommonBackgroundStyle.prototype.saveToJson = function (field)
+{
+  return JSON.stringify({commonColor: this.commonColor, commonOpacity: this.commonOpacity, image: this.image != null ? this.image.src : null});
+}
+
+CommonBackgroundStyle.prototype.loadFromJson = function (json, callbackOnLoaded)
+{
+  this.commonColor   = json["commonColor"];
+  this.commonOpacity = json["commonOpacity"];
+  this.image = null;
+  if (typeof json["image"] === 'string') {
+    this.image = new Image();
+    this.image.onload = function() {
+      callbackOnLoaded();
+    }
+    this.image.src = json["image"];
+  }
+}
+
 PrintBackgroundStyle.prototype = Object.create(CommonBackgroundStyle.prototype);
 
 function PrintBackgroundStyle()
@@ -28,6 +49,7 @@ function PrintBackgroundStyle()
 
 	this.commonColor   = '#ffffff';
 	this.commonOpacity = 1.0;
+    this.image = null;
 }
 
 function BaseBackgroundDrawer(context)
@@ -43,11 +65,25 @@ BaseBackgroundDrawer.prototype.Draw = function(style, width, height, position, s
     
     context.clearRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
     
+    var oldOpacity = context.globalAlpha;
     if (style.commonOpacity > 0.0)
     {
         context.globalAlpha = style.commonOpacity;
         context.fillStyle   = style.commonColor;
-        context.fillRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
-        context.globalAlpha = 1.0;
+        context.fillRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);    
+        this.DrawImage(style, width, height, position, scale);        
     }
+    context.globalAlpha = oldOpacity;    
+}
+
+BaseBackgroundDrawer.prototype.DrawImage = function(style, width, height, position, scale) 
+{
+    if (style.image == null) {
+        return;
+    }
+
+    var context = this.context;
+    
+    context.clearRect(0, 0, style.image.width, style.image.height);    
+    context.drawImage(style.image, 0, 0)
 }

script/EventHandlers.js

@@ -2344,11 +2344,45 @@ function SetupBackgroundStyle(app)
 {
   BaseHandler.apply(this, arguments);
   this.message = "";	
+  this.maxImageSize = 2048;
 }
 
 // inheritance.
 SetupBackgroundStyle.prototype = Object.create(BaseHandler.prototype);
 
+
+SetupBackgroundStyle.prototype.handleImportBackgroundFile = function(files, updateBackgroundCallback) {
+    var graphFileToLoad = files[0];
+    var re = /(?:\.([^.]+))?$/;
+    var imageExtension = re.exec(graphFileToLoad.name)[1].toLowerCase();
+
+    if (!(imageExtension == "png" || imageExtension == "jpg" || imageExtension == "jpeg")) {
+        $("#UploadBackgroundImageError").html(g_wrongImageFormatPNGAndJPEG);
+        $("#UploadBackgroundImageError").show();
+        return;
+    }
+
+    let self = this;
+    var fileReader = new FileReader();
+    fileReader.onload = function(fileLoadedEvent){
+        var textFromFileLoaded = fileLoadedEvent.target.result;        
+        var image = new Image();
+        image.onload = function() {
+            console.log(this.width + 'x' + this.height);
+            if (this.width > self.maxImageSize || this.height > self.maxImageSize) {
+                $("#UploadBackgroundImageError").html(formatString(g_wrongImageSizeP1, [self.maxImageSize]));
+                $("#UploadBackgroundImageError").show();
+                return;
+            }
+            updateBackgroundCallback(image);
+          }
+        image.src = 'data:image/' + imageExtension + ';base64' + textFromFileLoaded;
+        ImportBackgroundImage.value = "";
+    };
+
+    fileReader.readAsDataURL(graphFileToLoad);
+}
+
 SetupBackgroundStyle.prototype.show = function()
 {
 	var handler = this;
@@ -2372,12 +2406,44 @@ SetupBackgroundStyle.prototype.show = function()
         var context = canvas.getContext('2d');    
         
         context.save();
-
+        let bestScale = 1.0;
+        if (style.image != null) {
+            let wScale = canvas.width / style.image.width;
+            let hScale = canvas.height / style.image.height;
+            bestScale = Math.min(wScale, hScale);         
+            context.scale(bestScale, bestScale);
+        }
         var backgroundDrawer = new BaseBackgroundDrawer(context);
-        backgroundDrawer.Draw(style, canvas.width, canvas.height, new Point(0, 0), 1.0);
+        backgroundDrawer.Draw(style, canvas.width, canvas.height, new Point(0, 0), bestScale);
         
         context.restore();
+
+        if (style.image != null) {
+            $( "#RemoveBackgroundFile" ).show();
+        } else {
+            $( "#RemoveBackgroundFile" ).hide();
+        }
     }
+
+    var loadFile = function() {
+        userAction("background_loadFromFile");
+        
+        if (ImportBackgroundImage) {
+            ImportBackgroundImage.click();
+        }
+    }
+
+    var updateBackgroundImage = function(image) {
+        style.image = image;
+        $("#UploadBackgroundImageError").hide();
+        redrawVertex();
+    }
+
+    var clearBackgroundImage = function() {
+        style.image = null;
+        $("#UploadBackgroundImageError").hide();
+        redrawVertex();
+    }    
     
 	dialogButtons[g_default] = 
            {
@@ -2415,11 +2481,21 @@ SetupBackgroundStyle.prototype.show = function()
 		dialogClass: 'EdgeDialog'
 	});
     
-    redrawVertex();
+    try {
+        redrawVertex();
+    } catch (error) {
+        console.error(error);
+    }
 
     $( "#backgroundColor" ).unbind();
     $( "#backgroundTransporent" ).unbind();
+    $( "#LoadBackgroundFile" ).unbind();
+    $( "#ImportBackgroundImage" ).unbind();    
+    $( "#RemoveBackgroundFile" ).unbind();    
     
     $( "#backgroundColor" ).change(redrawVertex);
     $( "#backgroundTransporent" ).change(redrawVertex);
+    $( "#LoadBackgroundFile" ).click(loadFile);
+    $( "#ImportBackgroundImage" ).change( function ()  {handler.handleImportBackgroundFile(this.files, updateBackgroundImage);});
+    $( "#RemoveBackgroundFile" ).click(clearBackgroundImage);
 }

script/texts.js

@@ -203,6 +203,9 @@ var g_MaxCliqueNotFound = "Max Clique is not found";
 var g_MaxCliqueSizeIs = "Max Clique size is ";
 var g_MaxCliqueContains = ". Clique contains these vertecies: ";
 
+var g_wrongImageFormatPNGAndJPEG = "Wrong image format. We support only JPEG and PNG.";
+var g_wrongImageSizeP1 = "Image size is too big. Image size must be less than {0} pixels.";
+
 function loadTexts()
 {
 	g_textsSelectAndMove  = document.getElementById("SelectAndMoveObject").innerHTML;
@@ -414,4 +417,13 @@ function loadTexts()
     g_MaxCliqueNotFound = document.getElementById("maxCliqueNotFound").innerHTML;
     g_MaxCliqueSizeIs = document.getElementById("maxCliqueSizeIs").innerHTML;
     g_MaxCliqueContains = document.getElementById("maxCliqueContains").innerHTML;   
+
+    g_wrongImageFormatPNGAndJPEG = document.getElementById("wrongImageFormatPNGAndJPEG").innerHTML;
+    g_wrongImageSizeP1 = document.getElementById("wrongImageSizeP1").innerHTML; 
 }
+
+function formatString(string, params) {
+    return string.replace(/{(\d+)}/g, (match, index) => {
+      return typeof params[index] !== 'undefined' ? params[index] : match;
+    });
+  }