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

Add settings for vertex shape and size.

Browse Source
This commit is contained in:
Oleg Sh 2021-04-17 20:27:04 +02:00
parent 0e00aa0f32
commit 0d923bb37f
14 changed files with 187 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lang/de/home.php
View File

@ -185,4 +185,11 @@
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/el/home.php
View File

@ -223,4 +223,11 @@
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/en/home.php
View File

@ -222,4 +222,11 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/es/home.php
View File

@ -222,4 +222,11 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/fr/home.php
View File

@ -190,4 +190,11 @@
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/nl/home.php
View File

@ -187,4 +187,11 @@
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/pt/home.php
View File

@ -188,4 +188,11 @@
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

7
lang/ru/home.php
View File

@ -223,4 +223,11 @@
$g_lang['selected_edge_style'] = "Стиль выделенной дуги";
$g_lang['common_vertex_style'] = "Стиль обычной вершины";
$g_lang['selected_vertex_style'] = "Стиль выделенной вершины";
$g_lang['shape'] = "Форма";
$g_lang['circle'] = "Круг";
$g_lang['squere'] = "Квадрат";
$g_lang['triangle'] = "Треугльник";
$g_lang['pentagon'] = "Пятиугольник";
$g_lang['vertex_diameter'] = "Размер вершины";
?>

9
lang/sv/home.php
View File

@ -18,7 +18,7 @@
$g_lang["orint_edge"] = "Riktad";
$g_lang["not_orint_edge"] = "Oriktad";
$g_lang["show_adjacency_matrix"] = "Grannmatris";
$g_lang["save"] = "Spara kanttyp (riktad eller inte)";
$g_lang["save"] = "Spara";
$g_lang["cancel"] = "Annullera";
$g_lang["adjacency_matrix_description"] = "Ställ in grannmatris. Använd komma \",\" som separator";
$g_lang["adjacency_matrix_bad_format"] = "Matrisen är felaktig. Använd komma \",\" som separator. Matrisen ska vara kvadratisk";
@ -184,4 +184,11 @@
$g_lang['selected_edge_style'] = "Selected edge style";
$g_lang['common_vertex_style'] = "Common vertex style";
$g_lang['selected_vertex_style'] = "Selected vertex style";
$g_lang['shape'] = "Shape";
$g_lang['circle'] = "Circle";
$g_lang['squere'] = "Square";
$g_lang['triangle'] = "Triangle";
$g_lang['pentagon'] = "Pentagon";
$g_lang['vertex_diameter'] = "Vertex size";
?>

56
script/Appilcation.js
View File

