mirror of
https://github.com/UnickSoft/graphonline.git
synced 2025-07-03 16:25:59 +00:00
Add settings for vertex shape and size.
This commit is contained in:
parent
0e00aa0f32
commit
0d923bb37f
@ -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";
|
||||
?>
|
||||
|
@ -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";
|
||||
?>
|
||||
|
@ -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";
|
||||
?>
|
||||
|
@ -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";
|
||||
?>
|
||||
|
@ -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";
|
||||
?>
|
@ -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";
|
||||
?>
|
||||
|
@ -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";
|
||||
?>
|
||||
|
@ -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'] = "Размер вершины";
|
||||
?>
|
||||
|
@ -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";
|
||||
?>
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
@ -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)
|
||||
|
@ -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,8 +3,9 @@
|
||||
*
|
||||
*/
|
||||
|
||||
const defaultVertexDiameter = 30;
|
||||
|
||||
function VertexModel()
|
||||
{
|
||||
this.diameter = 30;
|
||||
this.diameter = globalApplication.GetDefaultVertexSize();
|
||||
}
|
||||
|
18
tpl/home.php
18
tpl/home.php
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user