Added style dialogs for edges and vertexes

This commit is contained in:
Unick Soft 2019-07-07 21:15:30 +02:00
parent c6df88cf3d
commit 5ba794dc34
11 changed files with 536 additions and 75 deletions

View File

@ -240,6 +240,11 @@
z-index: 10;
}
.MarginLeft
{
margin-right: 32px !important;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
@ -298,7 +303,6 @@
max-width:350px;
}
@media only screen and (max-width: 650px) {
#canvasSection
{

View File

@ -18,7 +18,7 @@
$g_lang["orint_edge"] = "Directed";
$g_lang["not_orint_edge"] = "Undirected";
$g_lang["show_adjacency_matrix"] = "Adjacency Matrix";
$g_lang["save"] = "Save graph";
$g_lang["save"] = "Save";
$g_lang["cancel"] = "Cancel";
$g_lang["adjacency_matrix_description"] = "Setup adjacency matrix. Use comma \",\" as separator";
$g_lang["adjacency_matrix_bad_format"] = "Matrix is incorrect. Use comma \",\" as separator. Matrix should be square";
@ -144,4 +144,20 @@
$g_lang["undo"] = "Undo";
$g_lang["opensource_message"] = "Our project is now open source. More details...";
$g_lang["settings"] = "Settings";
$g_lang["common_vertex_settings"] = "Common vertexes";
$g_lang["selected_vertex_settings"] = "Selected vertexes";
$g_lang["common_edge_settings"] = "Common edges";
$g_lang["selected_edge_settings"] = "Selected edges";
$g_lang["common_color"] = "Common Color";
$g_lang["stroke_color"] = "Stroke Color";
$g_lang["stroke_size"] = "Thickness";
$g_lang["text_color"] = "Text Color";
$g_lang["save_graph"] = "Save graph";
$g_lang["default"] = "Default";
$g_lang["vertex_draw_style"] = "Vertex Style";
$g_lang["text_background"] = "Text background";
$g_lang["edge_draw_style"] = "Edge Style";
?>

View File

@ -18,7 +18,7 @@
$g_lang["orint_edge"] = "Ориентированную";
$g_lang["not_orint_edge"] = "Неориентированную";
$g_lang["show_adjacency_matrix"] = "Матрица смежности";
$g_lang["save"] = "Сохранить граф";
$g_lang["save"] = "Сохранить";
$g_lang["cancel"] = "Отмена";
$g_lang["adjacency_matrix_description"] = "Задайте матрицу смежности. Используйте запятую \",\" в качестве разделителя";
$g_lang["adjacency_matrix_bad_format"] = "Мартрица имеет неправильный формат. Используйте запятую \",\" в качестве разделителя. Матрица должна иметь одинаковое количество столбцов и строк.";
@ -147,4 +147,21 @@
$g_lang["undo"] = "Отменить";
$g_lang["opensource_message"] = "Наш проект стал проектом с открытым исходным кодом. Подробнее...";
$g_lang["settings"] = "Настройки";
$g_lang["common_vertex_settings"] = "Обычных вершин";
$g_lang["selected_vertex_settings"] = "Выделенных вершин";
$g_lang["common_edge_settings"] = "Обычных дуг";
$g_lang["selected_edge_settings"] = "Выделенных дуг";
$g_lang["common_color"] = "Основой цвет";
$g_lang["stroke_color"] = "Цвет обводки";
$g_lang["stroke_size"] = "Толщина обводки";
$g_lang["text_color"] = "Цвет текста";
$g_lang["save_graph"] = "Сохранить граф";
$g_lang["default"] = "По умолчанию";
$g_lang["vertex_draw_style"] = "Стиль отрисовки вершины";
$g_lang["text_background"] = "Фон текста";
$g_lang["edge_draw_style"] = "Стиль отрисовки дуги";
?>

View File

@ -27,16 +27,20 @@ function Application(document, window)
this.undoStack = [];
this.edgeCommonStyle = new CommonEdgeStyle();
this.edgeSelectedStyles = DefaultSelectedEdgeStyles;
this.isEdgeCommonStyleCustom = false;
this.edgeSelectedStyles = DefaultSelectedEdgeStyles.slice();
this.isEdgeSelectedStylesCustom = false;
this.edgePrintCommonStyle = new CommonPrintEdgeStyle();
this.edgePrintSelectedStyles = DefaultPrintSelectedEdgeStyles;
this.edgePrintSelectedStyles = DefaultPrintSelectedEdgeStyles.slice();
this.vertexCommonStyle = new CommonVertexStyle();
this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles;
this.isVertexCommonStyleCustom = false;
this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles.slice();
this.isVertexSelectedVertexStylesCustom = false;
this.vertexPrintCommonStyle = new CommonPrintVertexStyle();
this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles;
this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles.slice();
};
// List of graph.
@ -634,6 +638,26 @@ Application.prototype.SetHandlerMode = function(mode)
var groupRenameVertices = new GroupRenameVertices(this);
groupRenameVertices.show();
}
else if (mode == "setupVertexStyle")
{
var setupVertexStyle = new SetupVertexStyle(this);
setupVertexStyle.show(0);
}
else if (mode == "setupVertexStyleSelected")
{
var setupVertexStyle = new SetupVertexStyle(this);
setupVertexStyle.show(1);
}
else if (mode == "setupEdgeStyle")
{
var setupEdgeStyle = new SetupEdgeStyle(this);
setupEdgeStyle.show(0);
}
else if (mode == "setupEdgeStyleSelected")
{
var setupEdgeStyle = new SetupEdgeStyle(this);
setupEdgeStyle.show(1);
}
else if (g_AlgorithmIds.indexOf(mode) >= 0)
{
this.handler = new AlgorithmGraphHandler(this, g_Algorithms[g_AlgorithmIds.indexOf(mode)](this.graph, this));
@ -870,7 +894,9 @@ Application.prototype.SetIncidenceMatrixSmart = function (matrix)
Application.prototype.SaveGraphOnDisk = function ()
{
var graphAsString = this.graph.SaveToXML();
var graphAsString = this.graph.SaveToXML(this.SaveUserSettings());
var styleSave = this.SaveUserSettings();
if (this.savedGraphName.length <= 0)
{
@ -963,7 +989,13 @@ Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback, f
Application.prototype.LoadGraphFromString = function (str)
{
var graph = new Graph();
graph.LoadFromXML(str);
//console.log(str);
var userSettings = {};
graph.LoadFromXML(str, userSettings);
if (userSettings.hasOwnProperty("data") && userSettings["data"].length > 0)
this.LoadUserSettings(userSettings["data"]);
this.SetDefaultTransformations();
this.graph = graph;
this.AutoAdjustViewport();
@ -1212,7 +1244,7 @@ Application.prototype.PushToStack = function(actionName)
{
var object = {};
object.actionName = actionName;
object.graphSave = this.graph.SaveToXML();
object.graphSave = this.graph.SaveToXML("");
this.undoStack.push(object);
@ -1229,7 +1261,8 @@ Application.prototype.Undo = function()
var state = this.undoStack.pop();
this.graph = new Graph();
this.graph.LoadFromXML(state.graphSave);
var empty;
this.graph.LoadFromXML(state.graphSave, empty);
this.redrawGraph();
}
@ -1242,7 +1275,7 @@ Application.prototype.IsUndoStackEmpty = function()
{
return (this.undoStack.length <= 0);
}
/*
Application.prototype.SaveUserSettings = function()
{
var res = "{";
@ -1250,82 +1283,84 @@ Application.prototype.SaveUserSettings = function()
var needEnd = false;
var checkValue = [];
checkValue.push({check: !CommonEdgeStyle.prototype.isPrototypeOf(this.edgeCommonStyle),
field: "edgeCommonStyle",
value: this.edgeCommonStyle});
checkValue.push({field: "edgeCommonStyle",
value: this.edgeCommonStyle,
check: this.isEdgeCommonStyleCustom});
checkValue.push({check: this.edgeSelectedStyles != DefaultSelectedEdgeStyles,
field: "edgeSelectedStyles",
value: this.edgeSelectedStyles});
checkValue.push({field: "edgeSelectedStyles",
value: this.edgeSelectedStyles,
check: this.isEdgeSelectedStylesCustom});
checkValue.push({check: !CommonPrintEdgeStyle.prototype.isPrototypeOf(this.edgePrintCommonStyle),
field: "edgePrintCommonStyle",
value: this.edgePrintCommonStyle});
//checkValue.push({field: "edgePrintCommonStyle",
// value: this.edgePrintCommonStyle});
checkValue.push({check: this.edgePrintSelectedStyles != DefaultPrintSelectedEdgeStyles,
field: "edgePrintSelectedStyles",
value: this.edgePrintSelectedStyles});
//checkValue.push({field: "edgePrintSelectedStyles",
// value: this.edgePrintSelectedStyles});
checkValue.push({check: !CommonVertexStyle.prototype.isPrototypeOf(this.vertexCommonStyle),
field: "vertexCommonStyle",
value: this.vertexCommonStyle});
checkValue.push({field: "vertexCommonStyle",
value: this.vertexCommonStyle,
check: this.isVertexCommonStyleCustom});
checkValue.push({check: this.vertexSelectedVertexStyles != DefaultSelectedGraphStyles,
field: "vertexSelectedVertexStyles",
value: this.vertexSelectedVertexStyles});
checkValue.push({field: "vertexSelectedVertexStyles",
value: this.vertexSelectedVertexStyles,
check: this.isVertexSelectedVertexStylesCustom});
checkValue.push({check: !CommonPrintVertexStyle.prototype.isPrototypeOf(this.vertexPrintCommonStyle),
field: "vertexPrintCommonStyle",
value: this.vertexPrintCommonStyle});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
checkValue.push({check: this.vertexPrintSelectedVertexStyles != DefaultPrintSelectedGraphStyles,
field: "vertexPrintSelectedVertexStyles",
value: this.vertexPrintSelectedVertexStyles});
//checkValue.push({field: "vertexPrintSelectedVertexStyles",
// value: this.vertexPrintSelectedVertexStyles});
checkValue.forEach(function(entry) {
if (entry.check)
{
if (!entry.check)
return;
if (needEnd)
res = res + ",";
res = res + entry.field + ":" + JSON.stringify(entry.value);
}
res = res + "\"" + entry.field + "\"" + ":" + JSON.stringify(entry.value);
needEnd = true;
});
res = res + "}";
return res;
return this.EncodeToHTML(res);
}
Application.prototype.LoadUserSettings = function()
Application.prototype.LoadUserSettings = function(json)
{
var checkValue = [];
checkValue.push({field: "edgeCommonStyle",
value: this.edgeCommonStyle});
value: this.edgeCommonStyle,
check: "isEdgeCommonStyleCustom"});
checkValue.push({field: "edgeSelectedStyles",
value: this.edgeSelectedStyles});
value: this.edgeSelectedStyles,
check: "isEdgeSelectedStylesCustom"});
checkValue.push({field: "edgePrintCommonStyle",
value: this.edgePrintCommonStyle});
//checkValue.push({field: "edgePrintCommonStyle",
// value: this.edgePrintCommonStyle});
checkValue.push({field: "edgePrintSelectedStyles",
value: this.edgePrintSelectedStyles});
//checkValue.push({field: "edgePrintSelectedStyles",
// value: this.edgePrintSelectedStyles});
checkValue.push({field: "vertexCommonStyle",
value: this.vertexCommonStyle});
value: this.vertexCommonStyle,
check: "isVertexCommonStyleCustom"});
checkValue.push({field: "vertexSelectedVertexStyles",
value: this.vertexSelectedVertexStyles});
value: this.vertexSelectedVertexStyles,
check: "isVertexSelectedVertexStylesCustom"});
checkValue.push({field: "vertexPrintCommonStyle",
value: this.vertexPrintCommonStyle});
//checkValue.push({field: "vertexPrintCommonStyle",
// value: this.vertexPrintCommonStyle});
checkValue.push({field: "vertexPrintSelectedVertexStyles",
value: this.vertexPrintSelectedVertexStyles});
//checkValue.push({field: "vertexPrintSelectedVertexStyles",
// value: this.vertexPrintSelectedVertexStyles});
var parsedSave = JSON.parse(json);
var decoderStr = this.DecodeFromHTML(json);
var parsedSave = JSON.parse(decoderStr);
var app = this;
@ -1334,7 +1369,82 @@ Application.prototype.LoadUserSettings = function()
{
for(var k in parsedSave[entry.field])
entry.value[k] = parsedSave[entry.field][k];
app[entry.check] = true;
}
});
}
*/
Application.prototype.EncodeToHTML = function (str)
{
return str.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}
Application.prototype.DecodeFromHTML = function (str)
{
return str.replace(/&apos;/g, "'")
.replace(/&quot;/g, '"')
.replace(/&gt;/g, '>')
.replace(/&lt;/g, '<')
.replace(/&amp;/g, '&');
}
Application.prototype.SetVertexStyle = function (index, style)
{
if (index == 0)
{
this.vertexCommonStyle = style;
this.isVertexCommonStyleCustom = true;
}
else
{
this.vertexSelectedVertexStyles[index - 1] = style;
this.isVertexSelectedVertexStylesCustom = true;
}
}
Application.prototype.ResetVertexStyle = function (index)
{
if (index == 0)
{
this.vertexCommonStyle = new CommonVertexStyle();
this.isVertexCommonStyleCustom = false;
}
else
{
this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles.slice();
this.isVertexSelectedVertexStylesCustom = false;
}
}
Application.prototype.SetEdgeStyle = function (index, style)
{
if (index == 0)
{
this.edgeCommonStyle = style;
this.isEdgeCommonStyleCustom = true;
}
else
{
this.edgeSelectedStyles[index - 1] = style;
this.isEdgeSelectedStylesCustom = true;
}
}
Application.prototype.ResetEdgeStyle = function (index)
{
if (index == 0)
{
this.edgeCommonStyle = new CommonEdgeStyle();
this.isEdgeCommonStyleCustom = false;
}
else
{
this.edgeSelectedStyles = DefaultSelectedEdgeStyles.slice();
this.isEdgeSelectedStylesCustom = false;
}
}

View File

@ -16,13 +16,11 @@ function CommonEdgeStyle()
function CommonPrintEdgeStyle()
{
CommonEdgeStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.weightText = '#000000';
this.fillStyle = '#FFFFFF';
this.textPadding = 4;
this.textStrockeWidth = 2;
this.sizeOfLoop = 24;
this.loopShiftAngel = Math.PI / 6;
}
function SelectedEdgeStyle0()

View File

@ -5,7 +5,7 @@
// Common style of Graphs.
function CommonVertexStyle()
{
this.lineWidth = 1;
this.lineWidth = 2;
this.strokeStyle = '#c7b7c7';
this.fillStyle = '#68aeba';
this.mainTextColor = '#f0d543';
@ -13,7 +13,9 @@ function CommonVertexStyle()
function CommonPrintVertexStyle()
{
this.lineWidth = 1;
CommonVertexStyle.apply(this, arguments);
this.lineWidth = 2;
this.strokeStyle = '#000000';
this.fillStyle = '#FFFFFF';
this.mainTextColor = '#000000';
@ -179,7 +181,6 @@ BaseVertexDrawer.prototype.SetupStyle = function(style)
BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
{
this.context.lineWidth = 2;
this.context.beginPath();
this.context.arc(baseGraph.position.x, baseGraph.position.y, baseGraph.model.diameter / 2.0, 0, 2 * Math.PI);
this.context.closePath();

View File

@ -1100,3 +1100,200 @@ GroupRenameVertices.prototype.show = function()
dialogClass: 'EdgeDialog'
});
}
/**
* Setup Vertex Style rename vertices.
*
*/
function SetupVertexStyle(app)
{
BaseHandler.apply(this, arguments);
this.message = "";
}
// inheritance.
SetupVertexStyle.prototype = Object.create(BaseHandler.prototype);
SetupVertexStyle.prototype.show = function(index)
{
var handler = this;
var dialogButtons = {};
var graph = this.app.graph;
var app = this.app;
var style = Object.assign({}, (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]));
var fillFields = function()
{
$( "#vertexFillColor" ).val(style.fillStyle);
$( "#vertexStrokeColor" ).val(style.strokeStyle);
$( "#vertexTextColor" ).val(style.mainTextColor);
$( "#vertexStrokeSize" ).val(style.lineWidth);
}
var redrawVertex = function()
{
style.fillStyle = $( "#vertexFillColor" ).val();
style.strokeStyle = $( "#vertexStrokeColor" ).val();
style.mainTextColor = $( "#vertexTextColor" ).val();
style.lineWidth = $( "#vertexStrokeSize" ).val();
var canvas = document.getElementById( "VertexPreview" );
var context = canvas.getContext('2d');
context.save();
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);
var graphDrawer = new BaseVertexDrawer(context);
var baseVertex = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
baseVertex.mainText = "1";
baseVertex.upText = "Up Text";
graphDrawer.Draw(baseVertex, style);
context.restore();
}
//var dialogButtons = [];
dialogButtons[g_default] =
{
text : g_default,
class : "MarginLeft",
click : function() {
app.ResetVertexStyle(index);
app.redrawGraph();
$( this ).dialog( "close" );
}
};
dialogButtons[g_save] = function() {
app.SetVertexStyle(index, style);
app.redrawGraph();
$( this ).dialog( "close" );
};
dialogButtons[g_cancel] = function() {
$( this ).dialog( "close" );
};
fillFields();
$( "#SetupVertexStyleDialog" ).dialog({
resizable: false,
height: "auto",
width: "auto",
modal: true,
title: g_vertexDraw,
buttons: dialogButtons,
dialogClass: 'EdgeDialog'
});
redrawVertex();
$( "#vertexFillColor" ).unbind();
$( "#vertexStrokeColor" ).unbind();
$( "#vertexTextColor" ).unbind();
$( "#vertexStrokeSize" ).unbind();
$( "#vertexFillColor" ).change(redrawVertex);
$( "#vertexStrokeColor" ).change(redrawVertex);
$( "#vertexTextColor" ).change(redrawVertex);
$( "#vertexStrokeSize" ).change(redrawVertex);
}
/**
* Setup Vertex Style rename vertices.
*
*/
function SetupEdgeStyle(app)
{
BaseHandler.apply(this, arguments);
this.message = "";
}
// inheritance.
SetupEdgeStyle.prototype = Object.create(BaseHandler.prototype);
SetupEdgeStyle.prototype.show = function(index)
{
var handler = this;
var dialogButtons = {};
var graph = this.app.graph;
var app = this.app;
var style = Object.assign({}, (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]));
var fillFields = function()
{
$( "#edgeFillColor" ).val(style.fillStyle);
$( "#edgeStrokeColor" ).val(style.strokeStyle);
$( "#edgeTextColor" ).val(style.weightText);
}
var redrawVertex = function()
{
style.fillStyle = $( "#edgeFillColor" ).val();
style.strokeStyle = $( "#edgeStrokeColor" ).val();
style.weightText = $( "#edgeTextColor" ).val();
var canvas = document.getElementById( "EdgePreview" );
var context = canvas.getContext('2d');
context.save();
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);
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);
graphDrawer.Draw(baseEdge, style);
context.restore();
}
dialogButtons[g_default] =
{
text : g_default,
class : "MarginLeft",
click : function() {
app.ResetEdgeStyle(index);
app.redrawGraph();
$( this ).dialog( "close" );
}
};
dialogButtons[g_save] = function() {
app.SetEdgeStyle(index, style);
app.redrawGraph();
$( this ).dialog( "close" );
};
dialogButtons[g_cancel] = function() {
$( this ).dialog( "close" );
};
fillFields();
$( "#SetupEdgeStyleDialog" ).dialog({
resizable: false,
height: "auto",
width: "auto",
modal: true,
title: g_edgeDraw,
buttons: dialogButtons,
dialogClass: 'EdgeDialog'
});
redrawVertex();
$( "#edgeFillColor" ).unbind();
$( "#edgeStrokeColor" ).unbind();
$( "#edgeTextColor" ).unbind();
$( "#edgeFillColor" ).change(redrawVertex);
$( "#edgeStrokeColor" ).change(redrawVertex);
$( "#edgeTextColor" ).change(redrawVertex);
}