@ -50,6 +50,8 @@ function Application(document, window)
this.edgePresets = [1, 3, 5, 7, 11, 42];
this.maxEdgePresets = 6;
this.selectionRect = null;
this.defaultVertexSize = null;
};
// List of graph.
@ -400,6 +402,7 @@ Application.prototype.RedrawNodes = function(context)
Application.prototype.UpdateNodesCurrentStyle = function(ForceCommonStyle, ForceSelectedStyle)
{
var force = ForceCommonStyle !== undefined || ForceSelectedStyle !== undefined;
var commonStyle = (ForceCommonStyle === undefined) ? this.vertexCommonStyle : ForceCommonStyle;
var selectedStyle = (ForceSelectedStyle === undefined) ? this.vertexSelectedVertexStyles : ForceSelectedStyle;
@ -414,7 +417,7 @@ Application.prototype.UpdateNodesCurrentStyle = function(ForceCommonStyle, Force
}
var currentStyle = null;
if (this.graph.vertices[i].hasOwnStyleFor((selected ? 1 : 0) + selectedGroup))
if (this.graph.vertices[i].hasOwnStyleFor((selected ? 1 : 0) + selectedGroup) && !force)
currentStyle = this.graph.vertices[i].getStyleFor((selected ? 1 : 0) + selectedGroup);
else
currentStyle = selected ? selectedStyle[selectedGroup] : commonStyle;
@ -1402,6 +1405,10 @@ Application.prototype.SaveUserSettings = function()
value: this.backgroundCommonStyle,
check: this.isBackgroundCommonStyleCustom});
checkValue.push({field: "defaultVertexSize",
value: this.defaultVertexSize,
check: this.defaultVertexSize != null});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
@ -1454,6 +1461,11 @@ Application.prototype.LoadUserSettings = function(json)
check: "isVertexSelectedVertexStylesCustom",
deep: true});
checkValue.push({field: "defaultVertexSize",
value: "defaultVertexSize",
check: null,
deep: false});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
@ -1462,7 +1474,7 @@ Application.prototype.LoadUserSettings = function(json)
checkValue.push({field: "backgroundCommonStyle",
value: this.backgroundCommonStyle,
check: "isBackgroundCommonStyleCustom",
check: this.isBackgroundCommonStyleCustom,
deep: false});
var decoderStr = this.DecodeFromHTML(json);
@ -1472,6 +1484,12 @@ Application.prototype.LoadUserSettings = function(json)
checkValue.forEach(function(entry) {
if (parsedSave.hasOwnProperty(entry.field))
{
if (typeof parsedSave[entry.field] === 'number')
{
app[entry.value] = parseInt(parsedSave[entry.field]);
}
else
{
for(var k in parsedSave[entry.field])
{
@ -1489,7 +1507,9 @@ Application.prototype.LoadUserSettings = function(json)
}
}
}
}
if (entry.check != null)
app[entry.check] = true;
}
});
@ -1717,3 +1737,35 @@ Application.prototype.GetSelectedEdges = function()
return res;
}
Application.prototype.SetDefaultVertexSize = function(diameter)
{
var oldDefaultDiameter = this.GetDefaultVertexSize();
this.defaultVertexSize = diameter;
for (i = 0; i < this.graph.vertices.length; i ++)
{
if (this.graph.vertices[i].model.diameter == oldDefaultDiameter)
{
this.graph.vertices[i].model.diameter = diameter;
}
}
}
Application.prototype.GetDefaultVertexSize = function(diameter)
{
if (this.defaultVertexSize != null)
return this.defaultVertexSize;
else
return defaultVertexDiameter;
}
Application.prototype.ResetVertexSize = function()
{
this.defaultVertexSize = null;
for (i = 0; i < this.graph.vertices.length; i ++)
{
this.graph.vertices[i].model.diameter = this.GetDefaultVertexSize();
}
}

7
script/BaseVertex.js
View File

@ -38,7 +38,8 @@ BaseVertex.prototype.SaveToXML = function ()
"id=\"" + this.id + "\" " +
"mainText=\"" + gEncodeToHTML(this.mainText) + "\" " +
"upText=\"" + gEncodeToHTML(this.upText) + "\" " +
((Object.keys(this.ownStyles).length > 0) ? "ownStyles = \"" + gEncodeToHTML(JSON.stringify(this.ownStyles)) + "\"": "") +
((Object.keys(this.ownStyles).length > 0) ? "ownStyles = \"" + gEncodeToHTML(JSON.stringify(this.ownStyles)) + "\" ": "") +
"size=\"" + this.model.diameter + "\" " +
"></node>";
}
@ -78,6 +79,10 @@ BaseVertex.prototype.LoadFromXML = function (xml)
}
}
}
var size = xml.attr('size');
if (typeof size !== 'undefined')
this.model.diameter = parseInt(size);
}
BaseVertex.prototype.SetId = function (id)

30
script/EventHandlers.js
View File

