Add vertex finder feature.

core/config/main.php

@@ -94,5 +94,5 @@
     $g_config['vote']                   = "./tmp/vote/vote.txt";
     $g_config['voteTopics']             = "./tmp/vote/voteTopics.txt_";
     $g_config['use_js_cache']           = true;
-    $g_config['engine_version']         = 97;
+    $g_config['engine_version']         = 98;
 ?>

i/css/home.css

@@ -261,7 +261,7 @@
 #CanvasMessage
 {
     position: absolute;
-    right: 48px;
+    left: 4px;
     z-index: 10;
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -272,6 +272,35 @@
                                   supported by Chrome and Opera */
 }
 
+#CanvasSearchText
+{
+    width: 120px; 
+    position: absolute; 
+    top: 6px; 
+    right: 38px; 
+    z-index: 10;
+    padding-left: 2px;
+    padding-right: 2px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    min-height: 1em;
+}
+
+#ShowArrow
+{
+    position: absolute;
+    top: 60px;
+    right: 60px;
+    width: 32px;
+    z-index: 10;
+    font-size: 32px;
+    padding: 0;
+    border: none;
+    margin: 0;
+    pointer-events: none;
+    display: none;
+}
+
 .MarginLeft
 {
     margin-right: 32px !important;

lang/bg/home.php

@@ -315,4 +315,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/ch/home.php

@@ -317,4 +317,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/cs/home.php

@@ -321,4 +321,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/de/home.php

@@ -279,4 +279,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/el/home.php

@@ -318,4 +318,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/en/home.php

@@ -323,4 +323,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/es/home.php

@@ -322,4 +322,6 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/fr/home.php

@@ -289,4 +289,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/nl/home.php

@@ -286,4 +286,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/pl/home.php

@@ -322,4 +322,6 @@ Dodaliśmy polskie tłumaczenie, Patryk</a>";
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/pt/home.php

@@ -287,4 +287,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/ru/home.php

@@ -327,4 +327,6 @@
     $g_lang['autosaved_graph'] = "Автосохранение графа";
 
     $g_lang['open_last_used_graph'] = "Открыть недавний граф";
+
+    $g_lang['vertex_name_place_holder'] = "вершина";
 ?>

lang/sv/home.php

@@ -283,4 +283,6 @@
     $g_lang['autosaved_graph'] = "Autosaved graph";
 
     $g_lang['open_last_used_graph'] = "Open Recent Graph";
+
+    $g_lang['vertex_name_place_holder'] = "vertex name";
 ?>

lang/ua/home.php

@@ -325,4 +325,6 @@
     $g_lang['autosaved_graph'] = "Автозбереження графа";
 
     $g_lang['open_last_used_graph'] = "Відкрити нещодавній граф";
+
+    $g_lang['vertex_name_place_holder'] = "вершина";
 ?>

script/features/base_handler/index.js

@@ -165,7 +165,8 @@ BaseHandler.prototype.RestoreAll = function()
 
 BaseHandler.prototype.GetSelectVertexMenu = function(menuName)
 {
-	var res = "<input list=\"vertexList" + menuName + "\" id=\"" + menuName + "\" class=\"SelectVertexInput\"/>" + 
+	var res = "<input list=\"vertexList" + menuName + "\" id=\"" + menuName + 
+      "\" class=\"SelectVertexInput\" placeholder=\"" + g_vertexNamePlaceHolder + "\" />" + 
       "<datalist id=\"vertexList" + menuName + "\">";
     
 	for (var i = 0; i < this.app.graph.vertices.length; i++)

script/pages/create_graph_by_edge_list/api/index.js.cache

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=97","/script/shared/point.js?v=97","/script/entities/edge/api/index.js?v=97","/script/entities/edge/model/BaseEdge.js?v=97","/script/entities/edge/model/EdgeModel.js?v=97","/script/entities/vertex/api/index.js?v=97","/script/entities/vertex/model/BaseVertex.js?v=97","/script/entities/vertex/model/VertexModel.js?v=97","/script/entities/graph/model/Graph.js?v=97",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=98","/script/shared/point.js?v=98","/script/entities/edge/api/index.js?v=98","/script/entities/edge/model/BaseEdge.js?v=98","/script/entities/edge/model/EdgeModel.js?v=98","/script/entities/vertex/api/index.js?v=98","/script/entities/vertex/model/BaseVertex.js?v=98","/script/entities/vertex/model/VertexModel.js?v=98","/script/entities/graph/model/Graph.js?v=98",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
 {return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()

script/pages/create_graph_by_incidence_matrix/api/index.js.cache

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=97","/script/shared/point.js?v=97","/script/entities/edge/api/index.js?v=97","/script/entities/edge/model/BaseEdge.js?v=97","/script/entities/edge/model/EdgeModel.js?v=97","/script/entities/vertex/api/index.js?v=97","/script/entities/vertex/model/BaseVertex.js?v=97","/script/entities/vertex/model/VertexModel.js?v=97","/script/entities/graph/model/Graph.js?v=97",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=98","/script/shared/point.js?v=98","/script/entities/edge/api/index.js?v=98","/script/entities/edge/model/BaseEdge.js?v=98","/script/entities/edge/model/EdgeModel.js?v=98","/script/entities/vertex/api/index.js?v=98","/script/entities/vertex/model/BaseVertex.js?v=98","/script/entities/vertex/model/VertexModel.js?v=98","/script/entities/graph/model/Graph.js?v=98",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
 {return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()

script/pages/create_graph_by_matrix/api/index.js.cache

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=97","/script/shared/point.js?v=97","/script/entities/edge/api/index.js?v=97","/script/entities/edge/model/BaseEdge.js?v=97","/script/entities/edge/model/EdgeModel.js?v=97","/script/entities/vertex/api/index.js?v=97","/script/entities/vertex/model/BaseVertex.js?v=97","/script/entities/vertex/model/VertexModel.js?v=97","/script/entities/graph/model/Graph.js?v=97","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=97","/script/pages/create_graph_by_matrix/model/main.js?v=97",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js"),include("model/createByMatrixMain.js",modulDir),include("model/main.js",modulDir)]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=98","/script/shared/point.js?v=98","/script/entities/edge/api/index.js?v=98","/script/entities/edge/model/BaseEdge.js?v=98","/script/entities/edge/model/EdgeModel.js?v=98","/script/entities/vertex/api/index.js?v=98","/script/entities/vertex/model/BaseVertex.js?v=98","/script/entities/vertex/model/VertexModel.js?v=98","/script/entities/graph/model/Graph.js?v=98","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=98","/script/pages/create_graph_by_matrix/model/main.js?v=98",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js"),include("model/createByMatrixMain.js",modulDir),include("model/main.js",modulDir)]);}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
 {return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()

script/pages/editor/model/Application.js

@@ -1295,9 +1295,20 @@ Application.prototype.SetCurrentValue = function(paramName, value)
     this.algorithmsValues[paramName] = value;
 }
 
