Add settings for vertex shape and size.

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

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;
@@ -1401,6 +1404,10 @@ Application.prototype.SaveUserSettings = function()
checkValue.push({field: "backgroundCommonStyle",
value: this.backgroundCommonStyle,
check: this.isBackgroundCommonStyleCustom});
checkValue.push({field: "defaultVertexSize",
value: this.defaultVertexSize,
check: this.defaultVertexSize != null});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
@@ -1453,6 +1460,11 @@ Application.prototype.LoadUserSettings = function(json)
value: this.vertexSelectedVertexStyles,
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);
@@ -1473,24 +1485,32 @@ Application.prototype.LoadUserSettings = function(json)
checkValue.forEach(function(entry) {
if (parsedSave.hasOwnProperty(entry.field))
{
for(var k in parsedSave[entry.field])
if (typeof parsedSave[entry.field] === 'number')
{
if (!entry.deep)
app[entry.value] = parseInt(parsedSave[entry.field]);
}
else
{
for(var k in parsedSave[entry.field])
{
if (entry.value.ShouldLoad(k))
entry.value[k] = parsedSave[entry.field][k];
}
else
{
for(var deepK in parsedSave[entry.field][k])
if (!entry.deep)
{
if (entry.value[k].ShouldLoad(deepK))
entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
if (entry.value.ShouldLoad(k))
entry.value[k] = parsedSave[entry.field][k];
}
else
{
for(var deepK in parsedSave[entry.field][k])
{
if (entry.value[k].ShouldLoad(deepK))
entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
}
}
}
}
app[entry.check] = true;
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();
}
}

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)

View File

@@ -1408,7 +1408,8 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
$( "#vertexTextColor" ).val(fullStyle.mainTextColor);
$( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
$( "#vertexShape" ).val(fullStyle.shape);
$( "#vertexShape" ).val(fullStyle.shape);
$( "#vertexSize" ).val(forAll ? (new VertexModel()).diameter : selectedVertexes[0].model.diameter);
}
var redrawVertex = function()
@@ -1429,6 +1430,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,15 +1494,21 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
};
dialogButtons[g_save] = function() {
applyDiameter(parseInt($( "#vertexSize" ).val()));
if (forAll)
{
app.SetVertexStyle(index, style);
}
else
{
selectedVertexes.forEach(function(vertex) {
vertex.setOwnStyle(index, style);
});
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);
$( "#vertexShape" ).change(redrawVertex);
$( "#vertexSize" ).change(redrawVertex);
}
/**

View File

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