Added multi select using ctrl

2025-07-01 23:36:00 +00:00 · 2020-05-05 20:23:55 +02:00 · 2020-05-05 20:23:55 +02:00 · 6e17b9719c
commit 6e17b9719c
parent 42c592fe2f
12 changed files with 254 additions and 21 deletions
--- a/lang/en/home.php
+++ b/lang/en/home.php
@ -12,7 +12,7 @@
    $g_lang["save_weight_choose"] = "use value for the next edges";
    $g_lang["default_weight"] = "has no weight";
    $g_lang["browser_no_support"] = "Your browser is not supported";
-    $g_lang["select_and_move_objects"] = "Select and move objects by mouse or move workspace";
+    $g_lang["select_and_move_objects"] = "Select and move objects by mouse or move workspace.";
    $g_lang["move_cursor_for_moving"] = "Drag cursor to move objects";
    $g_lang["add_graph"] = "Add edge";
    $g_lang["orint_edge"] = "Directed";
@ -175,4 +175,10 @@
    $g_lang["add_edge"] = "add (multigraph)";
    $g_lang["french_add"] = "We have added French translation 🇫🇷";
    $g_lang["text_above_edge"] = "Text above edge";
+
+    $g_lang["select_groupe_mac"] = "Use Cmd⌘ to select several objects.";
+    $g_lang["select_groupe_win"] = "Use Ctrl to select several objects.";
+    $g_lang["drag_select_group"] = "Drag group.";
+    $g_lang["copy_select_group"] = "Copy group";
+    $g_lang["remove_select_group"] = "Delete group";
 ?>
--- a/lang/fr/home.php
+++ b/lang/fr/home.php
@ -12,7 +12,7 @@
    $g_lang["save_weight_choose"] = "Utiliser la valeur pour l'arête suivante";
    $g_lang["default_weight"] = "sans poid";
    $g_lang["browser_no_support"] = "Votre navigateur n'est pas compatible";
-    $g_lang["select_and_move_objects"] = "Sélectionner et déplacer les objets avec la souris ou déplacer l'espace de travail";
+    $g_lang["select_and_move_objects"] = "Sélectionner et déplacer les objets avec la souris ou déplacer l'espace de travail.";
    $g_lang["move_cursor_for_moving"] = "Faire glisser le curseur pour déplacer l'objet";
    $g_lang["add_graph"] = "Ajouter une arête";
    $g_lang["orint_edge"] = "Orienté";
@ -144,4 +144,10 @@
    $g_lang["replace_edge"] = "remplacer l'actuel";
    $g_lang["add_edge"] = "ajout (multigraphe)";
    $g_lang["text_above_edge"] = "Texte au-dessus du bord";
+
+    $g_lang["select_groupe_mac"] = "Utiliser Cmd⌘ pour sélectionner plusieurs objets.";
+    $g_lang["select_groupe_win"] = "Utiliser Ctrl pour sélectionner plusieurs objets.";
+    $g_lang["drag_select_group"] = "Faites glisser le groupe.";
+    $g_lang["copy_select_group"] = "Groupe de copie";
+    $g_lang["remove_select_group"] = "Supprimer le groupe";
 ?>
--- a/lang/ru/home.php
+++ b/lang/ru/home.php
@ -12,7 +12,7 @@
    $g_lang["save_weight_choose"] = "использовать значение для следующих дуг";
    $g_lang["default_weight"] = "ненагруженный";
    $g_lang["browser_no_support"] = "Ваш браузер не поддерживается. Попробуйте обновить ваш браузер до последней версии.";
-    $g_lang["select_and_move_objects"] = "Выделите и перемещайте объекты или перемещайте рабочую область";
+    $g_lang["select_and_move_objects"] = "Выделите и перемещайте объекты или перемещайте рабочую область.";
    $g_lang["move_cursor_for_moving"] = "Перемещайте курсор для перемещения объекта";
    $g_lang["add_graph"] = "Добавить ребро";
    $g_lang["orint_edge"] = "Ориентированную";