+Application.prototype.IsPointFitOnViewport = function(point)
+{
+    var canvasWidth  = this.GetRealWidth();//  * this.canvasScale;
+    var canvasHeight = this.GetRealHeight();// * this.canvasScale;
+    var canvasPositionInverse = this.canvasPosition./*multiply(this.canvasScale).*/inverse();
+    
+    return (Math.floor(canvasPositionInverse.x) <= Math.floor(point.x) &&
+        Math.floor(canvasPositionInverse.y) <= Math.floor(point.y) && 
+        Math.floor(canvasPositionInverse.x + canvasWidth) >= Math.floor(point.x) && 
+        Math.floor(canvasPositionInverse.y + canvasHeight) >= Math.floor(point.y));
+}
+
 Application.prototype.IsGraphFitOnViewport = function()
 {
-    res = true;
     graphBBox  = this.graph.getGraphBBox();
     var canvasWidth  = this.GetRealWidth();//  * this.canvasScale;
     var canvasHeight = this.GetRealHeight();// * this.canvasScale;
@@ -1306,8 +1317,9 @@ Application.prototype.IsGraphFitOnViewport = function()
     //    + " Position" + canvasPositionInverse.toString() + " - cw = " + canvasWidth + " ch = " + canvasHeight);
     
     return (Math.floor(canvasPositionInverse.x) <= Math.floor(graphBBox.minPoint.x) &&
-        Math.floor(canvasPositionInverse.y) <= Math.floor(graphBBox.minPoint.y) && Math.floor(canvasPositionInverse.x + canvasWidth) >= Math.floor(graphBBox.maxPoint.x)
+        Math.floor(canvasPositionInverse.y) <= Math.floor(graphBBox.minPoint.y) && 
-        && Math.floor(canvasPositionInverse.y + canvasHeight) >= Math.floor(graphBBox.maxPoint.y));
+        Math.floor(canvasPositionInverse.x + canvasWidth) >= Math.floor(graphBBox.maxPoint.x) && 
+        Math.floor(canvasPositionInverse.y + canvasHeight) >= Math.floor(graphBBox.maxPoint.y));
 }
 
 Application.prototype.PushToStack = function(actionName)