View File

@ -763,7 +763,7 @@ Graph.prototype.SplitMatrixString = function (line, separator)
}
Graph.prototype.SaveToXML = function ()
Graph.prototype.SaveToXML = function (additionalData)
{
var mainHeader = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><graphml>";
var header = "<graph id=\"Graph\" uidGraph=\"" + this.uidGraph + "\"" + " uidEdge=\"" + this.uidEdge + "\">";
@ -784,10 +784,16 @@ Graph.prototype.SaveToXML = function ()
xmlBoby = xmlBoby + "</edges>";
return mainHeader + header + xmlBoby + "</graph></graphml>";
additionalField = "";
if (additionalData.length > 0)
{
additionalField = "<additional data=\"" + additionalData + "\"/>"
}
return mainHeader + header + xmlBoby + "</graph>" + additionalField + "</graphml>";
}
Graph.prototype.LoadFromXML = function (xmlText)
Graph.prototype.LoadFromXML = function (xmlText, additionalData)
{
xmlDoc = $.parseXML( xmlText );
var $xml = $( xmlDoc );
@ -833,6 +839,12 @@ Graph.prototype.LoadFromXML = function (xmlText)
});
this.edges = edges;
$additional = $xml.find( "additional" );
if ($additional.length != 0 && additionalData != null)
{
additionalData["data"] = $additional.attr('data');
}
}
Graph.prototype.hasDirectEdge = function ()

