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

Merge pull request #41 from PonomarevIK/master

Browse Source 
New vertex shape proposal - textbox
This commit is contained in:
Unick Soft 2022-07-24 18:21:45 +02:00 committed by GitHub
commit c51570f988
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 16 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'] = "Цвет другого текста";

2
script/BaseVertex.js
View File

@ -117,7 +117,7 @@ BaseVertex.prototype.HitTest = function (pos)
var lineFinish1 = relativePos.add(new Point(1000, 0));
var lineFinish2 = relativePos.add(new Point(-1000, 0));
var pointsVertex1 = GetPointsForShape(shape, this.model.diameter + width);
var pointsVertex1 = GetPointsForShape(shape, this.model.diameter + width, this.mainText);
pointsVertex1.push(pointsVertex1[0]);
var hitNumber1 = 0;

61
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,16 +67,37 @@ function GetPentagonPoints(diameter)
return res;
}
function GetPointsForShape(shape, diameter)
function GetTextboxPoints(diameter, text)
{
var res = [];
var width = diameter;
var height = diameter;
if (text)
{
var tempContext = document.createElement('canvas').getContext('2d');
tempContext.font = "bold " + MainTextFontSize + DefaultFont;
width = tempContext.measureText(text).width + diameter / 2;
}
res.push(new Point(-width / 2, -height / 2));
res.push(new Point(width / 2, -height / 2));
res.push(new Point(width / 2, height / 2));
res.push(new Point(-width / 2, height / 2));
return res;
}
function GetPointsForShape(shape, diameter, text=null)
{
var pointsVertex1 = null;
switch (parseInt(shape))
{
case VertexSquareShape: pointsVertex1 = GetSquarePoints(diameter); break;
case VertexTriangleShape: pointsVertex1 = GetTrianglePoints(diameter); break;
case VertexPentagonShape: pointsVertex1 = GetPentagonPoints(diameter); break;
case VertexSquareShape: return GetSquarePoints(diameter); break;
case VertexTriangleShape: return GetTrianglePoints(diameter); break;
case VertexPentagonShape: return GetPentagonPoints(diameter); break;
case VertextTextboxShape: return GetTextboxPoints(diameter, text); break;
default: return null; break;
}
return pointsVertex1;
}
function GetSizeForShape(shape, diameter)
@ -80,8 +107,9 @@ 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;
default: return diameter; break;
}
return diameter;
}
function BaseVertexStyle()
@ -278,16 +306,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 +344,7 @@ BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
}
else
{
var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter);
var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter, baseGraph.mainText);
this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
@ -348,7 +379,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>