From 42c592fe2f3c630a9f38dd2e9ccf7604fd33e720 Mon Sep 17 00:00:00 2001 From: Oleg Sh Date: Mon, 4 May 2020 20:28:57 +0200 Subject: [PATCH] temp. Added multiple selection with ctrl. Not finished. --- script/Appilcation.js | 23 ++++++++- script/EventHandlers.js | 108 +++++++++++++++++++++++++++++----------- script/main.js | 10 ++++ script/point.js | 10 ++++ 4 files changed, 122 insertions(+), 29 deletions(-) diff --git a/script/Appilcation.js b/script/Appilcation.js index 90960b5..279a6f0 100644 --- a/script/Appilcation.js +++ b/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; } \ No newline at end of file diff --git a/script/EventHandlers.js b/script/EventHandlers.js index 935b964..49c9b09 100644 --- a/script/EventHandlers.js +++ b/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 + " "; @@ -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); } diff --git a/script/main.js b/script/main.js index c1460d8..19a0111 100644 --- a/script/main.js +++ b/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 () { diff --git a/script/point.js b/script/point.js index 00bf2c8..326510b 100644 --- a/script/point.js +++ b/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; +};