temp. Added multiple selection with ctrl. Not finished.

script/Appilcation.js

@@ -49,6 +49,7 @@ function Application(document, window)
     
     this.edgePresets = [1, 3, 5, 7, 11, 42];
     this.maxEdgePresets = 6;
+    this.selectionRect  = null;
 };
 
 // List of graph.
@@ -187,7 +188,9 @@ Application.prototype._redrawGraph = function()
     
     this.RedrawEdges(context);
     this.RedrawNodes(context);
-    
+    if (this.selectionRect != null)
+      this.RedrawSelectionRect(context);
+
     context.restore();
     
     return context;
@@ -393,6 +396,19 @@ Application.prototype.RedrawNodes = function(context, ForceCommonStyle, ForceSel
     }	
 }
 
+Application.prototype.RedrawSelectionRect = function(context)
+{
+  context.lineWidth    = 1.0 / this.canvasScale;
+  context.strokeStyle  = 0xCCCCCC;	
+  context.setLineDash([5, 3]);
+  context.beginPath();
+  context.rect(this.selectionRect.left(), this.selectionRect.top(), 
+               this.selectionRect.size().x, this.selectionRect.size().y);
+  context.closePath();
+  context.stroke();  
+  context.setLineDash([0, 0]);
+}
+
 Application.prototype.updateMessage = function()
 {
 	this.document.getElementById('message').innerHTML = this.handler.GetMessage(); 
@@ -1597,4 +1613,9 @@ Application.prototype.UpdateEdgePresets = function(weight)
 Application.prototype.GetEdgePresets = function()
 {
     return this.edgePresets;
+}
+
+Application.prototype.SetSelectionRect = function(rect)
+{
+  this.selectionRect = rect;
 }

script/EventHandlers.js

@@ -205,18 +205,16 @@ function DefaultHandler(app)
 {
 	BaseHandler.apply(this, arguments);
 	this.message = g_textsSelectAndMove;
+        this.selectedObjects = [];
+        this.dragObject     = null;
+        this.selectedObject = null;
+	this.prevPosition   = null;
 }
 
 // inheritance.
 DefaultHandler.prototype = Object.create(BaseHandler.prototype);
-// Current drag object.
-DefaultHandler.prototype.dragObject     = null;
-// Selected object.
-DefaultHandler.prototype.selectedObject = null;
 // Is pressed
 DefaultHandler.prototype.pressed = false;
-// Prev position.
-DefaultHandler.prototype.prevPosition = false;
 // Cuvled change value.
 DefaultHandler.prototype.curvedValue    = 0.1;
 
@@ -224,36 +222,83 @@ DefaultHandler.prototype.MouseMove = function(pos)
 {
 	if (this.dragObject)
 	{
-        this.dragObject.position.x = pos.x;
-        this.dragObject.position.y = pos.y;
+                this.dragObject.position.x = pos.x;
+                this.dragObject.position.y = pos.y;
 		this.needRedraw = true;
 	}
-    else if (this.pressed)
-    {
-        this.app.onCanvasMove((new Point(pos.x, pos.y)).subtract(this.prevPosition).multiply(this.app.canvasScale));
-        this.needRedraw = true;
-        //this.prevPosition = pos;
-    }
+        else if (this.selectedObjects.length > 0 && this.pressed)
+        {
+                var offset = (new Point(pos.x, pos.y)).subtract(this.prevPosition);
+                for (var i = 0; i < this.selectedObjects.length; i ++)
+                {
+                  var object = this.selectedObjects[i];
+                  if (object instanceof BaseVertex)
+                  {
+                    object.position = object.position.add(offset);
+                  }
+                }
+                this.prevPosition = pos;
+		this.needRedraw = true;                
+        }
+        else if (this.pressed)
+        {
+          if (g_ctrlPressed) 
+          {
+               // Rect select.
+               var newPos = new Point(pos.x, pos.y);
+               this.app.SetSelectionRect(new Rect(newPos.min(this.prevPosition), newPos.max(this.prevPosition)));
+               this.needRedraw = true;
+          }
+          else
+          {
+                // Move work space
+                this.app.onCanvasMove((new Point(pos.x, pos.y)).subtract(this.prevPosition).multiply(this.app.canvasScale));
+                this.needRedraw = true;
+          }
+        }
 }
 
 DefaultHandler.prototype.MouseDown = function(pos)
 {
-	this.selectedObject = null;
 	this.dragObject     = null;
 	var selectedObject = this.GetSelectedObject(pos);
-	if (selectedObject != null)
-	{
-		this.selectedObject = selectedObject;
-	}	
-	if ((selectedObject instanceof BaseVertex) && selectedObject != null)
-	{
-		this.dragObject = selectedObject;
-		this.message = g_moveCursorForMoving;		
-	}	
+	var severalSelect  = g_ctrlPressed;
+
+	if (selectedObject == null || (!severalSelect && !this.selectedObjects.includes(selectedObject)))
+        {
+  	  this.selectedObject = null;
+          this.selectedObjects = [];
+        }        
+
+        if ((severalSelect || this.selectedObjects.includes(selectedObject)) && (this.selectedObjects.length > 0 || this.selectedObject != null) && selectedObject != null) 
+        {
+          if (this.selectedObjects.length == 0)
+          {
+            this.selectedObjects.push(this.selectedObject);
+            this.selectedObject = null;
+            this.selectedObjects.push(selectedObject);
+          }
+          else if (!this.selectedObjects.includes(selectedObject))
+          {
+            this.selectedObjects.push(selectedObject);
+          }
+        }
+        else
+        {
+          if (selectedObject != null)
+  	  {
+	    this.selectedObject = selectedObject;
+ 	  }	
+ 	  if ((selectedObject instanceof BaseVertex) && selectedObject != null)
+	  { 
+	    this.dragObject = selectedObject;
+	    this.message    = g_moveCursorForMoving;		
+	  }	
+        }
 	this.needRedraw = true;
-    this.pressed    = true;
-    this.prevPosition = pos;
-    this.app.canvas.style.cursor = "move";
+	this.pressed    = true;
+	this.prevPosition = pos;
+	this.app.canvas.style.cursor = "move";
 }
 
 DefaultHandler.prototype.RenameVertex = function(text)
@@ -271,6 +316,9 @@ DefaultHandler.prototype.MouseUp = function(pos)
 	this.dragObject = null;
     this.pressed    = false;
     this.app.canvas.style.cursor = "auto";
+
+    this.app.SetSelectionRect(null);
+
     if (this.selectedObject != null && (this.selectedObject instanceof BaseVertex))
     {
         this.message = g_textsSelectAndMove + " <button type=\"button\" id=\"renameButton\" class=\"btn btn-default btn-xs\" style=\"float:right;z-index:1;position: relative;\">" + g_renameVertex + "</button>";
@@ -354,11 +402,15 @@ DefaultHandler.prototype.MouseUp = function(pos)
             userAction("Edge.Bend");
         });
     }
