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

Add more options for vertex.

Browse Source
This commit is contained in:
Oleg Sh 2021-04-23 21:38:16 +02:00
parent 7583db561f
commit 35c6656d0f
14 changed files with 125 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
i/css/home.css
View File

@ -364,4 +364,9 @@
#message
{
overflow-wrap: break-word;
}
.small-bottom-marging
{
margin-bottom: 4px;
}

7
lang/de/home.php
View File

@ -191,5 +191,10 @@
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

7
lang/el/home.php
View File

@ -229,5 +229,10 @@
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

7
lang/en/home.php
View File

@ -228,5 +228,10 @@ 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['vertex_diameter'] = "Vertex size";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

5
lang/es/home.php
View File

@ -229,4 +229,9 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

5
lang/fr/home.php
View File

@ -197,4 +197,9 @@
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

7
lang/nl/home.php
View File

@ -193,5 +193,10 @@
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

7
lang/pt/home.php
View File

@ -194,5 +194,10 @@
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

5
lang/ru/home.php
View File

@ -230,4 +230,9 @@
$g_lang['triangle'] = "Треугльник";
$g_lang['pentagon'] = "Пятиугольник";
$g_lang['vertex_diameter'] = "Размер вершины";
$g_lang['additional_text_color'] = "Цвет другого текста";
$g_lang['weight_position'] = "Позиция текста";
$g_lang['center'] = "По центру";
$g_lang['on_up'] = "Сверху";
?>

7
lang/sv/home.php
View File

@ -190,5 +190,10 @@
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['vertex_diameter'] = "Vertex size";
$g_lang['additional_text_color'] = "Another text color";
$g_lang['weight_position'] = "Text position";
$g_lang['center'] = "Center";
$g_lang['on_up'] = "Above";
?>

4
script/Appilcation.js
View File

@ -1787,9 +1787,9 @@ Application.prototype.SetDefaultEdgeWidth = function(width)
for (i = 0; i < this.graph.edges.length; i ++)
{
if (this.graph.vertices[i].model.width == oldDefaultWidth)
if (this.graph.edges[i].model.width == oldDefaultWidth)
{
this.graph.vertices[i].model.width = width;
this.graph.edges[i].model.width = width;
}
}
}

43
script/BaseVertexDrawer.js
View File

