Fix saving graph to image if text if long or font size is big.

Fix background during saving to image.

core/config/main.php

@@ -93,5 +93,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']         = 92;
+    $g_config['engine_version']         = 93;
 ?>

script/entities/vertex/model/BaseVertex.js

@@ -3,6 +3,18 @@
  *
  */
 
+/*
+ Utility method to get text width
+ without render.
+*/
+function GetTextWidth(text, font) 
+{
+  const canvas = GetTextWidth.canvas || (GetTextWidth.canvas = document.createElement("canvas"));
+  const context = canvas.getContext("2d");
+  context.font = font;
+  const metrics = context.measureText(text);
+  return metrics.width;
+}
  
 function BaseVertex(x, y, vertexEnumType)
 {
@@ -196,6 +208,11 @@ BaseVertex.prototype.getBBox = function (style)
   var defaultDiameter = (new VertexModel()).diameter;
   var vertexDiameter = this.model.diameter;
   var factor = this.getDefaultDiameterFactor(textSize);
-  return new Point(Math.max(factor.x * defaultDiameter, vertexDiameter), 
-                   Math.max(factor.y * defaultDiameter, vertexDiameter));
+  // Devide by 1.5 to make it smaller, because it is too big.
+  let textWidth = (GetTextWidth(this.mainText, textSize + "px sans-serif") + 8) / 1.5;
+  let textHeight = textSize + 4;
+  let isTextAbove = style.commonTextPosition == 1;
+
+  return new Point(Math.max(factor.x * defaultDiameter, vertexDiameter, textWidth), 
+                   Math.max(factor.y * defaultDiameter, vertexDiameter + (isTextAbove ? textHeight : 0), textHeight));
 }

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

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=92","/script/shared/point.js?v=92","/script/entities/edge/api/index.js?v=92","/script/entities/edge/model/BaseEdge.js?v=92","/script/entities/edge/model/EdgeModel.js?v=92","/script/entities/vertex/api/index.js?v=92","/script/entities/vertex/model/BaseVertex.js?v=92","/script/entities/vertex/model/VertexModel.js?v=92","/script/entities/graph/model/Graph.js?v=92",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=93","/script/shared/point.js?v=93","/script/entities/edge/api/index.js?v=93","/script/entities/edge/model/BaseEdge.js?v=93","/script/entities/edge/model/EdgeModel.js?v=93","/script/entities/vertex/api/index.js?v=93","/script/entities/vertex/model/BaseVertex.js?v=93","/script/entities/vertex/model/VertexModel.js?v=93","/script/entities/graph/model/Graph.js?v=93",]);{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()
@@ -170,6 +170,8 @@ EdgeModel.prototype.GetLoopShiftAngel=function()
 else
 {return this.loopShiftAngel+Math.PI;}}
 {let modulDir="entities/vertex/";doInclude([include("model/BaseVertex.js",modulDir),include("model/VertexModel.js",modulDir)])}
+function GetTextWidth(text,font)
+{const canvas=GetTextWidth.canvas||(GetTextWidth.canvas=document.createElement("canvas"));const context=canvas.getContext("2d");context.font=font;const metrics=context.measureText(text);return metrics.width;}
 function BaseVertex(x,y,vertexEnumType)
 {this.position=new Point(x,y);this.id=0;this.mainText="";this.upText="";this.vertexEnumType=vertexEnumType;this.model=new VertexModel();this.hasUndefinedPosition=false;this.ownStyles={};};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;this.ownStyles=FullObjectCopy(other.ownStyles);}
