mirrors/graphonline
1
0
Fork 0
mirror of https://github.com/UnickSoft/graphonline.git synced 2026-02-16 02:30:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add edge with parameter for style.

Browse Source
This commit is contained in:
Oleg Sh
2021-04-19 20:32:10 +02:00
parent 04b87c0b3c
commit 109fd61e1f
5 changed files with 107 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
script/Appilcation.js
View File

@@ -52,6 +52,7 @@ function Application(document, window)
this.selectionRect = null;
this.defaultVertexSize = null;
this.defaultEdgeWidth = null;
};
// List of graph.
@@ -1409,6 +1410,10 @@ Application.prototype.SaveUserSettings = function()
value: this.defaultVertexSize,
check: this.defaultVertexSize != null});
checkValue.push({field: "defaultEdgeWidth",
value: this.defaultEdgeWidth,
check: this.defaultEdgeWidth != null});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
@@ -1466,6 +1471,11 @@ Application.prototype.LoadUserSettings = function(json)
check: null,
deep: false});
checkValue.push({field: "defaultEdgeWidth",
value: "defaultEdgeWidth",
check: null,
deep: false});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
@@ -1769,3 +1779,35 @@ Application.prototype.ResetVertexSize = function()
this.graph.vertices[i].model.diameter = this.GetDefaultVertexSize();
}
}
Application.prototype.SetDefaultEdgeWidth = function(width)
{
var oldDefaultWidth = this.GetDefaultEdgeWidth();
this.defaultEdgeWidth = width;
for (i = 0; i < this.graph.edges.length; i ++)
{
if (this.graph.vertices[i].model.width == oldDefaultWidth)
{
this.graph.vertices[i].model.width = width;
}
}
}
Application.prototype.GetDefaultEdgeWidth = function(diameter)
{
if (this.defaultVertexSize != null)
return this.defaultEdgeWidth;
else
return defaultEdgeWidth;
}
Application.prototype.ResetEdgeWidth = function()
{
this.defaultVertexSize = null;
for (i = 0; i < this.graph.edges.length; i ++)
{
this.graph.edges[i].model.width = this.GetDefaultEdgeWidth();
}
}

15
script/BaseEdgeDrawer.js
View File

