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

Added up text for edges.

Browse Source
This commit is contained in:
Unick Soft 2020-05-03 15:04:01 +02:00
parent 72f94e5ddd
commit bbcdbb7294
9 changed files with 89 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
i/css/home.css
View File

@ -86,7 +86,7 @@
#EdgeWeight
{
max-width : 80px;
width: 86px;
}
#EdgeWeightSlider
@ -354,4 +354,9 @@
#NewEdgeAction
{
padding-top: 8px;
}
#EdgeLabelControls
{
padding-top: 4px;
}

1
lang/en/home.php
View File

@ -174,4 +174,5 @@
$g_lang["replace_edge"] = "replace current";
$g_lang["add_edge"] = "add (multigraph)";
$g_lang["french_add"] = "We have added French translation 🇫🇷";
$g_lang["text_above_edge"] = "Text above edge";
?>

1
lang/fr/home.php
View File

@ -143,4 +143,5 @@
$g_lang["graph_is_general_message"] = "";
$g_lang["replace_edge"] = "remplacer l'actuel";
$g_lang["add_edge"] = "ajout (multigraphe)";
$g_lang["text_above_edge"] = "Texte au-dessus du bord";
?>

1
lang/ru/home.php
View File

@ -176,4 +176,5 @@
$g_lang["graph_is_multi_message"] = "Мультиграф не поддерживает все алгоритмы";
$g_lang["graph_is_general_message"] = "";
$g_lang["text_above_edge"] = "Текст над дугой";
?>

4
script/Appilcation.js
View File

@ -502,9 +502,9 @@ Application.prototype.CreateNewGraphEx = function(x, y, vertexEnume)
return this.graph.AddNewVertex(new BaseVertex(x, y, vertexEnume));
}
Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight, replaceIfExist)
Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight, replaceIfExist, upText)
{
var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight), replaceIfExist);
var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight, upText), replaceIfExist);
var edgeObject = this.graph.edges[edge];
var hasPair = this.graph.hasPair(edgeObject);

19
script/BaseEdge.js
View File

@ -4,7 +4,7 @@
*
*/
function BaseEdge(vertex1, vertex2, isDirect, weight)
function BaseEdge(vertex1, vertex2, isDirect, weight, upText)
{
this.vertex1 = vertex1;
this.vertex2 = vertex2;
@ -17,6 +17,7 @@ function BaseEdge(vertex1, vertex2, isDirect, weight)
this.useWeight = false;
this.id = 0;
this.model = new EdgeModel();
this.upText = upText;
if (weight !== undefined)
this.SetWeight(weight);
@ -32,6 +33,7 @@ BaseEdge.prototype.SaveToXML = function ()
"useWeight=\"" + this.useWeight + "\" " +
"id=\"" + this.id + "\" " +
"text=\"" + this.text + "\" " +
"upText=\"" + this.upText + "\" " +
"arrayStyleStart=\"" + this.arrayStyleStart + "\" " +
"arrayStyleFinish=\"" + this.arrayStyleFinish + "\" " +
this.model.SaveToXML() +
@ -64,6 +66,11 @@ BaseEdge.prototype.LoadFromXML = function (xml, graph)
this.text = xml.attr("text") == null ? "" : xml.attr("text");
this.arrayStyleStart = xml.attr("arrayStyleStart") == null ? "" : xml.attr("arrayStyleStart");
this.arrayStyleFinish = xml.attr("arrayStyleFinish") == null ? "" : xml.attr("arrayStyleFinish");
this.upText = xml.attr('upText');
if (typeof this.upText === 'undefined')
{
this.upText = "";
}
this.model.LoadFromXML(xml);
}
@ -90,6 +97,11 @@ BaseEdge.prototype.GetText = function ()
return this.text.length > 0 ? this.text : (this.useWeight ? this.weight.toString() : "");
}
BaseEdge.prototype.GetUpText = function ()
{
return this.upText;
}
BaseEdge.prototype.GetStartEdgeStyle = function ()
{
return this.arrayStyleStart;
@ -159,4 +171,9 @@ BaseEdge.prototype.SetWeight = function(weight)
this.weight = Number(weight);
this.useWeight = useWeight;
}
BaseEdge.prototype.SetUpText = function(text)
{
this.upText = text;
}