@@ -225,7 +227,7 @@ BaseVertex.prototype.getDefaultDiameterFactor=function(textSize)
 BaseVertex.prototype.getBBox=function(style)
 {var textSize=DefaultMainTextFontSize;if(style!==undefined&&style.mainTextFontSize!==undefined)
 {textSize=style.mainTextFontSize;}
-var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter),Math.max(factor.y*defaultDiameter,vertexDiameter));}
+var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);let textWidth=(GetTextWidth(this.mainText,textSize+"px sans-serif")+8)/1.5;let textHeight=textSize+4;let isTextAbove=style.commonTextPosition==1;return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter,textWidth),Math.max(factor.y*defaultDiameter,vertexDiameter+(isTextAbove?textHeight:0),textHeight));}
 const defaultVertexDiameter=30;function VertexModel()
 {this.diameter=globalApplication.GetDefaultVertexSize();}
 function Graph()

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

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=92","/script/shared/point.js?v=92","/script/entities/edge/api/index.js?v=92","/script/entities/edge/model/BaseEdge.js?v=92","/script/entities/edge/model/EdgeModel.js?v=92","/script/entities/vertex/api/index.js?v=92","/script/entities/vertex/model/BaseVertex.js?v=92","/script/entities/vertex/model/VertexModel.js?v=92","/script/entities/graph/model/Graph.js?v=92",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=93","/script/shared/point.js?v=93","/script/entities/edge/api/index.js?v=93","/script/entities/edge/model/BaseEdge.js?v=93","/script/entities/edge/model/EdgeModel.js?v=93","/script/entities/vertex/api/index.js?v=93","/script/entities/vertex/model/BaseVertex.js?v=93","/script/entities/vertex/model/VertexModel.js?v=93","/script/entities/graph/model/Graph.js?v=93",]);{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()
@@ -170,6 +170,8 @@ EdgeModel.prototype.GetLoopShiftAngel=function()
 else
 {return this.loopShiftAngel+Math.PI;}}
 {let modulDir="entities/vertex/";doInclude([include("model/BaseVertex.js",modulDir),include("model/VertexModel.js",modulDir)])}
+function GetTextWidth(text,font)
+{const canvas=GetTextWidth.canvas||(GetTextWidth.canvas=document.createElement("canvas"));const context=canvas.getContext("2d");context.font=font;const metrics=context.measureText(text);return metrics.width;}
 function BaseVertex(x,y,vertexEnumType)
 {this.position=new Point(x,y);this.id=0;this.mainText="";this.upText="";this.vertexEnumType=vertexEnumType;this.model=new VertexModel();this.hasUndefinedPosition=false;this.ownStyles={};};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;this.ownStyles=FullObjectCopy(other.ownStyles);}
@@ -225,7 +227,7 @@ BaseVertex.prototype.getDefaultDiameterFactor=function(textSize)
 BaseVertex.prototype.getBBox=function(style)
 {var textSize=DefaultMainTextFontSize;if(style!==undefined&&style.mainTextFontSize!==undefined)
 {textSize=style.mainTextFontSize;}
-var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter),Math.max(factor.y*defaultDiameter,vertexDiameter));}
+var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);let textWidth=(GetTextWidth(this.mainText,textSize+"px sans-serif")+8)/1.5;let textHeight=textSize+4;let isTextAbove=style.commonTextPosition==1;return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter,textWidth),Math.max(factor.y*defaultDiameter,vertexDiameter+(isTextAbove?textHeight:0),textHeight));}
 const defaultVertexDiameter=30;function VertexModel()
 {this.diameter=globalApplication.GetDefaultVertexSize();}
 function Graph()

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

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=92","/script/shared/point.js?v=92","/script/entities/edge/api/index.js?v=92","/script/entities/edge/model/BaseEdge.js?v=92","/script/entities/edge/model/EdgeModel.js?v=92","/script/entities/vertex/api/index.js?v=92","/script/entities/vertex/model/BaseVertex.js?v=92","/script/entities/vertex/model/VertexModel.js?v=92","/script/entities/graph/model/Graph.js?v=92","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=92","/script/pages/create_graph_by_matrix/model/main.js?v=92",]);{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=93","/script/shared/point.js?v=93","/script/entities/edge/api/index.js?v=93","/script/entities/edge/model/BaseEdge.js?v=93","/script/entities/edge/model/EdgeModel.js?v=93","/script/entities/vertex/api/index.js?v=93","/script/entities/vertex/model/BaseVertex.js?v=93","/script/entities/vertex/model/VertexModel.js?v=93","/script/entities/graph/model/Graph.js?v=93","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=93","/script/pages/create_graph_by_matrix/model/main.js?v=93",]);{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()
@@ -170,6 +170,8 @@ EdgeModel.prototype.GetLoopShiftAngel=function()
 else
 {return this.loopShiftAngel+Math.PI;}}
 {let modulDir="entities/vertex/";doInclude([include("model/BaseVertex.js",modulDir),include("model/VertexModel.js",modulDir)])}
