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,6 +188,8 @@ Application.prototype._redrawGraph = function()
     
     this.RedrawEdges(context);
     this.RedrawNodes(context);
+    if (this.selectionRect != null)
+      this.RedrawSelectionRect(context);
 
     context.restore();
     
@@ -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(); 
@@ -1598,3 +1614,8 @@ 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;
 
@@ -228,19 +226,65 @@ DefaultHandler.prototype.MouseMove = function(pos)
                 this.dragObject.position.y = pos.y;
 		this.needRedraw = true;
 	}
+        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;
-        //this.prevPosition = pos;
+          }
         }
 }
 
 DefaultHandler.prototype.MouseDown = function(pos)
 {
-	this.selectedObject = null;
 	this.dragObject     = null;
 	var selectedObject = this.GetSelectedObject(pos);
+	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;
@@ -250,6 +294,7 @@ DefaultHandler.prototype.MouseDown = function(pos)
 	    this.dragObject = selectedObject;
 	    this.message    = g_moveCursorForMoving;		
 	  }	
+        }
 	this.needRedraw = true;
 	this.pressed    = true;
 	this.prevPosition = pos;
@@ -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)
 {
@@ -290,6 +291,15 @@ function postLoadPage()
         }
     }
  
+    $(document).keydown(function(event) {
+        if (event.which == "17")
+          g_ctrlPressed = true;
+    });
+
+    $(document).keyup(function() {
+      g_ctrlPressed = false;
+    });
+
 	document.getElementById('ShowAdjacencyMatrix').onclick = function ()
 		{
             userAction(this.id);

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;
+};