@ -12,6 +12,10 @@ const VertexCircleShape = 0,
VertexPentagonShape = 3,
VertexHomeShape = 4;
// Common text position
const CommonTextCenter = 0,
CommonTextUp = 1;
function GetSquarePoints(diameter)
{
var res = [];
@ -68,6 +72,17 @@ function GetPointsForShape(shape, diameter)
}
return pointsVertex1;
}
function GetSizeForShape(shape, diameter)
{
switch (parseInt(shape))
{
case VertexSquareShape: return diameter; break;
case VertexTriangleShape: return diameter * 1.5; break;
case VertexPentagonShape: return diameter * 1.2; break;
}
return diameter;
}
function BaseVertexStyle()
{
@ -91,6 +106,10 @@ BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
baseStyle.mainTextColor = this.mainTextColor;
if (this.hasOwnProperty('shape'))
baseStyle.shape = this.shape;
if (this.hasOwnProperty('upTextColor'))
baseStyle.upTextColor = this.upTextColor;
if (this.hasOwnProperty('commonTextPosition'))
baseStyle.commonTextPosition = this.commonTextPosition;
baseStyle.lineWidth = parseInt(baseStyle.lineWidth);
return baseStyle;
@ -110,7 +129,9 @@ function CommonVertexStyle()
this.strokeStyle = '#c7b7c7';
this.fillStyle = '#68aeba';
this.mainTextColor = '#f0d543';
this.shape = VertexCircleShape;//VertexSquareShape;
this.shape = VertexCircleShape;
this.upTextColor = '#68aeba';
this.commonTextPosition = CommonTextCenter;
this.baseStyles = [];
}
@ -293,12 +314,22 @@ BaseVertexDrawer.prototype.Draw = function(baseGraph, graphStyle)
this.context.stroke();
this.context.fill();
var shapeSize = GetSizeForShape(graphStyle.shape, baseGraph.model.diameter + graphStyle.lineWidth);
this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor, graphStyle.fillStyle, true, true, 16);
// Top text
this.DrawCenterText(baseGraph.position.add(new Point(0, - baseGraph.model.diameter / 2.0 - 9.0)),
baseGraph.upText, graphStyle.fillStyle, graphStyle.strokeStyle, false, false, 12.0);
if (graphStyle.commonTextPosition == CommonTextCenter)
{
this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor, graphStyle.fillStyle, true, true, 16);
// 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);
}
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);
// 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);
}
/*
// Bottom text
this.DrawCenterText(baseGraph.position.add(new Point(0, + baseGraph.model.diameter / 2.0 + 7.0)),

14
script/EventHandlers.js
View File

@ -1407,9 +1407,11 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexFillColor" ).val(fullStyle.fillStyle);
$( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
$( "#vertexTextColor" ).val(fullStyle.mainTextColor);
$( "#upVertexTextColor" ).val(fullStyle.upTextColor);
$( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
$( "#vertexShape" ).val(fullStyle.shape);
$( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
$( "#commonTextPosition" ).val(fullStyle.commonTextPosition);
}
var redrawVertex = function()
@ -1431,6 +1433,12 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
if (fullStyle.shape != $( "#vertexShape" ).val())
style.shape = parseInt($( "#vertexShape" ).val());
if (fullStyle.upTextColor != $( "#upVertexTextColor" ).val())
style.upTextColor = $( "#upVertexTextColor" ).val();
if (fullStyle.commonTextPosition != $( "#commonTextPosition" ).val())
style.commonTextPosition = $( "#commonTextPosition" ).val();
var diameter = parseInt($( "#vertexSize" ).val());
var canvas = document.getElementById( "VertexPreview" );
@ -1534,16 +1542,20 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexFillColor" ).unbind();
$( "#vertexStrokeColor" ).unbind();
$( "#vertexTextColor" ).unbind();
$( "#upVertexTextColor" ).unbind();
$( "#vertexStrokeSize" ).unbind();
$( "#vertexShape" ).unbind();
$( "#vertexSize" ).unbind();
$( "#commonTextPosition" ).unbind();
$( "#vertexFillColor" ).change(redrawVertex);
$( "#vertexStrokeColor" ).change(redrawVertex);
$( "#vertexTextColor" ).change(redrawVertex);
$( "#vertexStrokeSize" ).change(redrawVertex);
$( "#vertexShape" ).change(redrawVertex);
$( "#vertexSize" ).change(redrawVertex);
$( "#vertexSize" ).change(redrawVertex);
$( "#upVertexTextColor" ).change(redrawVertex);
$( "#commonTextPosition" ).change(redrawVertex);
}
/**

19
tpl/home.php
View File

@ -10,7 +10,7 @@
<script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
<script src="<?= Root("script/example.js?v=38")?>" ></script>
<script src="<?= Root("script/example.js?v=39")?>" ></script>
</head>
<!--
<div class="pull-right">
@ -414,12 +414,27 @@
<input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="0">
</div>
</div>
<div class="form-group row">
<div class="form-group row small-bottom-marging">
<label for="vertexTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="vertexTextColor" value="#FFAA22">
</div>
</div>
<div class="form-group row small-bottom-marging">
<label for="upVertexTextColor" class="col-sm-5 col-form-label"><?= L('additional_text_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="upVertexTextColor" value="#FFAA22">
</div>
</div>
<div class="form-group row">
<label for="commonTextPosition" class="col-sm-5 col-form-label"><?= L('weight_position') ?></label>
<div class="col-sm-5">
<select id="commonTextPosition">
<option value="0"><?= L('center') ?></option>
<option value="1"><?= L('on_up') ?></option>
</select>
</div>
</div>
<div class="form-group row">
<label for="vertexShape" class="col-sm-5 col-form-label"><?= L('shape')?></label>
<div class="col-sm-5">