@ -177,4 +177,10 @@
    $g_lang["graph_is_multi_message"]   = "Мультиграф не поддерживает все алгоритмы";
    $g_lang["graph_is_general_message"] = "";
    $g_lang["text_above_edge"] = "Текст над дугой";
+
+    $g_lang["select_groupe_mac"] = "Выделите несколько объектов используя Cmd⌘.";
+    $g_lang["select_groupe_win"] = "Выделите несколько объектов используя Ctrl.";
+    $g_lang["drag_select_group"] = "Перемещайте группу.";
+    $g_lang["copy_select_group"] = "Копировать";
+    $g_lang["remove_select_group"] = "Удалить";
 ?>
--- a/script/Appilcation.js
+++ b/script/Appilcation.js
@ -399,14 +399,16 @@ 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.strokeStyle  = this.edgeSelectedStyles[0].strokeStyle;	
+  context.setLineDash([6, 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]);
+  context.stroke();
+    
+  context.setLineDash([]);
 }

 Application.prototype.updateMessage = function()
@ -1618,4 +1620,9 @@ Application.prototype.GetEdgePresets = function()
 Application.prototype.SetSelectionRect = function(rect)
 {
  this.selectionRect = rect;
+}
+
+Application.prototype.GetSelectionRect = function(rect)
+{
+  return this.selectionRect;
 }
--- a/script/BaseEdge.js
+++ b/script/BaseEdge.js
@ -27,6 +27,24 @@ function BaseEdge(vertex1, vertex2, isDirect, weight, upText)
      this.SetWeight(weight);
 }