@ -1409,6 +1409,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexTextColor" ).val(fullStyle.mainTextColor);
$( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
$( "#vertexShape" ).val(fullStyle.shape);
$( "#vertexSize" ).val(forAll ? (new VertexModel()).diameter : selectedVertexes[0].model.diameter);
}
var redrawVertex = function()
@ -1430,6 +1431,8 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
if (fullStyle.shape != $( "#vertexShape" ).val())
style.shape = parseInt($( "#vertexShape" ).val());
var diameter = parseInt($( "#vertexSize" ).val());
var canvas = document.getElementById( "VertexPreview" );
var context = canvas.getContext('2d');
@ -1442,6 +1445,8 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
var baseVertex = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
baseVertex.mainText = "1";
baseVertex.upText = "Up Text";
baseVertex.model.diameter = diameter;
if (!forAll)
baseVertex.ownStyles = selectedVertexes[0].ownStyles;
@ -1451,12 +1456,28 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
}
//var dialogButtons = [];
var applyDiameter = function(diameter)
{
if (forAll)
{
app.SetDefaultVertexSize(diameter);
}
else
{
selectedVertexes.forEach(function(vertex) {
vertex.model.diameter = diameter;
});
}
};
dialogButtons[g_default] =
{
text : g_default,
class : "MarginLeft",
click : function() {
applyDiameter(forAll ? (new VertexModel()).diameter : app.GetDefaultVertexSize());
if (forAll)
{
app.ResetVertexStyle(index);
@ -1473,16 +1494,22 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
};
dialogButtons[g_save] = function() {
applyDiameter(parseInt($( "#vertexSize" ).val()));
if (forAll)
{
app.SetVertexStyle(index, style);
}
else
{
if (JSON.stringify(originStyle) !== JSON.stringify(style))
{
selectedVertexes.forEach(function(vertex) {
vertex.setOwnStyle(index, style);
});
}
}
app.redrawGraph();
$( this ).dialog( "close" );
};
@ -1508,12 +1535,15 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexStrokeColor" ).unbind();
$( "#vertexTextColor" ).unbind();
$( "#vertexStrokeSize" ).unbind();
$( "#vertexShape" ).unbind();
$( "#vertexSize" ).unbind();
$( "#vertexFillColor" ).change(redrawVertex);
$( "#vertexStrokeColor" ).change(redrawVertex);
$( "#vertexTextColor" ).change(redrawVertex);
$( "#vertexStrokeSize" ).change(redrawVertex);
$( "#vertexShape" ).change(redrawVertex);
$( "#vertexSize" ).change(redrawVertex);
}
/**

3
script/VertexModel.js
View File

@ -3,8 +3,9 @@
*
*/
const defaultVertexDiameter = 30;
function VertexModel()
{
this.diameter = 30;
this.diameter = globalApplication.GetDefaultVertexSize();
}

18
tpl/home.php
View File

@ -411,7 +411,7 @@
<div class="form-group row">
<label for="vertexStrokeSize" class="col-sm-5 col-form-label"><?= L('stroke_size') ?></label>
<div class="col-sm-5">
<input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="1">
<input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="0">
</div>
</div>
<div class="form-group row">
@ -421,16 +421,22 @@
</div>
</div>
<div class="form-group row">
<label for="vertexShape" class="col-sm-5 col-form-label">Shape</label>
<label for="vertexShape" class="col-sm-5 col-form-label"><?= L('shape')?></label>
<div class="col-sm-5">
<select id="vertexShape">
<option value="0">Circle</option>
<option value="1">Squere</option>
<option value="2">Triangle</option>
<option value="3">Pentagon</option>
<option value="0"><?= L('circle')?></option>
<option value="1"><?= L('squere')?></option>
<option value="2"><?= L('triangle')?></option>
<option value="3"><?= L('pentagon')?></option>
</select>
</div>
</div>
<div class="form-group row">
<label for="vertexSize" class="col-sm-5 col-form-label"><?= L('vertex_diameter')?> </label>
<div class="col-sm-5">
<input type="number" class="form-control" id="vertexSize" placeholder="10" min="10" min="100">
</div>
</div>
</fieldset>
</form>