+function GetTextWidth(text,font)
+{const canvas=GetTextWidth.canvas||(GetTextWidth.canvas=document.createElement("canvas"));const context=canvas.getContext("2d");context.font=font;const metrics=context.measureText(text);return metrics.width;}
 function BaseVertex(x,y,vertexEnumType)
 {this.position=new Point(x,y);this.id=0;this.mainText="";this.upText="";this.vertexEnumType=vertexEnumType;this.model=new VertexModel();this.hasUndefinedPosition=false;this.ownStyles={};};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;this.ownStyles=FullObjectCopy(other.ownStyles);}
@@ -225,7 +227,7 @@ BaseVertex.prototype.getDefaultDiameterFactor=function(textSize)
 BaseVertex.prototype.getBBox=function(style)
 {var textSize=DefaultMainTextFontSize;if(style!==undefined&&style.mainTextFontSize!==undefined)
 {textSize=style.mainTextFontSize;}
-var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter),Math.max(factor.y*defaultDiameter,vertexDiameter));}
+var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);let textWidth=(GetTextWidth(this.mainText,textSize+"px sans-serif")+8)/1.5;let textHeight=textSize+4;let isTextAbove=style.commonTextPosition==1;return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter,textWidth),Math.max(factor.y*defaultDiameter,vertexDiameter+(isTextAbove?textHeight:0),textHeight));}
 const defaultVertexDiameter=30;function VertexModel()
 {this.diameter=globalApplication.GetDefaultVertexSize();}
 function Graph()

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

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=92","/script/shared/gzip.js?v=92","/script/entities/graph/api/index.js?v=92","/script/shared/point.js?v=92","/script/entities/edge/api/index.js?v=92","/script/entities/edge/model/BaseEdge.js?v=92","/script/entities/edge/model/EdgeModel.js?v=92","/script/entities/vertex/api/index.js?v=92","/script/entities/vertex/model/BaseVertex.js?v=92","/script/entities/vertex/model/VertexModel.js?v=92","/script/entities/graph/model/Graph.js?v=92","/script/features/draw_graph/api/index.js?v=92","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=92","/script/features/draw_graph/model/EdgeStyle.js?v=92","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=92","/script/features/draw_graph/model/VertexShape.js?v=92","/script/features/draw_graph/model/VertexStyle.js?v=92","/script/features/draw_graph/model/BaseVertexDrawer.js?v=92","/script/features/draw_graph/model/GraphFullStyle.js?v=92","/script/features/algorithms/api/index.js?v=92","/script/features/algorithms/model/Algorithms.js?v=92","/script/features/algorithms/model/BaseTraversal.js?v=92","/script/features/base_handler/index.js?v=92","/script/features/default_handler/index.js?v=92","/script/features/add_vertices_handler/index.js?v=92","/script/features/connect_vertices_handler/index.js?v=92","/script/features/delete_objects_handler/index.js?v=92","/script/features/algorithm_handler/index.js?v=92","/script/features/select_auto_save_graph_or_not/index.js?v=92","/script/features/graph_preview/index.js?v=92","/script/features/serialization/api/index.js?v=92","/script/features/serialization/model/GraphMLCreator.js?v=92","/script/features/enum_vertices/EnumVertices.js?v=92","/script/pages/editor/model/texts.js?v=92","/script/pages/editor/model/UndoStack.js?v=92","/script/pages/editor/model/DiskSaveLoad.js?v=92","/script/pages/editor/model/Application.js?v=92","/script/pages/editor/ui/ya_metrika.js?v=92","/script/pages/editor/ui/editor.js?v=92","/script/pages/editor/ui/main.js?v=92",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.js"),include("features/group_rename_handler/index.js"),include("features/saved_graph_handler/index.js"),include("features/saved_graph_image_handler/index.js"),include("features/show_adjacency_matrix/index.js"),include("features/show_distance_matrix/index.js"),include("features/show_incidence_matrix/index.js"),include("features/setup_background_style/index.js"),include("features/setup_edge_style/index.js"),include("features/setup_vertex_style/index.js"),]);postLoadPage();}
+moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=93","/script/shared/gzip.js?v=93","/script/entities/graph/api/index.js?v=93","/script/shared/point.js?v=93","/script/entities/edge/api/index.js?v=93","/script/entities/edge/model/BaseEdge.js?v=93","/script/entities/edge/model/EdgeModel.js?v=93","/script/entities/vertex/api/index.js?v=93","/script/entities/vertex/model/BaseVertex.js?v=93","/script/entities/vertex/model/VertexModel.js?v=93","/script/entities/graph/model/Graph.js?v=93","/script/features/draw_graph/api/index.js?v=93","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=93","/script/features/draw_graph/model/EdgeStyle.js?v=93","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=93","/script/features/draw_graph/model/VertexShape.js?v=93","/script/features/draw_graph/model/VertexStyle.js?v=93","/script/features/draw_graph/model/BaseVertexDrawer.js?v=93","/script/features/draw_graph/model/GraphFullStyle.js?v=93","/script/features/algorithms/api/index.js?v=93","/script/features/algorithms/model/Algorithms.js?v=93","/script/features/algorithms/model/BaseTraversal.js?v=93","/script/features/base_handler/index.js?v=93","/script/features/default_handler/index.js?v=93","/script/features/add_vertices_handler/index.js?v=93","/script/features/connect_vertices_handler/index.js?v=93","/script/features/delete_objects_handler/index.js?v=93","/script/features/algorithm_handler/index.js?v=93","/script/features/select_auto_save_graph_or_not/index.js?v=93","/script/features/graph_preview/index.js?v=93","/script/features/serialization/api/index.js?v=93","/script/features/serialization/model/GraphMLCreator.js?v=93","/script/features/enum_vertices/EnumVertices.js?v=93","/script/pages/editor/model/texts.js?v=93","/script/pages/editor/model/UndoStack.js?v=93","/script/pages/editor/model/DiskSaveLoad.js?v=93","/script/pages/editor/model/Application.js?v=93","/script/pages/editor/ui/ya_metrika.js?v=93","/script/pages/editor/ui/editor.js?v=93","/script/pages/editor/ui/main.js?v=93",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.js"),include("features/group_rename_handler/index.js"),include("features/saved_graph_handler/index.js"),include("features/saved_graph_image_handler/index.js"),include("features/show_adjacency_matrix/index.js"),include("features/show_distance_matrix/index.js"),include("features/show_incidence_matrix/index.js"),include("features/setup_background_style/index.js"),include("features/setup_edge_style/index.js"),include("features/setup_vertex_style/index.js"),]);postLoadPage();}
 let modulDir="pages/editor/";doInclude([include("shared/utils.js"),include("shared/gzip.js"),include("entities/graph/api/index.js"),include("features/draw_graph/api/index.js"),include("features/algorithms/api/index.js"),include("features/base_handler/index.js"),include("features/default_handler/index.js"),include("features/add_vertices_handler/index.js"),include("features/connect_vertices_handler/index.js"),include("features/delete_objects_handler/index.js"),include("features/algorithm_handler/index.js"),include("features/select_auto_save_graph_or_not/index.js"),include("features/serialization/api/index.js"),include("features/enum_vertices/EnumVertices.js"),include("model/texts.js",modulDir),include("model/UndoStack.js",modulDir),include("model/DiskSaveLoad.js",modulDir),include("model/Application.js",modulDir),include("ui/ya_metrika.js",modulDir),include("ui/editor.js",modulDir),include("ui/main.js",modulDir)],onloadEditor);}
 function gEncodeToHTML(str)
 {if(typeof str!=='string')
@@ -198,6 +198,8 @@ EdgeModel.prototype.GetLoopShiftAngel=function()
 else
 {return this.loopShiftAngel+Math.PI;}}
 {let modulDir="entities/vertex/";doInclude([include("model/BaseVertex.js",modulDir),include("model/VertexModel.js",modulDir)])}