+BaseEdge.prototype.copyFrom = function(other)
+{
+    this.vertex1    = other.vertex1;
+    this.vertex2    = other.vertex2;
+    this.arrayStyleStart  = other.arrayStyleStart;
+    this.arrayStyleFinish = other.arrayStyleFinish;
+    
+    this.isDirect  = other.isDirect;
+    this.weight    = other.weight;
+    this.text      = other.text;
+    this.useWeight = other.useWeight;
+    this.id        = other.id;
+    this.model     = new EdgeModel();
+    this.model.copyFrom(other.model);
+    
+    this.upText    = other.upText;
+}
+
 BaseEdge.prototype.SaveToXML = function ()
 {
 	return "<edge " + 
--- a/script/BaseVertex.js
+++ b/script/BaseVertex.js
@ -17,6 +17,17 @@ function BaseVertex(x, y, vertexEnumType)

 BaseVertex.prototype.position = new Point(0, 0);

+BaseVertex.prototype.copyFrom = function (other)
+{
+    this.position = new Point(other.position.x, other.position.y);
+    this.id       = other.id;
+    this.mainText = other.mainText;
+    this.upText   = other.upText;
+    this.vertexEnumType = other.vertexEnumType;
+    this.model    = new VertexModel();
+    this.hasUndefinedPosition = other.hasUndefinedPosition;
+}
+
 BaseVertex.prototype.SaveToXML = function ()
 {
 	return "<node " + 
@ -48,7 +59,8 @@ BaseVertex.prototype.LoadFromXML = function (xml)
 BaseVertex.prototype.SetId = function (id)
 {
    this.id       = id;
-    this.mainText = this.vertexEnumType.GetVertexText(id);		                 
+    if (this.vertexEnumType != null)
+      this.mainText = this.vertexEnumType.GetVertexText(id);		                 
 }

 BaseVertex.prototype.diameterFactor = function ()
--- a/script/EdgeModel.js
+++ b/script/EdgeModel.js
@ -15,6 +15,14 @@ function EdgeModel()

 EdgeModel.prototype.defaultCruved = 0.1;

+EdgeModel.prototype.copyFrom = function(other)
+{
+    this.width = other.width;
+    this.type  = other.type;
+    this.curvedValue = other.curvedValue;
+    this.default     = other.default;
+}
+
 EdgeModel.prototype.SaveToXML = function ()
 {
    return "model_width=\"" + this.width + "\" " +
@ -150,3 +158,19 @@ EdgeModel.prototype.ChangeCurvedValue = function (delta)
    
    this.default = false;
 }
+
+EdgeModel.prototype.SetCurvedValue = function (value)
+{
+    if (this.type == EdgeModels.line)
+    {
+        this.type = EdgeModels.cruvled;
+        this.curvedValue = 0.0;
+    }
+
+    this.curvedValue = value;
+    
+    if (Math.abs(this.curvedValue) <= 0.01)
+        this.type = EdgeModels.line;
+    
+    this.default = false;
+}
--- a/script/EventHandlers.js
+++ b/script/EventHandlers.js
@ -101,11 +101,11 @@ BaseHandler.prototype.GetMessage = function()
 }


-BaseHandler.prototype.MouseMove = function(pos) {;}
+BaseHandler.prototype.MouseMove = function(pos) {}

-BaseHandler.prototype.MouseDown = function(pos) {;}
+BaseHandler.prototype.MouseDown = function(pos) {}

-BaseHandler.prototype.MouseUp   = function(pos) {;}
+BaseHandler.prototype.MouseUp   = function(pos) {}

 BaseHandler.prototype.GetSelectedGroup = function(object) 
 {
@ -204,11 +204,14 @@ BaseHandler.prototype.UpdateSecondVertexMenu = function()
 function DefaultHandler(app)
 {
 	BaseHandler.apply(this, arguments);
-	this.message = g_textsSelectAndMove;
+	this.message = g_textsSelectAndMove + " <span class=\"hidden-phone\">" + g_selectGroupText + "</span>";
        this.selectedObjects = [];
        this.dragObject     = null;
        this.selectedObject = null;
 	this.prevPosition   = null;
+    this.groupingSelect = false;
+    this.selectedLogRect    = false;
+    this.selectedLogCtrl    = false;
 }

 // inheritance.
@ -226,7 +229,7 @@ DefaultHandler.prototype.MouseMove = function(pos)
                this.dragObject.position.y = pos.y;
 		this.needRedraw = true;
 	}
-        else if (this.selectedObjects.length > 0 && this.pressed)
+        else if (this.selectedObjects.length > 0 && this.pressed && !this.groupingSelect)
        {
                var offset = (new Point(pos.x, pos.y)).subtract(this.prevPosition);
                for (var i = 0; i < this.selectedObjects.length; i ++)
@ -242,12 +245,18 @@ DefaultHandler.prototype.MouseMove = function(pos)
        }
        else if (this.pressed)
        {
-          if (g_ctrlPressed) 
+          if (this.groupingSelect) 
          {
               // Rect select.
               var newPos = new Point(pos.x, pos.y);
               this.app.SetSelectionRect(new Rect(newPos.min(this.prevPosition), newPos.max(this.prevPosition)));
+               this.SelectObjectInRect(this.app.GetSelectionRect());    
               this.needRedraw = true;
+               if (!this.selectedLogRect)
+               {
+                 userAction("GroupSelected.SelectRect");
+                 this.selectedLogRect = true;
+               }
          }
          else
          {
@ -265,10 +274,11 @@ DefaultHandler.prototype.MouseDown = function(pos)
 	var severalSelect  = g_ctrlPressed;

 	if (selectedObject == null || (!severalSelect && !this.selectedObjects.includes(selectedObject)))
-        {
-  	  this.selectedObject = null;
+    {
+  	      this.selectedObject = null;
          this.selectedObjects = [];
-        }        
+          this.groupingSelect = g_ctrlPressed;
+    }        

        if ((severalSelect || this.selectedObjects.includes(selectedObject)) && (this.selectedObjects.length > 0 || this.selectedObject != null) && selectedObject != null) 
        {
@ -282,6 +292,16 @@ DefaultHandler.prototype.MouseDown = function(pos)
          {
            this.selectedObjects.push(selectedObject);
          }
+          else if (severalSelect && this.selectedObjects.includes(selectedObject))
+          {
+            var index = this.selectedObjects.indexOf(selectedObject);
+            this.selectedObjects.splice(index, 1);
+          }
+          if (!this.selectedLogCtrl)
+          {
+            userAction("GroupSelected.SelectCtrl");
+            this.selectedLogCtrl = true;
+          }
        }
        else
        {
@ -312,13 +332,14 @@ DefaultHandler.prototype.RenameVertex = function(text)

 DefaultHandler.prototype.MouseUp = function(pos) 
 {
-	this.message = g_textsSelectAndMove;
+	this.message = g_textsSelectAndMove + " <span class=\"hidden-phone\">" + g_selectGroupText + "</span>";
 	this.dragObject = null;
    this.pressed    = false;
    this.app.canvas.style.cursor = "auto";

    this.app.SetSelectionRect(null);
-
+    
+    this.groupingSelect = false;
    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>";
@ -404,8 +425,94 @@ DefaultHandler.prototype.MouseUp = function(pos)
    }
    else if (this.selectedObjects.length > 0)
    {
-      this.message = "Select more use ctrl + dublicate selected, remove selecrted.";
+        this.message = g_dragGroupText + " <span class=\"hidden-phone\">" + g_selectGroupText + "</span>"
+        + "<span style=\"float:right;\">"
+        + "<button type=\"button\" id=\"DublicateSelected\" class=\"btn btn-default btn-xs\">"
+        + g_copyGroupeButton + "</button> &nbsp &nbsp"
+        + "<button type=\"button\" id=\"RemoveSelected\" class=\"btn btn-default btn-xs\">"
+        + g_removeGroupeButton + "</button>"
+        + "</span>";
+        
+        var handler = this;
+        $('#message').unbind();
+        
+        $('#message').on('click', '#DublicateSelected', function(){
+            userAction("GroupSelected.Dublicate");
+            
+            var newSelected = [];
+            var copyVertex  = {};
+            
+            // Copy vertex
+            for(var i = 0; i < handler.selectedObjects.length; i ++)
+            {
+              var object = handler.selectedObjects[i];
+              if (object instanceof BaseVertex)
+              {
+                var newObject   = new BaseVertex()
+                newObject.copyFrom(object);
+                newObject.vertexEnumType = null;
+                handler.app.AddNewVertex(newObject);
+                var vertex      = newObject;
+                var diameter    = (new VertexModel()).diameter;
+                vertex.position.offset(diameter, diameter);
+                newSelected.push(vertex);
+                copyVertex[object.id] = vertex;
+              }
+            }
+            
+            // Copy edge
+            for (var i = 0; i < handler.selectedObjects.length; i ++)
+            {
+              var object = handler.selectedObjects[i];
+              if (object instanceof BaseEdge)
+              {
+                var newObject = new BaseEdge()
+                newObject.copyFrom(object);
+                  
+                var toNewVertex = false;
+                if (newObject.vertex1.id in copyVertex)
+                {
+                    newObject.vertex1 = copyVertex[newObject.vertex1.id];
+                    toNewVertex = true;
+                }
+                if (newObject.vertex2.id in copyVertex)
+                {
+                    newObject.vertex2 = copyVertex[newObject.vertex2.id];
+                    toNewVertex = true;
+                }
+                  
+                handler.app.AddNewEdge(newObject);
+                if (!toNewVertex)
+                {
+                    var neighbourEdges = handler.app.graph.getNeighbourEdges(newObject);
+                    if (neighbourEdges.length >= 1)
+                    {
+                        var cruvled = handler.app.GetAvalibleCruvledValue(neighbourEdges, newObject);
+                        newObject.model.SetCurvedValue(cruvled);
+                    }
+                }
+                newSelected.push(newObject);
+              }
+            }
+
+            handler.selectedObjects = newSelected;
+            handler.needRedraw      = true;
+            handler.app.redrawGraph();
+        });
+        
+        $('#message').on('click', '#RemoveSelected', function(){
+            userAction("GroupSelected.Remove");
+            
+            for(var i = 0; i < handler.selectedObjects.length; i ++)
+              handler.app.DeleteObject(handler.selectedObjects[i]);
+            handler.selectedObjects = [];
+            handler.needRedraw = true;
+            handler.app.redrawGraph();
+            handler.message = g_textsSelectAndMove + " <span class=\"hidden-phone\">" + g_selectGroupText + "</span>";
+        });
    }
+    
+    this.needRedraw = true;
 }

 DefaultHandler.prototype.GetSelectedGroup = function(object)
@ -413,6 +520,27 @@ DefaultHandler.prototype.GetSelectedGroup = function(object)
  return (object == this.dragObject) || (object == this.selectedObject) ? 1 : 0 || this.selectedObjects.includes(object);
 }

+DefaultHandler.prototype.SelectObjectInRect = function (rect)
+{
+    this.selectedObjects = [];
+    var vertices = this.app.graph.vertices;
+    for (var i = 0; i < vertices.length; i ++)
+    {
+		if (rect.isIn(vertices[i].position) && !this.selectedObjects.includes(vertices[i]))
+            this.selectedObjects.push(vertices[i]);
+	}
+
+	// Selected Arc.
+    var edges = this.app.graph.edges;
+    for (var i = 0; i < edges.length; i ++)
+    {
+        var edge = edges[i];
+        
+        if (rect.isIn(edge.vertex1.position) && rect.isIn(edge.vertex2.position) && !this.selectedObjects.includes(edge))
+            this.selectedObjects.push(edge);
+	}
+}
+

 /**
 * Add Graph handler.
--- a/script/main.js
+++ b/script/main.js
@ -292,7 +292,7 @@ function postLoadPage()
    }
 
    $(document).keydown(function(event) {
-        if (event.which == "17")
+        if (event.which == "17" || event.which == "91")
          g_ctrlPressed = true;
    });

--- a/script/point.js
+++ b/script/point.js
@ -140,3 +140,9 @@ Rect.prototype.top = function()
 {
    return this.minPoint.y;
 };
+
+Rect.prototype.isIn = function(v)
+{
+    return this.minPoint.x <= v.x && this.minPoint.y <= v.y && 
+           this.maxPoint.x > v.x  && this.maxPoint.y > v.y;
+};
--- a/script/texts.js
+++ b/script/texts.js
@ -107,6 +107,10 @@ var g_backgroundStyle = "Bacgkround style";
 var g_GrapsIsMultiMessage   = "Graph is multigraph";
 var g_GrapsIsGeneralMessage = "";
 var g_DefaultWeightPreset   = "no weight";
+var g_dragGroupText         = "Drag group.";
+var g_selectGroupText       = "Select using ctrl";
+var g_copyGroupeButton      = "Dublicate";
+var g_removeGroupeButton    = "Remove objects";

 function loadTexts()
 {
@ -216,4 +220,14 @@ function loadTexts()
    g_GrapsIsMultiMessage   = document.getElementById("graphIsMultiMessage").innerHTML;
    g_GrapsIsGeneralMessage = document.getElementById("graphIsGeneralMessage").innerHTML;
    g_DefaultWeightPreset   = document.getElementById("defaultWeightPreset").innerHTML;
+    
+    var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
+    if (isMac)
+        g_selectGroupText       = document.getElementById("selectGroupMac").innerHTML;
+    else
+        g_selectGroupText       = document.getElementById("selectGroupWin").innerHTML;
+    
+    g_dragGroupText         = document.getElementById("dragSelectedGroup").innerHTML;
+    g_copyGroupeButton      = document.getElementById("copySelectedGroup").innerHTML;
+    g_removeGroupeButton    = document.getElementById("removeSelectedGroup").innerHTML;
 }
--- a/tpl/home.php
+++ b/tpl/home.php
@ -564,6 +564,12 @@
    <p id="graphIsGeneralMessage" class="translation"><?= L('graph_is_general_message')?></p>
    <p id="defaultWeightPreset" class="translation"><?= L('default_weight')?></p>
        
+    <p id="selectGroupMac" class="translation"><?= L('select_groupe_mac')?></p>
+    <p id="selectGroupWin" class="translation"><?= L('select_groupe_win')?></p>
+    <p id="dragSelectedGroup" class="translation"><?= L('drag_select_group')?></p>
+    <p id="copySelectedGroup" class="translation"><?= L('copy_select_group')?></p>
+    <p id="removeSelectedGroup" class="translation"><?= L('remove_select_group')?></p>
+        
 </section>
 <!--
 <script>