42
script/BaseEdgeDrawer.js
View File

@ -165,6 +165,11 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
{
this.DrawWeight(positions[0], positions[1], baseEdge.GetText(), arcStyle, false);
}
if (baseEdge.GetUpText().length > 0)
{
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false);
}
}
@ -216,13 +221,44 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
this.context.beginPath();
this.context.rect(centerPoint.x - widthText / 2 - arcStyle.textPadding / 2,
centerPoint.y - 8 - arcStyle.textPadding / 2,
widthText + arcStyle.textPadding, 16 + arcStyle.textPadding);
widthText + arcStyle.textPadding, 16 + arcStyle.textPadding);
this.context.closePath();
this.context.fill();
this.context.stroke ();
this.context.fillStyle = arcStyle.weightText;
this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
this.context.fillStyle = arcStyle.weightText;
this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
}
BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair)
{
var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
this.context.font = "bold 12px sans-serif";
this.context.textBaseline = "middle";
var widthText = this.context.measureText(text).width;
this.context.fillStyle = arcStyle.strokeStyle;
var vectorEdge = new Point(position2.x - position1.x, position2.y - position1.y);
var angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
if (angleRadians > Math.PI / 2 || angleRadians < -Math.PI / 2)
{
vectorEdge = new Point(position1.x - position2.x, position1.y - position2.y);
angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
}
var normalize = vectorEdge.normal().normalizeCopy(20);
this.context.save();
this.context.translate(centerPoint.x - normalize.x, centerPoint.y - normalize.y);
this.context.rotate(angleRadians);
this.context.textAlign = "center";
//context.textAlign = "center";
//context.fillText("Your Label Here", labelXposition, 0);
this.context.fillText(text, 0, 0);
this.context.restore();
}
BaseEdgeDrawer.prototype.DrawArrow = function(position, direction, length, width)

19
script/EventHandlers.js
View File