+function GetTextWidth(text,font)
+{const canvas=GetTextWidth.canvas||(GetTextWidth.canvas=document.createElement("canvas"));const context=canvas.getContext("2d");context.font=font;const metrics=context.measureText(text);return metrics.width;}
 function BaseVertex(x,y,vertexEnumType)
 {this.position=new Point(x,y);this.id=0;this.mainText="";this.upText="";this.vertexEnumType=vertexEnumType;this.model=new VertexModel();this.hasUndefinedPosition=false;this.ownStyles={};};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;this.ownStyles=FullObjectCopy(other.ownStyles);}
@@ -253,7 +255,7 @@ BaseVertex.prototype.getDefaultDiameterFactor=function(textSize)
 BaseVertex.prototype.getBBox=function(style)
 {var textSize=DefaultMainTextFontSize;if(style!==undefined&&style.mainTextFontSize!==undefined)
 {textSize=style.mainTextFontSize;}
-var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter),Math.max(factor.y*defaultDiameter,vertexDiameter));}
+var defaultDiameter=(new VertexModel()).diameter;var vertexDiameter=this.model.diameter;var factor=this.getDefaultDiameterFactor(textSize);let textWidth=(GetTextWidth(this.mainText,textSize+"px sans-serif")+8)/1.5;let textHeight=textSize+4;let isTextAbove=style.commonTextPosition==1;return new Point(Math.max(factor.x*defaultDiameter,vertexDiameter,textWidth),Math.max(factor.y*defaultDiameter,vertexDiameter+(isTextAbove?textHeight:0),textHeight));}
 const defaultVertexDiameter=30;function VertexModel()
 {this.diameter=globalApplication.GetDefaultVertexSize();}
 function Graph()
