Add save edge and reuse it.

This commit is contained in:
Oleg Sh 2023-01-07 19:59:48 +02:00
parent 168a851b75
commit b6065ef901
17 changed files with 247 additions and 86 deletions

View File

@ -405,4 +405,61 @@
position: absolute;
display: none;
border: 2px solid #CCCCCC;
}
#switcher input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
#switcher label {
cursor: pointer;
text-indent: 32px;
width: 28px;
height: 1.1em;
background: grey;
display: inline-block;
border-radius: 4px;
position: relative;
margin-bottom: 0;
top: 2px;
}
#switcher label:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: #fff;
border-radius: 4px;
transition: 0.3s;
}
#switcher input:checked + label {
background: #337ab7;
}
input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(100%);
}
#switcher label:active:after {
width: auto;
}
label.switcherText {
font-weight: normal;
margin-bottom: 0;
cursor: pointer;
}
.messageSwitcher {
border-radius: 4px;
padding: 4px;
background-color: #FFFFFF;
}

View File

@ -294,4 +294,7 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -294,4 +294,7 @@
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -257,4 +257,7 @@
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Schneeflocke";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -294,5 +294,8 @@
$g_lang["edge_list_wrong_format"] = "Edge list format is incorrect";
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -293,5 +293,8 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang["edge_list_wrong_format"] = "Edge list format is incorrect";
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -293,5 +293,8 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
$g_lang["edge_list_wrong_format"] = "Edge list format is incorrect";
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -262,4 +262,7 @@
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -259,4 +259,7 @@
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -293,5 +293,8 @@ Dodaliśmy polskie tłumaczenie, Patryk</a>";
$g_lang["edge_list_wrong_format"] = "Format listy krawędzi jest niepoprawny";
$g_lang["fix_button"] = "Napraw";
$g_lang["snowflake"] = "Snowflake";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -260,4 +260,7 @@
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -296,4 +296,7 @@
$g_lang["fix_button"] = "исправить";
$g_lang["snowflake"] = "Снежинка";
$g_lang["save_edge_for_future"] = "Сохранить дугу для повторного использования";
$g_lang["reuse_saved_edge"] = "Использовать сохраненную дугу";
?>

View File

@ -255,5 +255,8 @@
$g_lang["edge_list_wrong_format"] = "Edge list format is incorrect";
$g_lang["fix_button"] = "fix";
$g_lang["snowflake"] = "Snowflake";
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
?>

View File