@ -302,6 +302,7 @@ DefaultHandler.prototype.MouseUp = function(pos)
dialogButtons[g_save] = function() {
handler.selectedObject.SetWeight(document.getElementById('EdgeWeight').value);
handler.selectedObject.SetUpText(document.getElementById('EdgeLable').value);
handler.needRedraw = true;
handler.app.redrawGraph();
@ -313,6 +314,17 @@ DefaultHandler.prototype.MouseUp = function(pos)
document.getElementById('EdgeWeight').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : g_noWeight;
document.getElementById('EdgeWeightSlider').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : 0;
var edgePresets = handler.app.GetEdgePresets();
var presetsStr = "<span onClick=\"document.getElementById('EdgeWeight').value='" + g_DefaultWeightPreset + "'; document.getElementById('EdgeWeightSlider').value='" + g_DefaultWeightPreset + "';\" style=\"cursor: pointer\" class=\"defaultWeigth\">" + g_DefaultWeightPreset + "</span>";
for(var i = 0; i < edgePresets.length; i ++)
{
var edgePreset = edgePresets[i];
presetsStr += "<span onClick=\"document.getElementById('EdgeWeight').value='" + edgePreset + "'; document.getElementById('EdgeWeightSlider').value=" + edgePreset + ";\" style=\"cursor: pointer\" class=\"defaultWeigth\">" + edgePreset + "</span>";
}
document.getElementById("EdgesPresets").innerHTML = presetsStr;
document.getElementById('EdgeLable').value = handler.selectedObject.upText;
$( "#addEdge" ).dialog({
resizable: false,
height: "auto",
@ -421,7 +433,9 @@ ConnectionGraphHandler.prototype.firstObject = null;
ConnectionGraphHandler.prototype.AddNewEdge = function(selectedObject, isDirect)
{
this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked"));
this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked"), document.getElementById('EdgeLable').value);
EdgeLable
this.SelectFirst();
this.app.NeedRedraw();
}
@ -471,6 +485,7 @@ ConnectionGraphHandler.prototype.SelectVertex = function(selectedObject)
presetsStr += "<span onClick=\"document.getElementById('EdgeWeight').value='" + edgePreset + "'; document.getElementById('EdgeWeightSlider').value=" + edgePreset + ";\" style=\"cursor: pointer\" class=\"defaultWeigth\">" + edgePreset + "</span>";
}
document.getElementById("EdgesPresets").innerHTML = presetsStr;
document.getElementById('EdgeLable').value = "";
$( "#addEdge" ).dialog({
resizable: false,
@ -1280,7 +1295,7 @@ SetupEdgeStyle.prototype.show = function(index)
var graphDrawer = new BaseEdgeDrawer(context);
var baseVertex1 = new BaseVertex(0, canvas.height / 2, new BaseEnumVertices(this));
var baseVertex2 = new BaseVertex(canvas.width, canvas.height / 2, new BaseEnumVertices(this));
var baseEdge = new BaseEdge(baseVertex1, baseVertex2, true, 10);
var baseEdge = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text");
graphDrawer.Draw(baseEdge, style);

9
tpl/home.php
View File

@ -215,17 +215,16 @@
<div id="addEdge">
<form>
<fieldset>
<div>
<div id="EdgeWeightControls">
<label id="WeightLabel"><?= L('edge_weight')?>&nbsp; </label> <input type="range" id="EdgeWeightSlider" min="0" max="29" value="0" oninput="document.getElementById('EdgeWeight').value = (this.value > 0 ? this.value : '<?= L('default_weight')?>');" onchange="document.getElementById('EdgeWeight').value = (this.value > 0 ? this.value : '<?= L('default_weight')?>');"> &nbsp; &nbsp;<input type="text" name="edgeWeight" value="<?= L('default_weight')?>" id="EdgeWeight" class="inputBox">
</div>
<div id="EdgesPresets">
<span onClick="document.getElementById('EdgeWeight').value='<?= L('default_weight')?>'; document.getElementById('EdgeWeightSlider').value=0;" style="cursor: pointer" class="defaultWeigth"><?= L('default_weight')?></span>
<span onClick="document.getElementById('EdgeWeight').value='1'; document.getElementById('EdgeWeightSlider').value=1;" style="cursor: pointer" class="defaultWeigth">1</span>
<span onClick="document.getElementById('EdgeWeight').value='3'; document.getElementById('EdgeWeightSlider').value=3;" style="cursor: pointer" class="defaultWeigth">3</span>
<span onClick="document.getElementById('EdgeWeight').value='5'; document.getElementById('EdgeWeightSlider').value=5;" style="cursor: pointer" class="defaultWeigth">5</span>
<span onClick="document.getElementById('EdgeWeight').value='7'; document.getElementById('EdgeWeightSlider').value=7;" style="cursor: pointer" class="defaultWeigth">7</span>
<span onClick="document.getElementById('EdgeWeight').value='11'; document.getElementById('EdgeWeightSlider').value=11;" style="cursor: pointer" class="defaultWeigth">11</span>
</div>
<div id="EdgeLabelControls">
<label id="EdgeLabel"><?= L('text_above_edge')?></label>&nbsp;&nbsp;<input type="text" name="edgeLable" value="" id="EdgeLable" class="inputBox">
</div>
<div id="NewEdgeAction">
<div class="InlineStyle PaddingRight">
<input class="form-check-input" type="radio" name="NewEdgeActionValue" id="RadiosReplaceEdge" value="replace" checked>