@@ -1527,13 +1529,13 @@ var progress=(this.renderPathCounter-currentLength)/edge.GetPixelLength();this.R
 if(this.renderPathLoops>=5)
 {this.stopRenderTimer();}}
 Application.prototype._redrawGraphInWindow=function()
-{var context=this.canvas.getContext('2d');context.save();context.scale(this.canvasScale,this.canvasScale);context.translate(this.canvasPosition.x,this.canvasPosition.y);this._RedrawGraph(context,this.canvasPosition,this.style.backgroundCommonStyle,true);context.restore();return context;}
+{var context=this.canvas.getContext('2d');context.save();context.scale(this.canvasScale,this.canvasScale);context.translate(this.canvasPosition.x,this.canvasPosition.y);this._RedrawGraph(context,{width:this.canvas.width,height:this.canvas.height,scale:this.canvasScale},this.canvasPosition,this.style.backgroundCommonStyle,true);context.restore();return context;}
 Application.prototype._OffscreenRedrawGraph=function()
-{var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return canvas;}
+{var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:canvas.width,height:canvas.height,scale:1.0},bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return canvas;}
 Application.prototype._PrintRedrawGraph=function()
-{var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.backgroundPrintStyle,false,this.vertexPrintCommonStyle,this.vertexPrintSelectedVertexStyles,this.edgePrintCommonStyle,this.edgePrintSelectedStyles);context.restore();return canvas;}
+{var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:canvas.width,height:canvas.height,scale:1.0},bbox.minPoint.inverse(),this.backgroundPrintStyle,false,this.vertexPrintCommonStyle,this.vertexPrintSelectedVertexStyles,this.edgePrintCommonStyle,this.edgePrintSelectedStyles);context.restore();return canvas;}
 Application.prototype._printToSVG=function()
-{var bbox=this.graph.getGraphBBox();var context=new C2S(bbox.size().x,bbox.size().y);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return context.getSerializedSvg();}
+{var bbox=this.graph.getGraphBBox();var context=new C2S(bbox.size().x,bbox.size().y);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:bbox.size().x,height:bbox.size().y,scale:1.0},bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return context.getSerializedSvg();}
 Application.prototype.updateRenderPathLength=function()
 {this.renderPathLength=0;this.renderPathCounter=0;if(this.renderPath.length>1)
 {for(var i=0;i<this.renderPath.length-1;i++)
@@ -1903,8 +1905,8 @@ else if(styleName=="printedSelected")
 {return this.edgePrintSelectedStyles[correctIndex];}
 return null;}
 return null;}