@@ -2005,4 +2017,26 @@ Application.prototype.LoadLastUsedGraphsFromCookie = function()
             graph.date = new Date(graph.date);
         }
     }
-}
+}
+
+Application.prototype.GetVertexByName = function(vertex_name, withIndex)
+{
+    for (let i = 0; i < this.graph.vertices.length; i++)
+    {
+        if (this.graph.vertices[i].mainText == vertex_name)
+        {
+            return this.graph.vertices[i];
+        }
+    }
+    
+    return null;
+}
+
+Application.prototype.GraphPosToCanvasPos = function(pos)
+{
+    let windowPos = new Point(pos.x, pos.y);
+    windowPos.x = (windowPos.x + this.canvasPosition.x) * this.canvasScale;
+    windowPos.y = (windowPos.y + this.canvasPosition.y) * this.canvasScale;
+
+    return windowPos;
+}

script/pages/editor/model/texts.js

@@ -211,6 +211,8 @@ var g_originalGraph = "Original graph";
 var g_autoSavedGraph = "Autosaved graph";
 var g_selectGraphToLoad = "Would you like to load original graph or autosaved graph?";
 
+var g_vertexNamePlaceHolder = "vertex name";
+
 function loadTexts()
 {
 	g_textsSelectAndMove  = document.getElementById("SelectAndMoveObject").innerHTML;
@@ -430,4 +432,5 @@ function loadTexts()
     g_originalGraph     = document.getElementById("originalGraph").innerHTML;
     g_autoSavedGraph    = document.getElementById("autoSavedGraph").innerHTML;
     g_selectGraphToLoad = document.getElementById("selectGraphToLoad").innerHTML;
+    g_vertexNamePlaceHolder = document.getElementById("vertexNamePlaceHolder").innerHTML;
 }

script/pages/editor/ui/editor.js

