mirrors/graphonline
1
0
Fork 0
mirror of https://github.com/UnickSoft/graphonline.git synced 2025-07-01 23:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

New vertex shape proposal - textbox

Browse Source
This commit is contained in:
Ivan 2022-07-13 22:59:55 +05:00
parent a4c99c8dc4
commit d53cf4db0a
4 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lang/en/home.php
View File

@ -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";

1
lang/ru/home.php
View File

@ -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'] = "Цвет другого текста";

47
script/BaseVertexDrawer.js
View File

@ -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);
}

1
tpl/home.php
View File

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