From 6e17b9719c9338024e1bdc02a1b341b0ca45fcfc Mon Sep 17 00:00:00 2001 From: Unick Soft Date: Tue, 5 May 2020 20:23:55 +0200 Subject: [PATCH] Added multi select using ctrl --- lang/en/home.php | 8 ++- lang/fr/home.php | 8 ++- lang/ru/home.php | 8 ++- script/Appilcation.js | 15 ++-- script/BaseEdge.js | 18 +++++ script/BaseVertex.js | 14 +++- script/EdgeModel.js | 24 +++++++ script/EventHandlers.js | 152 ++++++++++++++++++++++++++++++++++++---- script/main.js | 2 +- script/point.js | 6 ++ script/texts.js | 14 ++++ tpl/home.php | 6 ++ 12 files changed, 254 insertions(+), 21 deletions(-) diff --git a/lang/en/home.php b/lang/en/home.php index e0520ad..0e4e736 100755 --- 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"; ?> diff --git a/lang/fr/home.php b/lang/fr/home.php index f6d10f9..b18cdd1 100644 --- 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"; ?> \ No newline at end of file diff --git a/lang/ru/home.php b/lang/ru/home.php index 01d49ec..3ec3953 100755 --- 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"] = "Удалить"; ?> diff --git a/script/Appilcation.js b/script/Appilcation.js index 279a6f0..fb71077 100644 --- 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; } \ No newline at end of file diff --git a/script/BaseEdge.js b/script/BaseEdge.js index 09ee243..cd5faaa 100755 --- 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 "" + g_selectGroupText + ""; 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 + " " + g_selectGroupText + ""; 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 + " "; @@ -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 + " " + g_selectGroupText + "" + + "" + + "    " + + "" + + ""; + + 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 + " " + g_selectGroupText + ""; + }); } + + 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. diff --git a/script/main.js b/script/main.js index 19a0111..55974ba 100644 --- 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; }); diff --git a/script/point.js b/script/point.js index 326510b..46e4be6 100644 --- 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; +}; diff --git a/script/texts.js b/script/texts.js index 53dba32..3b329ee 100644 --- 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; } diff --git a/tpl/home.php b/tpl/home.php index 5f1798c..d7da530 100755 --- a/tpl/home.php +++ b/tpl/home.php @@ -564,6 +564,12 @@

+

+

+

+

+

+