+    else if (this.selectedObjects.length > 0)
+    {
+      this.message = "Select more use ctrl + dublicate selected, remove selecrted.";
+    }
 }
 
 DefaultHandler.prototype.GetSelectedGroup = function(object)
 {
-	return (object == this.dragObject) || (object == this.selectedObject) ? 1 : 0;
+  return (object == this.dragObject) || (object == this.selectedObject) ? 1 : 0 || this.selectedObjects.includes(object);
 }
 
 

script/main.js

@@ -26,6 +26,7 @@ var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1
            || navigator.userAgent.toLowerCase().indexOf("trident") != -1);
 
 var buttonsList = ['AddGraph', 'ConnectGraphs', 'DeleteObject', 'Default'];
+var g_ctrlPressed = false;
 
 function restButtons (me)
 {
@@ -289,6 +290,15 @@ function postLoadPage()
             selectHandler('Default', 'default');
         }
     }
+ 
+    $(document).keydown(function(event) {
+        if (event.which == "17")
+          g_ctrlPressed = true;
+    });
+
+    $(document).keyup(function() {
+      g_ctrlPressed = false;
+    });
 
 	document.getElementById('ShowAdjacencyMatrix').onclick = function ()
 		{

script/point.js

@@ -130,3 +130,13 @@ Rect.prototype.size = function()
 {
     return this.maxPoint.subtract(this.minPoint);
 };
+
+Rect.prototype.left = function()
+{
+    return this.minPoint.x;
+};
+
+Rect.prototype.top = function()
+{
+    return this.minPoint.y;
+};