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 @@ +