diff --git a/lang/en/home.php b/lang/en/home.php
index 08111c7..5422771 100755
--- a/lang/en/home.php
+++ b/lang/en/home.php
@@ -245,6 +245,7 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit";
$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";
diff --git a/lang/ru/home.php b/lang/ru/home.php
index cc59f36..0cb378e 100755
--- a/lang/ru/home.php
+++ b/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'] = "Цвет другого текста";
diff --git a/script/BaseVertexDrawer.js b/script/BaseVertexDrawer.js
index c049294..3c1281e 100644
--- a/script/BaseVertexDrawer.js
+++ b/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)),
- 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);
}
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);
}
diff --git a/tpl/home.php b/tpl/home.php
index e446d74..a0cdcd4 100755
--- a/tpl/home.php
+++ b/tpl/home.php
@@ -531,6 +531,7 @@
+