@@ -34,8 +34,6 @@
baseStyle.textStrockeWidth = this.textStrockeWidth;
if (this.hasOwnProperty('lineDash'))
baseStyle.lineDash = this.lineDash;
if (this.hasOwnProperty('widthFactor'))
baseStyle.widthFactor = this.widthFactor;
return baseStyle;
}
@@ -54,8 +52,7 @@ function CommonEdgeStyle()
this.fillStyle = '#68aeba';
this.textPadding = 4;
this.textStrockeWidth = 2;
this.lineDash = lineDashTypes[0];
this.widthFactor = 1;
this.lineDash = 0;
}
CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
@@ -196,8 +193,8 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
this.SetupStyle(baseEdge, arcStyle);
var lengthArrow = baseEdge.model.width * 4 * (Math.min(this.style.widthFactor * 1.5, 1));
var widthArrow = baseEdge.model.width * 2 * (Math.min(this.style.widthFactor * 1.5, 1));
var lengthArrow = Math.max(baseEdge.model.width * 4, 8);
var widthArrow = Math.max(baseEdge.model.width * 2, 4);
var position1 = baseEdge.vertex1.position;
var position2 = baseEdge.vertex2.position;
var direction = position1.subtract(position2);
@@ -252,7 +249,7 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
{
this.context.lineWidth = baseEdge.model.width * arcStyle.widthFactor;
this.context.lineWidth = baseEdge.model.width;
this.context.strokeStyle = arcStyle.strokeStyle;
this.context.fillStyle = arcStyle.fillStyle;
this.model = baseEdge.model;
@@ -267,7 +264,7 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
return;
}
this.context.setLineDash(arcStyle.lineDash);
this.context.setLineDash(lineDashTypes[arcStyle.lineDash]);
if (position1.equals(position2))
{
this.context.beginPath();
@@ -460,7 +457,7 @@ CurvedArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
{
this.context.setLineDash(arcStyle.lineDash);
this.context.setLineDash(lineDashTypes[arcStyle.lineDash]);
if (position1.equals(position2))
{
this.context.beginPath();

4
script/EdgeModel.js
View File

@@ -5,9 +5,11 @@
var EdgeModels = {"line": 0, "cruvled" : 1};
const defaultEdgeWidth = 4;
function EdgeModel()
{
this.width = 4;
this.width = globalApplication.GetDefaultEdgeWidth();
this.type = EdgeModels.line;
this.curvedValue = EdgeModel.prototype.defaultCruved;
this.default = true;

35
script/EventHandlers.js
View File

@@ -1409,7 +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);
$( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
}
var redrawVertex = function()
@@ -1584,6 +1584,8 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
$( "#edgeFillColor" ).val(fullStyle.fillStyle);
$( "#edgeStrokeColor" ).val(fullStyle.strokeStyle);
$( "#edgeTextColor" ).val(fullStyle.weightText);
$( "#edgeStyle" ).val(fullStyle.lineDash);
$( "#edgeWidth" ).val(forAll ? app.GetDefaultEdgeWidth() : selectedEdges[0].model.width);
}
var redrawVertex = function()
@@ -1599,6 +1601,11 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
if (fullStyle.weightText != $( "#edgeTextColor" ).val())
style.weightText = $( "#edgeTextColor" ).val();
if (fullStyle.lineDash != $( "#edgeStyle" ).val())
style.lineDash = $( "#edgeStyle" ).val();
var edgeWidth = parseInt($( "#edgeWidth" ).val());
var canvas = document.getElementById( "EdgePreview" );
var context = canvas.getContext('2d');
@@ -1619,16 +1626,35 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
if (!forAll)
baseEdge.ownStyles = selectedEdges[0].ownStyles;
baseEdge.model.width = edgeWidth;
graphDrawer.Draw(baseEdge, style.GetStyle({}, baseEdge));
context.restore();
}
var applyWidth = function(width)
{
if (forAll)
{
app.SetDefaultEdgeWidth(width);
}
else
{
selectedEdges.forEach(function(edge) {
edge.model.width = width;
});
}
};
dialogButtons[g_default] =
{
text : g_default,
class : "MarginLeft",
click : function() {
applyWidth(forAll ? (new EdgeModel()).width : app.GetDefaultEdgeWidth());
if (forAll)
{
app.ResetEdgeStyle(index);
@@ -1646,6 +1672,9 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
};
dialogButtons[g_save] = function() {
applyWidth(parseInt($( "#edgeWidth" ).val()));
if (forAll)
{
app.SetEdgeStyle(index, style);
@@ -1680,10 +1709,14 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
$( "#edgeFillColor" ).unbind();
$( "#edgeStrokeColor" ).unbind();
$( "#edgeTextColor" ).unbind();
$( "#edgeStyle" ).unbind();
$( "#edgeWidth" ).unbind();
$( "#edgeFillColor" ).change(redrawVertex);
$( "#edgeStrokeColor" ).change(redrawVertex);
$( "#edgeTextColor" ).change(redrawVertex);
$( "#edgeStyle" ).change(redrawVertex);
$( "#edgeWidth" ).change(redrawVertex);
}
/**

17
tpl/home.php
View File

@@ -464,6 +464,23 @@
<input type="color" class="form-control" id="edgeFillColor" value="#FFAA22">
</div>
</div>
<div class="form-group row">
<label for="edgeStyle" class="col-sm-5 col-form-label">Line Style</label>
<div class="col-sm-5">
<select id="edgeStyle">
<option value="0">Solid</option>
<option value="1">Dotted</option>
<option value="2">Dashed</option>
<option value="3">Dashdotted</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="edgeWidth" class="col-sm-5 col-form-label">Edge width</label>
<div class="col-sm-5">
<input type="number" class="form-control" id="edgeWidth" placeholder="3" min="1" min="20">
</div>
</div>
</fieldset>
</form>