@ -9,7 +9,7 @@ function Application(document, window)
{
this.document = document;
this.canvas = this.document.getElementById('canvas');
this.handler = new AddGraphHandler(this);
this.handler = new DefaultHandler(this);
this.savedGraphName = "";
this.currentEnumVerticesType = new BaseEnumVertices(this, 1);//this.enumVerticesTextList[0];
this.findPathReport = 1;
@ -54,6 +54,9 @@ function Application(document, window)
this.defaultVertexSize = null;
this.defaultEdgeWidth = null;
this.processEmscriptenFunction = null;
this.defaultEdge = null;
this.useDefaultEdge = false;
};
// List of graph.
@ -894,7 +897,7 @@ Application.prototype.onLoad = function()
{
this.canvas = this.document.getElementById('canvas');
this.handler = new AddGraphHandler(this);
this.SetDefaultHandler();
this.updateMessage();
this.redrawGraph();
@ -2006,4 +2009,29 @@ Application.prototype.isSupportEmscripten = function ()
Application.prototype.processEmscripten = function (inputData)
{
return this.processEmscriptenFunction(inputData);
}
Application.prototype.setDefaultEdge = function (defaultEdge)
{
this.defaultEdge = defaultEdge;
}
Application.prototype.hasDefaultEdge = function ()
{
return this.defaultEdge != null;
}
Application.prototype.getDefaultEdge = function ()
{
return this.defaultEdge;
}
Application.prototype.setUseDefaultEdge = function (value)
{
this.useDefaultEdge = value;
}
Application.prototype.getUseDefaultEdge = function ()
{
return this.useDefaultEdge;
}

View File

@ -128,6 +128,7 @@ BaseHandler.prototype.InitControls = function()
if (handler.app.graph.vertices[i].mainText == vertex1Text.value)
{
handler.SelectFirstVertexMenu(vertex1Text, handler.app.graph.vertices[i]);
userAction("selectVertex1_menu");
break;
}
}
@ -146,6 +147,7 @@ BaseHandler.prototype.InitControls = function()
if (handler.app.graph.vertices[i].mainText == vertex2Text.value)
{
handler.SelectSecondVertexMenu(vertex2Text, handler.app.graph.vertices[i]);
userAction("selectVertex2_menu");
break;
}
}
@ -351,6 +353,9 @@ BaseHandler.prototype.ShowCreateEdgeDialog = function(firstVertex, secondVertex,
var dialogButtons = {};
var handler = this;
$("#CheckSaveDefaultEdge").prop("checked", false);
$("#defaultEdgeDialogBlock").show();
dialogButtons[g_orintEdge] = function() {
handler.app.PushToStack("Connect");
addEdgeCallBack(firstVertex, secondVertex, true);
@ -439,6 +444,10 @@ BaseHandler.prototype.ShowEditEdgeDialog = function(edgeObject) {
document.getElementById("EdgesPresets").innerHTML = presetsStr;
document.getElementById('EdgeLable').value = edgeObject.upText;
$("#CheckSaveDefaultEdge").prop("checked", false);
$("#defaultEdgeDialogBlock").hide();
$( "#addEdge" ).dialog({
resizable: false,
height: "auto",
@ -667,51 +676,7 @@ DefaultHandler.prototype.MouseUp = function(pos)
var handler = this;
$('#message').unbind();
$('#message').on('click', '#editEdge', function(){
var direct = false;
var dialogButtons = {};
dialogButtons[g_save] = function() {
handler.app.PushToStack("ChangeCurvelEdge");
handler.selectedObject.SetWeight(document.getElementById('EdgeWeight').value);
handler.selectedObject.SetUpText(document.getElementById('EdgeLable').value);
handler.needRedraw = true;
handler.app.redrawGraph();
userAction("ChangeWeight");
$( this ).dialog( "close" );
};
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",
width: "auto",
modal: true,
title: g_editWeight,
buttons: dialogButtons,
dialogClass: 'EdgeDialog',
open: function () {
$(handler).off('submit').on('submit', function () {
return false;
});
}
});
handler.ShowEditEdgeDialog(handler.selectedObject);
});
$('#message').on('click', '#incCurvel', function(){
@ -1009,12 +974,36 @@ ConnectionGraphHandler.prototype.GetSelectedVertex = function()
ConnectionGraphHandler.prototype.AddNewEdge = function(selectedObject, isDirect)
{
this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked"), document.getElementById('EdgeLable').value);
let newEdge = this.app.CreateNewArc(this.firstObject, selectedObject, isDirect,
document.getElementById('EdgeWeight').value,
$("#RadiosReplaceEdge").prop("checked"),
document.getElementById('EdgeLable').value);
if ($("#CheckSaveDefaultEdge").prop("checked")) {
let defaultEdge = new BaseEdge();
defaultEdge.copyFrom(this.app.graph.edges[newEdge]);
this.app.setDefaultEdge(defaultEdge);
}
this.SelectFirst();
this.app.NeedRedraw();
}
ConnectionGraphHandler.prototype.AddDefaultEdge = function(selectedObject)
{
let defaultEdge = this.app.getDefaultEdge();
let newEdge = this.app.CreateNewArc(this.firstObject, selectedObject, defaultEdge.isDirect,
defaultEdge.weight,
false,
defaultEdge.upText);
this.app.graph.edges[newEdge].useWeight = defaultEdge.useWeight;
this.SelectFirst();
this.app.NeedRedraw();
userAction("CreateDefaultEdge");
}
ConnectionGraphHandler.prototype.SelectVertex = function(selectedObject)
{
if (this.firstObject)
@ -1022,9 +1011,13 @@ ConnectionGraphHandler.prototype.SelectVertex = function(selectedObject)
var direct = false;
var handler = this;
this.ShowCreateEdgeDialog(this.firstObject, selectedObject, function (firstVertex, secondVertex, direct) {
handler.AddNewEdge(secondVertex, direct);
});
if (!this.app.hasDefaultEdge() || !document.getElementById('useDefaultEdge').checked) {
this.ShowCreateEdgeDialog(this.firstObject, selectedObject, function (firstVertex, secondVertex, direct) {
handler.AddNewEdge(secondVertex, direct);
});
} else {
handler.AddDefaultEdge(selectedObject);
}
}
else
{
@ -1058,14 +1051,16 @@ ConnectionGraphHandler.prototype.SelectFirst = function()
{
this.firstObject = null;
this.message = g_selectFirstVertexToConnect + this.GetSelect2VertexMenu();
this.message = g_selectFirstVertexToConnect + this.GetUseDefaultEdgeCheckBox() +
this.GetSelect2VertexMenu();
this.message = this.AppendSpecialSctionsButton(this.message);
}
ConnectionGraphHandler.prototype.SelectSecond = function(selectedObject)
{
this.firstObject = selectedObject;
this.message = g_selectSecondVertexToConnect + this.GetSelect2VertexMenu();
this.message = g_selectSecondVertexToConnect + this.GetUseDefaultEdgeCheckBox() +
this.GetSelect2VertexMenu();
this.message = this.AppendSpecialSctionsButton(this.message);
}
@ -1144,6 +1139,39 @@ ConnectionGraphHandler.prototype.AppendSpecialSctionsButton = function(baseMessa
+ "</div> " + baseMessage;
}
ConnectionGraphHandler.checkUseDefaultEdge = function (elem, app)
{
app.setUseDefaultEdge(elem.checked);
app.updateMessage();
};
ConnectionGraphHandler.prototype.GetUseDefaultEdgeCheckBox = function() {
if (!this.app.hasDefaultEdge()) {
return "";
}
return " <div class=\"messageSwitcher\" style=\"display:inline\">" +
"<span id=\"switcher\"><input type=\"checkbox\" id=\"useDefaultEdge\" >" +
"<label for=\"useDefaultEdge\" class=\"Switcher\"></label></span> <label for=\"useDefaultEdge\" class=\"switcherText\">" + g_reuseSavedEdge + "</label>" +
"</div>";
}
ConnectionGraphHandler.prototype.InitControls = function() {
BaseHandler.prototype.InitControls.call(this)
if (!this.app.hasDefaultEdge()) {
return;
}
let app = this.app;
$('#useDefaultEdge').unbind();
$('#useDefaultEdge').change(function() {
app.setUseDefaultEdge(this.checked);
});
$("#useDefaultEdge").prop("checked", this.app.getUseDefaultEdge());
}
/**
* Delete Graph handler.

View File

@ -196,6 +196,8 @@ var g_reverseAllEdges = "Reverse all edges";
var g_makeAllUndirected = "Make all edges undirected";
var g_makeAllDirected = "Make all edges directed";
var g_reuseSavedEdge = "Reuse saved edge";
function loadTexts()
{
g_textsSelectAndMove = document.getElementById("SelectAndMoveObject").innerHTML;
@ -399,5 +401,7 @@ function loadTexts()
g_makeAllDirected = document.getElementById("makeAllDirected").innerHTML;
g_pairWrongFormat = document.getElementById("pairWrongFormat").innerHTML;
g_fix = document.getElementById("fixButton").innerHTML;;
g_fix = document.getElementById("fixButton").innerHTML;
g_reuseSavedEdge = document.getElementById("reuseSavedEdge").innerHTML;
}

View File

@ -11,7 +11,7 @@
<script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
<script src="<?= Root("script/canvas2svg.js")?>" ></script>
<script src="<?= Root("script/example.js?v=70")?>" ></script>
<script src="<?= Root("script/example.js?v=71")?>" ></script>
<!-- Yandex.RTB -->
<script>window.yaContextCb=window.yaContextCb||[]</script>
@ -292,27 +292,27 @@
<div id="addEdge">
<form>
<fieldset>
<div id="MainEdgeWeightControl">
<table id="EdgeWeightControls">
<tr>
<td rowspan="2">
<label id="WeightLabel"><?= L('edge_weight')?>&nbsp; </label>
</td>
<td>
<input type="text" name="edgeWeight" value="<?= L('default_weight')?>" id="EdgeWeight" class="inputBox">
</td>
</tr>
<tr>
<td>
<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')?>');">
</td>
</tr>
</table>
<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>
</div>
</div>
<div id="MainEdgeWeightControl">
<table id="EdgeWeightControls">
<tr>
<td rowspan="2">
<label id="WeightLabel"><?= L('edge_weight')?>&nbsp; </label>
</td>
<td>
<input type="text" name="edgeWeight" value="<?= L('default_weight')?>" id="EdgeWeight" class="inputBox">
</td>
</tr>
<tr>
<td>
<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')?>');">
</td>
</tr>
</table>
<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>
</div>
</div>
<div id="NewEdgeAction">
<div class="InlineStyle PaddingRight">
<input class="form-check-input" type="radio" name="NewEdgeActionValue" id="RadiosReplaceEdge" value="replace" checked>
@ -329,10 +329,17 @@
</div>
<small>
<div id="EdgeLabelControls">
<label id="EdgeLabel"><?= L('text_above_edge')?></label>&nbsp;&nbsp;<input type="text" name="edgeLable" value="" id="EdgeLable" class="inputBox">
</div>
</small>
<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 class="PaddingRight small-top-marging" id="defaultEdgeDialogBlock">
<input class="form-check-input" type="checkbox" name="SaveDefaultEdge" id="CheckSaveDefaultEdge" value="saveAsDefault">
<label for="CheckSaveDefaultEdge">
<?= L('save_edge_for_future')?>
</label>
</div>
</small>
</fieldset>
</form>
</div>
@ -858,7 +865,8 @@
<p id="pairWrongFormat" class="translation"><?= L('edge_list_wrong_format')?></p>
<p id="fixButton" class="translation"><?= L('fix_button')?></p>
<p id="reuseSavedEdge" class="translation"><?= L('reuse_saved_edge')?></p>
</section>
<!--
<script>