View File

@ -412,6 +412,26 @@ function postLoadPage()
application.SetHandlerMode("default");
document.getElementById('Default').className = "btn btn-primary btn-sm";
}
document.getElementById('SetupVertexStyle').onclick = function ()
{
userAction(this.id);
application.SetHandlerMode("setupVertexStyle");
}
document.getElementById('SetupVertexStyleSelected').onclick = function ()
{
userAction(this.id);
application.SetHandlerMode("setupVertexStyleSelected");
}
document.getElementById('SetupEdgeStyle').onclick = function ()
{
userAction(this.id);
application.SetHandlerMode("setupEdgeStyle");
}
document.getElementById('SetupEdgeStyleSelected').onclick = function ()
{
userAction(this.id);
application.SetHandlerMode("setupEdgeStyleSelected");
}
document.getElementById('runUserScript').onclick = function ()
{
@ -471,7 +491,7 @@ function postLoadPage()
{
userAction(this.id);
var graphAsString = application.graph.SaveToXML();
var graphAsString = application.graph.SaveToXML("");
var savedGraphName = application.GetNewGraphName();
var element = document.createElement('a');

View File

@ -23,6 +23,7 @@ var g_notOrintEdge = "not Orient";
var g_adjacencyMatrixText = "Adjacency Matrix";
var g_save = "Save";
var g_cancel = "Cancel";
var g_save_graph = "Save Graph";
var g_shortestDistance = "lowest-distance is ";
var g_incidenceMatrixText = "Incidence Matrix";
@ -98,6 +99,9 @@ var g_traversalOrder = "Traversal order: ";
var g_curveEdge = "Curved edge";
var g_Undo = "Undo";
var g_default = "default";
var g_vertexDraw = "Vertex draw style";
var g_edgeDraw = "Edge draw style";
function loadTexts()
{
@ -197,4 +201,8 @@ function loadTexts()
g_curveEdge = document.getElementById("curveEdge").innerHTML;
g_Undo = document.getElementById("undoTranslate").innerHTML;
g_save_graph = document.getElementById("saveGraph").innerHTML;
g_default = document.getElementById("default").innerHTML;
g_vertexDraw = document.getElementById("vertexDrawStyle").innerHTML;
g_edgeDraw = document.getElementById("edgeDrawStyle").innerHTML;
}

View File

@ -118,6 +118,20 @@
<button type="button" class="btn btn-default btn-sm" id="DeleteObject"><span class="glyphicon glyphicon-remove fa-fw"></span><span class="hidden-phone"> <?= L('delete')?> <sub style="color:#AAAAAA">r</sub></span></button>
<div class="btn-group hidden-phone" role="group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="openSettings">
<span class="glyphicon glyphicon-cog fa-fw "></span><span> <?= L('settings')?> </span><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" id="Settings">
<li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupVertexStyle"><?= L('common_vertex_settings')?></button> </li>
<li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupVertexStyleSelected"><?= L('selected_vertex_settings')?></button> </li>
<li class="divider"></li>
<li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupEdgeStyle"><?= L('common_edge_settings')?></button> </li>
<li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupEdgeStyleSelected"><?= L('selected_edge_settings')?></button> </li>
</ul>
</div>
<!--
<? if (!$wasVote && count($voteTopics) > 0): ?>
<button type="button" class="btn btn-success" id="VoteButton"><span class="glyphicon glyphicon-thumbs-up"></span> <?= L('vote') ?></button>
@ -354,6 +368,66 @@
</form>
</div>
<div id="SetupVertexStyleDialog">
<form>
<fieldset>
<div class="form-group row">
<label for="vertexFillColor" class="col-sm-5 col-form-label"><?= L('common_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="vertexFillColor" value="#FFAA22">
</div>
</div>
<div class="form-group row">
<label for="vertexStrokeColor" class="col-sm-5 col-form-label"><?= L('stroke_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="vertexStrokeColor" value="#FFAA22">
</div>
</div>
<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">
</div>
</div>
<div class="form-group row">
<label for="vertexTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="vertexTextColor" value="#FFAA22">
</div>
</div>
</fieldset>
</form>
<canvas id="VertexPreview" width="300" height="150"></canvas>
</div>
<div id="SetupEdgeStyleDialog">
<form>
<fieldset>
<div class="form-group row">
<label for="edgeStrokeColor" class="col-sm-5 col-form-label"><?= L('common_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="edgeStrokeColor" value="#FFAA22">
</div>
</div>
<div class="form-group row">
<label for="edgeTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="edgeTextColor" value="#FFAA22">
</div>
</div>
<div class="form-group row">
<label for="edgeFillColor" class="col-sm-5 col-form-label"><?= L('text_background') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="edgeFillColor" value="#FFAA22">
</div>
</div>
</fieldset>
</form>
<canvas id="EdgePreview" width="300" height="150"></canvas>
</div>
<p id="SelectAndMoveObject" class="translation"><?= L('select_and_move_objects')?></p>
<p id="MoveCursorForMoving" class="translation"><?= L('move_cursor_for_moving')?></p>
@ -448,6 +522,10 @@
<p id="curveEdge" class="translation"><?= L('curve_edge')?></p>
<p id="undoTranslate" class="translation"><?= L('undo')?></p>
<p id="saveGraph" class="translation"><?= L('save_graph')?></p>
<p id="default" class="translation"><?= L('default')?></p>
<p id="vertexDrawStyle" class="translation"><?= L('vertex_draw_style')?></p>
<p id="edgeDrawStyle" class="translation"><?= L('edge_draw_style')?></p>
</section>
<!--