New vertex shape proposal - textbox

lang/en/home.php

@@ -245,6 +245,7 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['squere'] = "Square";
     $g_lang['triangle'] = "Triangle";
     $g_lang['pentagon'] = "Pentagon";
+    $g_lang['textbox'] = "Textbox";
     $g_lang['vertex_diameter'] = "Vertex size";         
     
     $g_lang['additional_text_color'] = "Another text color"; 

lang/ru/home.php

@@ -246,6 +246,7 @@
     $g_lang['squere'] = "Квадрат";
     $g_lang['triangle'] = "Треугльник";
     $g_lang['pentagon'] = "Пятиугольник";
+    $g_lang['textbox'] = "Текстовое поле";
     $g_lang['vertex_diameter'] = "Размер вершины";
 
     $g_lang['additional_text_color'] = "Цвет другого текста"; 

script/BaseVertexDrawer.js

@@ -10,12 +10,18 @@ const VertexCircleShape   = 0,
       VertexSquareShape   = 1,
       VertexTriangleShape = 2,
 	  VertexPentagonShape = 3,
-	  VertexHomeShape     = 4;
+	  VertexHomeShape     = 4,
+	  VertextTextboxShape = 5;
 
 // Common text position
 const CommonTextCenter = 0,
       CommonTextUp     = 1;
 
+// Fonts
+const DefaultFont = "px sans-serif",
+	  MainTextFontSize = 16,
+	  TopTextFontSize  = 12.0;
+
 function GetSquarePoints(diameter)
 {
   var res = [];
@@ -61,14 +67,33 @@ function GetPentagonPoints(diameter)
   	return res;
 }
 
-function GetPointsForShape(shape, diameter)
+function GetTextboxPoints(diameter, text)
+{
+	var res = [];
+	
+	var tempContext = document.createElement('canvas').getContext('2d');
+	tempContext.font = "bold " + MainTextFontSize + DefaultFont;
+	var textWidth = tempContext.measureText(text).width + diameter / 2;
+
+	var height = diameter;	
+	res.push(new Point(-textWidth / 2, -height / 2));
+	res.push(new Point(textWidth / 2, -height / 2));
+	res.push(new Point(textWidth / 2, height / 2));
+	res.push(new Point(-textWidth / 2, height / 2));
+
+	return res;
+}
+
+function GetPointsForShape(shape, baseGraph)
 {
 	var pointsVertex1 = null;
+	var diameter = baseGraph.model.diameter;
 	switch (parseInt(shape))
 	{
 		case VertexSquareShape:   pointsVertex1 = GetSquarePoints(diameter); break;
 		case VertexTriangleShape: pointsVertex1 = GetTrianglePoints(diameter); break;
 		case VertexPentagonShape: pointsVertex1 = GetPentagonPoints(diameter); break;
+		case VertextTextboxShape: pointsVertex1 = GetTextboxPoints(diameter, baseGraph.mainText); break;
 	}
 	return pointsVertex1;
 }
@@ -80,6 +105,7 @@ function GetSizeForShape(shape, diameter)
 		case VertexSquareShape:   return diameter; break;
 		case VertexTriangleShape: return diameter * 1.5; break;
 		case VertexPentagonShape: return diameter * 1.2; break;
+		case VertextTextboxShape: return diameter; break;
 	}
 	return diameter;
 }
@@ -278,16 +304,19 @@ BaseVertexDrawer.prototype.Draw = function(baseGraph, graphStyle)
   
   if (graphStyle.commonTextPosition == CommonTextCenter)
   {
-  	this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor, graphStyle.fillStyle, true, true, 16);  
+  	this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor, 
+						graphStyle.fillStyle, true, true, MainTextFontSize);  
   	// Top text
-  	this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - 9.0)), 
+  	this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - 9.0)), baseGraph.upText, 
-	baseGraph.upText, graphStyle.upTextColor, graphStyle.strokeStyle, false, false, 12.0);
+						graphStyle.upTextColor, graphStyle.strokeStyle, false, false, TopTextFontSize);
   }
   else if (graphStyle.commonTextPosition == CommonTextUp)
   {
-	this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - 7.0)), baseGraph.mainText, graphStyle.mainTextColor, graphStyle.fillStyle, true, false, 16);  
+	this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - 7.0)), baseGraph.mainText, 
+						graphStyle.mainTextColor, graphStyle.fillStyle, true, false, MainTextFontSize);  
 	// Top text
-	this.DrawCenterText(baseGraph.position.add(new Point(0, shapeSize / 2.0 + 9.0)), baseGraph.upText, graphStyle.upTextColor, graphStyle.strokeStyle, false, false, 12.0);
+	this.DrawCenterText(baseGraph.position.add(new Point(0, shapeSize / 2.0 + 9.0)), baseGraph.upText, 
+						graphStyle.upTextColor, graphStyle.strokeStyle, false, false, TopTextFontSize);
   }
 /*	
   // Bottom text
@@ -313,7 +342,7 @@ BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
   }
   else
   {
-	var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter);
+	var points = GetPointsForShape(this.currentStyle.shape, baseGraph);
 
 	this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
 
@@ -348,7 +377,7 @@ BaseVertexDrawer.prototype.DrawText = function(position, text, color, outlineCol
 BaseVertexDrawer.prototype.DrawCenterText = function(position, text, color, outlineColor, bold, outline, size)
 {
 	this.context.textBaseline="middle";
-	this.context.font = (bold ? "bold " : "") + size + "px sans-serif";
+	this.context.font = (bold ? "bold " : "") + size + DefaultFont;
 	var textWidth  = this.context.measureText(text).width;	
 	this.DrawText(new Point(position.x - textWidth / 2, position.y), text, color, outlineColor, outline, this.context.font);
 }

tpl/home.php

@@ -531,6 +531,7 @@
                 <option value="1"><?= L('squere')?></option>
                 <option value="2"><?= L('triangle')?></option>
                 <option value="3"><?= L('pentagon')?></option>
+                <!-- <option value="4"><//?= L('textbox')?></option> -->
               </select>
             </div>
           </div>