-Application.prototype._RedrawGraph=function(context,backgroundPosition,backgroundStyle,bDrawSelectedRect,forceVertexCommon,forceVertexSelected,forceEdgeCommon,forceEdgeSelected)
-{var backgroundDrawer=new BaseBackgroundDrawer(context);backgroundDrawer.Draw(backgroundStyle,Math.max(this.canvas.width,this.GetRealWidth()),Math.max(this.canvas.height,this.GetRealHeight()),backgroundPosition,this.canvasScale);this.UpdateEdgesCurrentStyle(forceEdgeCommon,forceEdgeSelected);this.UpdateNodesCurrentStyle(forceVertexCommon,forceVertexSelected);this.RedrawEdges(context);this.RedrawNodes(context);if(bDrawSelectedRect&&this.selectionRect!=null)
+Application.prototype._RedrawGraph=function(context,canvasParams,backgroundPosition,backgroundStyle,bDrawSelectedRect,forceVertexCommon,forceVertexSelected,forceEdgeCommon,forceEdgeSelected)
+{var backgroundDrawer=new BaseBackgroundDrawer(context);backgroundDrawer.Draw(backgroundStyle,Math.max(canvasParams.width,this.GetRealWidth()),Math.max(canvasParams.height,this.GetRealHeight()),backgroundPosition,canvasParams.scale);this.UpdateEdgesCurrentStyle(forceEdgeCommon,forceEdgeSelected);this.UpdateNodesCurrentStyle(forceVertexCommon,forceVertexSelected);this.RedrawEdges(context);this.RedrawNodes(context);if(bDrawSelectedRect&&this.selectionRect!=null)
 this.RedrawSelectionRect(context);}
 Application.prototype.GetSelectedVertices=function()
 {var res=[];for(i=0;i<this.graph.vertices.length;i++)

script/pages/editor/model/Application.js

@@ -190,7 +190,8 @@ Application.prototype._redrawGraphInWindow = function()
     context.scale(this.canvasScale, this.canvasScale);
     context.translate(this.canvasPosition.x, this.canvasPosition.y);
     
-    this._RedrawGraph(context, this.canvasPosition, this.style.backgroundCommonStyle, true);
+    this._RedrawGraph(context, {width: this.canvas.width, height: this.canvas.height, scale: this.canvasScale}, 
+        this.canvasPosition, this.style.backgroundCommonStyle, true);
 
     context.restore();
     
@@ -209,7 +210,8 @@ Application.prototype._OffscreenRedrawGraph = function()
 
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
-    this._RedrawGraph(context, bbox.minPoint.inverse(), this.style.backgroundCommonStyle, false);
+    this._RedrawGraph(context, {width: canvas.width, height: canvas.height, scale: 1.0}, 
+        bbox.minPoint.inverse(), this.style.backgroundCommonStyle, false);
     
     context.restore();
     
@@ -228,7 +230,8 @@ Application.prototype._PrintRedrawGraph = function()
     
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
-    this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundPrintStyle, false, 
+    this._RedrawGraph(context, {width: canvas.width, height: canvas.height, scale: 1.0}, 
+        bbox.minPoint.inverse(), this.backgroundPrintStyle, false, 
         this.vertexPrintCommonStyle, this.vertexPrintSelectedVertexStyles, 
         this.edgePrintCommonStyle,   this.edgePrintSelectedStyles);
     
@@ -246,7 +249,8 @@ Application.prototype._printToSVG = function()
     
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
-    this._RedrawGraph(context, bbox.minPoint.inverse(), this.style.backgroundCommonStyle, false);
+    this._RedrawGraph(context, {width: bbox.size().x, height: bbox.size().y, scale: 1.0}, 
+        bbox.minPoint.inverse(), this.style.backgroundCommonStyle, false);
     
     context.restore();
     
@@ -1489,17 +1493,17 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
     return null;
 }
 
-Application.prototype._RedrawGraph = function(context, backgroundPosition, backgroundStyle, bDrawSelectedRect,
+Application.prototype._RedrawGraph = function(context, canvasParams, backgroundPosition, backgroundStyle, bDrawSelectedRect,
     forceVertexCommon, forceVertexSelected, forceEdgeCommon, forceEdgeSelected)
 {
     var backgroundDrawer = new BaseBackgroundDrawer(context);
     
     backgroundDrawer.Draw(
         backgroundStyle, 
-        Math.max(this.canvas.width, this.GetRealWidth()), 
-        Math.max(this.canvas.height, this.GetRealHeight()), 
+        Math.max(canvasParams.width, this.GetRealWidth()), 
+        Math.max(canvasParams.height, this.GetRealHeight()), 
         backgroundPosition, 
-        this.canvasScale);
+        canvasParams.scale);
     
     this.UpdateEdgesCurrentStyle(forceEdgeCommon, forceEdgeSelected);
     this.UpdateNodesCurrentStyle(forceVertexCommon, forceVertexSelected);