@@ -6,6 +6,8 @@ function Editor(document, window) {
     this.application = new Application(document, window, self);
     this.fullscreen  = false;
     this.buttonsList = ['AddGraph', 'ConnectGraphs', 'DeleteObject', 'Default'];
+    this.arrowForVertex = document.getElementById('ShowArrow');
+    this.arrowForVertexTimer = null;
 }
 
 Editor.prototype.initMouseActions = function() {
@@ -18,6 +20,7 @@ Editor.prototype.initMouseActions = function() {
 
     this.application.canvas.onmousedown = function (e)
     {
+        self.StopArrowForVertexTimer();
         return self.application.CanvasOnMouseDown(e);
     };
 
@@ -28,6 +31,7 @@ Editor.prototype.initMouseActions = function() {
 
     this.application.canvas.onwheel = function (e)
     {
+        self.StopArrowForVertexTimer();
         var e = window.event || e; // old IE support
         var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
         if (delta > 0)
@@ -78,7 +82,10 @@ Editor.prototype.initKeyActions = function() {
               || ($('#saveImageDialog').hasClass('ui-dialog-content') && $('#saveImageDialog').dialog('isOpen'))
               || ($('#GroupRenameDialog').hasClass('ui-dialog-content') && $('#GroupRenameDialog').dialog('isOpen'))
               || $('#developerTools').css("display") != "none"
-              || ($('#NeedAlgorithm').hasClass('ui-dialog-content') && $('#NeedAlgorithm').dialog('isOpen')))
+              || ($('#NeedAlgorithm').hasClass('ui-dialog-content') && $('#NeedAlgorithm').dialog('isOpen'))
+              || $('#CanvasSearchText:focus').is(":focus")
+              || $('#Vertex1:focus').is(":focus")
+              || $('#Vertex2:focus').is(":focus"))
           {
               console.log("prevent");
               return; // Should do nothing if the default action has been cancelled
@@ -467,6 +474,78 @@ Editor.prototype.initButtonActions = function()
 
         resizeCanvas();
     }
+
+    document.getElementById('CanvasSearchText').addEventListener('focus', (event) => {
+        let datalist = document.getElementById('vertexListCanvas');
+        const options = datalist.options;
+        for (let i = options.length - 1; i >= 0; i--) {
+            options[i].remove();
+        }
+        
+        self.application.graph.vertices.forEach(vertex => {
+            const option = document.createElement('option');
+            option.value = vertex.mainText;
+            datalist.appendChild(option);
+        });
+    });
+
+    document.getElementById('CanvasSearchText').addEventListener('input', function(event) {
+        let vertex = self.application.GetVertexByName(event.target.value);
+        if (vertex != null)
+        {
+            let size = vertex.getBBox(vertex.getStyleFor(0));
+            let point1 = vertex.position.add(new Point(-size.x / 2, -size.y / 2));
+            let point2 = vertex.position.add(new Point(size.x / 2, size.y / 2));
+            if (!self.application.IsPointFitOnViewport(point1) || !self.application.IsPointFitOnViewport(point2))
+            {
+                self.application.canvasPosition = vertex.position.inverse().add( 
+                    new Point(self.application.GetRealWidth() / 2, self.application.GetRealHeight() / 2));
+                self.application.redrawGraph();
+            }
+            self.HighlightVertex(vertex);
+        }
+        else
+        {
+            self.StopArrowForVertexTimer();
+        }
+    });
+}
+
+Editor.prototype.StopArrowForVertexTimer = function()
+{
+    if (this.arrowForVertexTimer != null)
+    {
+        clearInterval(this.arrowForVertexTimer);
+        this.arrowForVertexTimer = null;
+    }
+    this.arrowForVertex.style.display = "none";
+}
+
+Editor.prototype.HighlightVertex = function(vertex)
+{
+    let pos = vertex.position.add(new Point(
+        vertex.model.diameter / 2 * Math.sin(Math.PI / 4 /* 45 degree*/) + this.arrowForVertex.clientWidth * 0, 
+        -vertex.model.diameter / 2 * Math.sin(Math.PI / 4 /* 45 degree*/) - 40 / this.application.canvasScale));
+    let posInWindow = this.application.GraphPosToCanvasPos(pos);
+    this.arrowForVertex.style.top = posInWindow.y + 'px';
+    this.arrowForVertex.style.left = posInWindow.x + 'px';
+    this.arrowForVertex.style.color = InvertColor(this.application.style.backgroundCommonStyle.commonColor);
+    this.arrowForVertex.style.display = "block";
+
+    if (this.arrowForVertexTimer == null)
+    {
+        this.arrowForVertexTimer = setInterval(function ()
+            {
+                if (this.arrowForVertex.style.display == "none")
+                {
+                    this.arrowForVertex.style.display = "block";
+                }
+                else
+                {
+                    this.arrowForVertex.style.display = "none";
+                }
+            }.bind(this), 400)
+    }
 }
 
 Editor.prototype.initVoteButton = function()

script/shared/utils.js

@@ -54,4 +54,19 @@ Array.prototype.swap = function (x, y) {
   this[x] = this[y];
   this[y] = b;
   return this;
+}
+
+function InvertColor(hex) {
+    // Remove '#' if present
+    hex = hex.replace(/^#/, '');
+
+    // Parse r, g, b values
+    let r = 255 - parseInt(hex.slice(0, 2), 16);
+    let g = 255 - parseInt(hex.slice(2, 4), 16);
+    let b = 255 - parseInt(hex.slice(4, 6), 16);
+
+    // Convert back to hex and pad with 0s if necessary
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }

tpl/home.php

@@ -239,9 +239,15 @@
     </section>
 
     <section id="canvasSection">
-    <span id="CanvasMessage"></span>    
+    <span id="CanvasMessage"></span>
+    <input type="text" id="CanvasSearchText" class="form-control form-control-sm hidden-phone" placeholder="⌕ <?= L('vertex_name_place_holder') ?>" list="vertexListCanvas"/>
+    <datalist id="vertexListCanvas">
+    </datalist>
+    
+    <span class="bi bi-arrow-down-left icon-300" id="ShowArrow"></span>
+    
     <button type="button" class="btn btn-default btn-sm hidden-phone" id="Fullscreen"><span class="bi bi-arrows-fullscreen" id="FullscreenIcon"></span></button>
-	<canvas id="canvas"><?= L('browser_no_support')?></canvas>
+    <canvas id="canvas"><?= L('browser_no_support')?></canvas>
     <div id="developerTools" class="well well-sm">
         <h4><?= L('developer_tools_title')?></h4> <span class="bi bi-arrows-fullscreen fa-fw leftTopPosition" id="devToolsZoom"></span>
         <span><?= L('developer_tools_text')?></span>
@@ -974,6 +980,8 @@
     <p id="originalGraph" class="translation"><?= L('original_graph')?></p>
     <p id="autoSavedGraph" class="translation"><?= L('autosaved_graph')?></p>
     <p id="selectGraphToLoad" class="translation"><?= L('load_oiginal_or_autosaved')?></p>
+
+    <p id="vertexNamePlaceHolder" class="translation"><?= L('vertex_name_place_holder')?></p>
 </section>
 
 <script src="<?= RootCacheJS("script/pages/editor/api/index.js")?>" ></script>