mirror of
https://github.com/UnickSoft/graphonline.git
synced 2025-07-01 15:26:12 +00:00
Add text position.
Setting for selection groups. Fix bugs.
This commit is contained in:
Oleg Sh
parent
35c6656d0f
commit
c6b1611740
@ -194,7 +194,12 @@
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -232,7 +232,12 @@
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -231,7 +231,12 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -231,7 +231,12 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -199,7 +199,12 @@
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
@ -196,7 +196,12 @@
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -197,7 +197,12 @@
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -232,7 +232,12 @@
|
||||
$g_lang['vertex_diameter'] = "Размер вершины";
|
||||
|
||||
$g_lang['additional_text_color'] = "Цвет другого текста";
|
||||
$g_lang['weight_position'] = "Позиция текста";
|
||||
$g_lang['center'] = "По центру";
|
||||
$g_lang['on_up'] = "Сверху";
|
||||
$g_lang['on_up'] = "Сверху";
|
||||
|
||||
$g_lang['weight_position'] = "Позиция веса";
|
||||
$g_lang['text_position'] = "Позиция текста";
|
||||
$g_lang['line_style'] = "Стиль дуги";
|
||||
$g_lang['edge_width'] = "Толщина дуги";
|
||||
$g_lang['selected_index'] = "Группа выделения";
|
||||
?>
|
||||
|
||||
@ -193,7 +193,12 @@
|
||||
$g_lang['vertex_diameter'] = "Vertex size";
|
||||
|
||||
$g_lang['additional_text_color'] = "Another text color";
|
||||
$g_lang['weight_position'] = "Text position";
|
||||
$g_lang['center'] = "Center";
|
||||
$g_lang['on_up'] = "Above";
|
||||
|
||||
$g_lang['weight_position'] = "Weight position";
|
||||
$g_lang['text_position'] = "Text position";
|
||||
$g_lang['line_style'] = "Edge style";
|
||||
$g_lang['edge_width'] = "Edge width";
|
||||
$g_lang['selected_index'] = "Selection group";
|
||||
?>
|
||||
|
||||
@ -1512,7 +1512,7 @@ Application.prototype.LoadUserSettings = function(json)
|
||||
{
|
||||
for(var deepK in parsedSave[entry.field][k])
|
||||
{
|
||||
if (entry.value[k].ShouldLoad(deepK))
|
||||
if (k < entry.value.length && entry.value[k].ShouldLoad(deepK))
|
||||
entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
|
||||
}
|
||||
}
|
||||
@ -1647,6 +1647,10 @@ Application.prototype.GetSelectionRect = function(rect)
|
||||
|
||||
Application.prototype.GetStyle = function(type, styleName, object, index)
|
||||
{
|
||||
var correctIndex = index;
|
||||
if (correctIndex == undefined)
|
||||
correctIndex = 0;
|
||||
|
||||
if (type == "vertex")
|
||||
{
|
||||
if (styleName == "common")
|
||||
@ -1655,10 +1659,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
|
||||
}
|
||||
else if (styleName == "selected")
|
||||
{
|
||||
if (index == undefined)
|
||||
index = 0;
|
||||
|
||||
return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[index];
|
||||
return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[correctIndex];
|
||||
}
|
||||
else if (styleName == "printed")
|
||||
{
|
||||
@ -1666,10 +1667,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
|
||||
}
|
||||
else if (styleName == "printedSelected")
|
||||
{
|
||||
if (index == undefined)
|
||||
index = 0;
|
||||
|
||||
return this.vertexPrintSelectedVertexStyles[index];
|
||||
return this.vertexPrintSelectedVertexStyles[correctIndex];
|
||||
}
|
||||
|
||||
return null;
|
||||
@ -1682,7 +1680,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
|
||||
}
|
||||
else if (styleName == "selected")
|
||||
{
|
||||
return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[0];
|
||||
return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[correctIndex];
|
||||
}
|
||||
else if (styleName == "printed")
|
||||
{
|
||||
@ -1690,8 +1688,8 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
|
||||
}
|
||||
else if (styleName == "printedSelected")
|
||||
{
|
||||
return this.edgePrintSelectedStyles[0];
|
||||
}
|
||||
return this.edgePrintSelectedStyles[correctIndex];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@ -1796,7 +1794,7 @@ Application.prototype.SetDefaultEdgeWidth = function(width)
|
||||
|
||||
Application.prototype.GetDefaultEdgeWidth = function(diameter)
|
||||
{
|
||||
if (this.defaultVertexSize != null)
|
||||
if (this.defaultEdgeWidth != null)
|
||||
return this.defaultEdgeWidth;
|
||||
else
|
||||
return defaultEdgeWidth;
|
||||
@ -1804,7 +1802,7 @@ Application.prototype.GetDefaultEdgeWidth = function(diameter)
|
||||
|
||||
Application.prototype.ResetEdgeWidth = function()
|
||||
{
|
||||
this.defaultVertexSize = null;
|
||||
this.defaultEdgeWidth = null;
|
||||
|
||||
for (i = 0; i < this.graph.edges.length; i ++)
|
||||
{
|
||||
|
||||
@ -293,7 +293,7 @@ BaseEdge.prototype.getStyleFor = function (index)
|
||||
if (index == 0)
|
||||
style = globalApplication.GetStyle("edge", "common");
|
||||
else
|
||||
style = globalApplication.GetStyle("edge", "selected");
|
||||
style = globalApplication.GetStyle("edge", "selected", undefined, index - 1);
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
[16, 4, 4, 4],
|
||||
];
|
||||
|
||||
// Common text position
|
||||
const WeightTextCenter = 0,
|
||||
WeightTextUp = 1;
|
||||
|
||||
function BaseEdgeStyle()
|
||||
{
|
||||
this.baseStyles = [];
|
||||
@ -34,6 +38,10 @@
|
||||
baseStyle.textStrockeWidth = this.textStrockeWidth;
|
||||
if (this.hasOwnProperty('lineDash'))
|
||||
baseStyle.lineDash = this.lineDash;
|
||||
if (this.hasOwnProperty('additionalTextColor'))
|
||||
baseStyle.additionalTextColor = this.additionalTextColor;
|
||||
if (this.hasOwnProperty('weightPosition'))
|
||||
baseStyle.weightPosition = this.weightPosition;
|
||||
|
||||
return baseStyle;
|
||||
}
|
||||
@ -53,6 +61,8 @@ function CommonEdgeStyle()
|
||||
this.textPadding = 4;
|
||||
this.textStrockeWidth = 2;
|
||||
this.lineDash = 0;
|
||||
this.additionalTextColor = '#c7b7c7';
|
||||
this.weightPosition = WeightTextCenter;
|
||||
}
|
||||
|
||||
CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
|
||||
@ -234,15 +244,30 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
|
||||
}
|
||||
|
||||
this.SetupStyle(baseEdge, arcStyle);
|
||||
|
||||
if (baseEdge.GetText().length > 0)
|
||||
{
|
||||
this.DrawWeight(positions[0], positions[1], baseEdge.GetText(), arcStyle, false);
|
||||
}
|
||||
|
||||
if (baseEdge.GetUpText().length > 0)
|
||||
if (arcStyle.weightPosition == WeightTextCenter)
|
||||
{
|
||||
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false);
|
||||
if (baseEdge.GetText().length > 0)
|
||||
{
|
||||
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, arcStyle.additionalTextColor, baseEdge.model.width / 2 + 20, null);
|
||||
}
|
||||
}
|
||||
else if (arcStyle.weightPosition == WeightTextUp)
|
||||
{
|
||||
if (baseEdge.GetText().length > 0)
|
||||
{
|
||||
this.DrawUpText(positions[0], positions[1], baseEdge.GetText(), arcStyle, false, arcStyle.weightText, baseEdge.model.width / 2 + 10, "16px");
|
||||
}
|
||||
|
||||
if (baseEdge.GetUpText().length > 0)
|
||||
{
|
||||
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor, - baseEdge.model.width / 2 - 15, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -305,16 +330,16 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
|
||||
this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
|
||||
}
|
||||
|
||||
BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair)
|
||||
BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair, color, offset, fontSize)
|
||||
{
|
||||
var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
|
||||
|
||||
this.context.font = "bold 12px sans-serif";
|
||||
this.context.font = fontSize == null ? "bold 12px sans-serif" : "bold " + fontSize + " sans-serif";
|
||||
this.context.textBaseline = "middle";
|
||||
|
||||
var widthText = this.context.measureText(text).width;
|
||||
|
||||
this.context.fillStyle = arcStyle.strokeStyle;
|
||||
this.context.fillStyle = color;
|
||||
|
||||
var vectorEdge = new Point(position2.x - position1.x, position2.y - position1.y);
|
||||
var angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
|
||||
@ -323,13 +348,11 @@ BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcSt
|
||||
vectorEdge = new Point(position1.x - position2.x, position1.y - position2.y);
|
||||
angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
|
||||
}
|
||||
var normalize = vectorEdge.normal().normalizeCopy(20);
|
||||
var normalize = vectorEdge.normal().normalizeCopy(offset);
|
||||
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);
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@ BaseVertex.prototype.SetId = function (id)
|
||||
|
||||
BaseVertex.prototype.diameterFactor = function ()
|
||||
{
|
||||
return 1.0 + (this.mainText.length ? this.mainText.length / 8.0 : 0);
|
||||
return new Point(1.0 + (this.mainText.length ? this.mainText.length / 8.0 : 0), 1.5);
|
||||
}
|
||||
|
||||
BaseVertex.prototype.IsUndefinedPosition = function ()
|
||||
@ -169,7 +169,7 @@ BaseVertex.prototype.getStyleFor = function (index)
|
||||
if (index == 0)
|
||||
style = globalApplication.GetStyle("vertex", "common");
|
||||
else
|
||||
style = globalApplication.GetStyle("vertex", "selected");
|
||||
style = globalApplication.GetStyle("vertex", "selected", undefined, index - 1);
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
@ -217,71 +217,6 @@ function SelectedVertexStyle4()
|
||||
|
||||
SelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
function SelectedVertexStyle5()
|
||||
{
|
||||
BaseVertexStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#FF6200';
|
||||
this.mainTextColor = '#FF6200';
|
||||
this.fillStyle = '#0F4FA8';
|
||||
|
||||
this.baseStyles.push("selected");
|
||||
}
|
||||
|
||||
SelectedVertexStyle5.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
function SelectedVertexStyle6()
|
||||
{
|
||||
BaseVertexStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#8CA336';
|
||||
this.mainTextColor = '#8CA336';
|
||||
this.fillStyle = '#9C344C';
|
||||
|
||||
this.baseStyles.push("selected");
|
||||
}
|
||||
|
||||
SelectedVertexStyle6.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
function SelectedVertexStyle7()
|
||||
{
|
||||
BaseVertexStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#B59E22';
|
||||
this.mainTextColor = '#B59E22';
|
||||
this.fillStyle = '#22387A';
|
||||
|
||||
this.baseStyles.push("selected");
|
||||
}
|
||||
|
||||
SelectedVertexStyle7.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
function SelectedVertexStyle8()
|
||||
{
|
||||
BaseVertexStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#08806C';
|
||||
this.mainTextColor = '#08806C';
|
||||
this.fillStyle = '#CA980D';
|
||||
|
||||
this.baseStyles.push("selected");
|
||||
}
|
||||
|
||||
SelectedVertexStyle8.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
function SelectedVertexStyle9()
|
||||
{
|
||||
BaseVertexStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#AA8134';
|
||||
this.mainTextColor = '#AA8134';
|
||||
this.fillStyle = '#492A73';
|
||||
|
||||
this.baseStyles.push("selected");
|
||||
}
|
||||
|
||||
SelectedVertexStyle9.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
function SelectedPrintVertexStyle()
|
||||
{
|
||||
BaseVertexStyle.apply(this, arguments);
|
||||
@ -296,7 +231,7 @@ function SelectedPrintVertexStyle()
|
||||
SelectedPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
|
||||
|
||||
var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
|
||||
new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4(), new SelectedVertexStyle5(), new SelectedVertexStyle6(), new SelectedVertexStyle7(), new SelectedVertexStyle8(), new SelectedVertexStyle9()];
|
||||
new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4()];
|
||||
|
||||
var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()];
|
||||
|
||||
|
||||
@ -1390,19 +1390,24 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
var app = this.app;
|
||||
this.forAll = selectedVertexes == null;
|
||||
var forAll = this.forAll;
|
||||
var sefl = this;
|
||||
|
||||
var originStyle = (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]);
|
||||
|
||||
if (!forAll)
|
||||
var applyIndex = function(index)
|
||||
{
|
||||
originStyle = selectedVertexes[0].getStyleFor(index);
|
||||
self.index = index;
|
||||
self.originStyle = (self.index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[self.index - 1]);
|
||||
if (!forAll)
|
||||
{
|
||||
self.originStyle = selectedVertexes[0].getStyleFor(self.index);
|
||||
}
|
||||
self.style = FullObjectCopy(self.originStyle);
|
||||
}
|
||||
|
||||
var style = FullObjectCopy(originStyle);
|
||||
applyIndex(index);
|
||||
|
||||
var fillFields = function()
|
||||
{
|
||||
var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
|
||||
var fullStyle = self.style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
|
||||
|
||||
$( "#vertexFillColor" ).val(fullStyle.fillStyle);
|
||||
$( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
|
||||
@ -1411,7 +1416,17 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
$( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
|
||||
$( "#vertexShape" ).val(fullStyle.shape);
|
||||
$( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
|
||||
$( "#commonTextPosition" ).val(fullStyle.commonTextPosition);
|
||||
$( "#commonTextPosition" ).val(fullStyle.commonTextPosition);
|
||||
|
||||
if (self.index > 0)
|
||||
{
|
||||
$( "#VertexSelectedIndexForm" ).show();
|
||||
$( "#vertexSelectedIndex" ).val(self.index);
|
||||
}
|
||||
else
|
||||
{
|
||||
$( "#VertexSelectedIndexForm" ).hide();
|
||||
}
|
||||
}
|
||||
|
||||
var redrawVertex = function()
|
||||
@ -1419,25 +1434,25 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
|
||||
|
||||
if (fullStyle.fillStyle != $( "#vertexFillColor" ).val())
|
||||
style.fillStyle = $( "#vertexFillColor" ).val();
|
||||
self.style.fillStyle = $( "#vertexFillColor" ).val();
|
||||
|
||||
if (fullStyle.strokeStyle != $( "#vertexStrokeColor" ).val())
|
||||
style.strokeStyle = $( "#vertexStrokeColor" ).val();
|
||||
self.style.strokeStyle = $( "#vertexStrokeColor" ).val();
|
||||
|
||||
if (fullStyle.mainTextColor != $( "#vertexTextColor" ).val())
|
||||
style.mainTextColor = $( "#vertexTextColor" ).val();
|
||||
self.style.mainTextColor = $( "#vertexTextColor" ).val();
|
||||
|
||||
if (fullStyle.lineWidth != $( "#vertexStrokeSize" ).val())
|
||||
style.lineWidth = parseInt($( "#vertexStrokeSize" ).val());
|
||||
self.style.lineWidth = parseInt($( "#vertexStrokeSize" ).val());
|
||||
|
||||
if (fullStyle.shape != $( "#vertexShape" ).val())
|
||||
style.shape = parseInt($( "#vertexShape" ).val());
|
||||
self.style.shape = parseInt($( "#vertexShape" ).val());
|
||||
|
||||
if (fullStyle.upTextColor != $( "#upVertexTextColor" ).val())
|
||||
style.upTextColor = $( "#upVertexTextColor" ).val();
|
||||
self.style.upTextColor = $( "#upVertexTextColor" ).val();
|
||||
|
||||
if (fullStyle.commonTextPosition != $( "#commonTextPosition" ).val())
|
||||
style.commonTextPosition = $( "#commonTextPosition" ).val();
|
||||
self.style.commonTextPosition = $( "#commonTextPosition" ).val();
|
||||
|
||||
var diameter = parseInt($( "#vertexSize" ).val());
|
||||
|
||||
@ -1458,12 +1473,20 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
if (!forAll)
|
||||
baseVertex.ownStyles = selectedVertexes[0].ownStyles;
|
||||
|
||||
graphDrawer.Draw(baseVertex, style.GetStyle({}, baseVertex));
|
||||
graphDrawer.Draw(baseVertex, self.style.GetStyle({}, baseVertex));
|
||||
|
||||
context.restore();
|
||||
}
|
||||
|
||||
//var dialogButtons = [];
|
||||
var changeIndex = function()
|
||||
{
|
||||
var index = parseInt($( "#vertexSelectedIndex" ).val());
|
||||
this.index = index;
|
||||
applyIndex(index);
|
||||
fillFields();
|
||||
redrawVertex();
|
||||
}
|
||||
|
||||
var applyDiameter = function(diameter)
|
||||
{
|
||||
if (forAll)
|
||||
@ -1488,12 +1511,12 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
|
||||
if (forAll)
|
||||
{
|
||||
app.ResetVertexStyle(index);
|
||||
app.ResetVertexStyle(self.index);
|
||||
}
|
||||
else
|
||||
{
|
||||
selectedVertexes.forEach(function(vertex) {
|
||||
vertex.resetOwnStyle(index);
|
||||
vertex.resetOwnStyle(self.index);
|
||||
});
|
||||
}
|
||||
app.redrawGraph();
|
||||
@ -1507,14 +1530,14 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
|
||||
if (forAll)
|
||||
{
|
||||
app.SetVertexStyle(index, style);
|
||||
app.SetVertexStyle(self.index, self.style);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (JSON.stringify(originStyle) !== JSON.stringify(style))
|
||||
if (JSON.stringify(self.originStyle) !== JSON.stringify(self.style))
|
||||
{
|
||||
selectedVertexes.forEach(function(vertex) {
|
||||
vertex.setOwnStyle(index, style);
|
||||
vertex.setOwnStyle(self.index, self.style);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1547,6 +1570,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
$( "#vertexShape" ).unbind();
|
||||
$( "#vertexSize" ).unbind();
|
||||
$( "#commonTextPosition" ).unbind();
|
||||
$( "#vertexSelectedIndex" ).unbind();
|
||||
|
||||
$( "#vertexFillColor" ).change(redrawVertex);
|
||||
$( "#vertexStrokeColor" ).change(redrawVertex);
|
||||
@ -1556,6 +1580,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
|
||||
$( "#vertexSize" ).change(redrawVertex);
|
||||
$( "#upVertexTextColor" ).change(redrawVertex);
|
||||
$( "#commonTextPosition" ).change(redrawVertex);
|
||||
$( "#vertexSelectedIndex" ).change(changeIndex);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1580,41 +1605,66 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
this.forAll = selectedEdges == null;
|
||||
var forAll = this.forAll;
|
||||
|
||||
var originStyle = (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]);
|
||||
var self = this;
|
||||
|
||||
if (!forAll)
|
||||
var applyIndex = function(index)
|
||||
{
|
||||
originStyle = selectedEdges[0].getStyleFor(index);
|
||||
self.index = index;
|
||||
var originStyle = (self.index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[self.index - 1]);
|
||||
if (!forAll)
|
||||
{
|
||||
originStyle = selectedEdges[0].getStyleFor(self.index);
|
||||
}
|
||||
self.style = FullObjectCopy(originStyle);
|
||||
}
|
||||
|
||||
var style = FullObjectCopy(originStyle);
|
||||
applyIndex(index);
|
||||
|
||||
var fillFields = function()
|
||||
{
|
||||
var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
|
||||
var fullStyle = self.style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
|
||||
|
||||
$( "#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);
|
||||
|
||||
$( "#weightEdgeTextColor" ).val(fullStyle.additionalTextColor);
|
||||
$( "#weightTextPosition" ).val(fullStyle.weightPosition);
|
||||
|
||||
if (self.index > 0)
|
||||
{
|
||||
$( "#EdgeSelectedIndexForm" ).show();
|
||||
$( "#edgeSelectedIndex" ).val(self.index);
|
||||
}
|
||||
else
|
||||
{
|
||||
$( "#EdgeSelectedIndexForm" ).hide();
|
||||
}
|
||||
}
|
||||
|
||||
var redrawVertex = function()
|
||||
{
|
||||
var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
|
||||
var fullStyle = self.style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
|
||||
|
||||
if (fullStyle.fillStyle != $( "#edgeFillColor" ).val())
|
||||
style.fillStyle = $( "#edgeFillColor" ).val();
|
||||
self.style.fillStyle = $( "#edgeFillColor" ).val();
|
||||
|
||||
if (fullStyle.strokeStyle != $( "#edgeStrokeColor" ).val())
|
||||
style.strokeStyle = $( "#edgeStrokeColor" ).val();
|
||||
self.style.strokeStyle = $( "#edgeStrokeColor" ).val();
|
||||
|
||||
if (fullStyle.weightText != $( "#edgeTextColor" ).val())
|
||||
style.weightText = $( "#edgeTextColor" ).val();
|
||||
self.style.weightText = $( "#edgeTextColor" ).val();
|
||||
|
||||
if (fullStyle.lineDash != $( "#edgeStyle" ).val())
|
||||
style.lineDash = $( "#edgeStyle" ).val();
|
||||
self.style.lineDash = $( "#edgeStyle" ).val();
|
||||
|
||||
if (fullStyle.additionalTextColor != $( "#weightEdgeTextColor" ).val())
|
||||
self.style.additionalTextColor = $( "#weightEdgeTextColor" ).val();
|
||||
|
||||
if (fullStyle.weightPosition != $( "#weightTextPosition" ).val())
|
||||
self.style.weightPosition = $( "#weightTextPosition" ).val();
|
||||
|
||||
var edgeWidth = parseInt($( "#edgeWidth" ).val());
|
||||
|
||||
@ -1640,10 +1690,19 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
|
||||
baseEdge.model.width = edgeWidth;
|
||||
|
||||
graphDrawer.Draw(baseEdge, style.GetStyle({}, baseEdge));
|
||||
graphDrawer.Draw(baseEdge, self.style.GetStyle({}, baseEdge));
|
||||
|
||||
context.restore();
|
||||
}
|
||||
|
||||
var changeIndex = function()
|
||||
{
|
||||
var index = parseInt($( "#edgeSelectedIndex" ).val());
|
||||
this.index = index;
|
||||
applyIndex(index);
|
||||
fillFields();
|
||||
redrawVertex();
|
||||
}
|
||||
|
||||
var applyWidth = function(width)
|
||||
{
|
||||
@ -1669,12 +1728,12 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
|
||||
if (forAll)
|
||||
{
|
||||
app.ResetEdgeStyle(index);
|
||||
app.ResetEdgeStyle(self.index);
|
||||
}
|
||||
else
|
||||
{
|
||||
selectedEdges.forEach(function(edge) {
|
||||
edge.resetOwnStyle(index);
|
||||
edge.resetOwnStyle(self.index);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1689,12 +1748,12 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
|
||||
if (forAll)
|
||||
{
|
||||
app.SetEdgeStyle(index, style);
|
||||
app.SetEdgeStyle(self.index, self.style);
|
||||
}
|
||||
else
|
||||
{
|
||||
selectedEdges.forEach(function(edge) {
|
||||
edge.setOwnStyle(index, style);
|
||||
edge.setOwnStyle(self.index, self.style);
|
||||
});
|
||||
}
|
||||
app.redrawGraph();
|
||||
@ -1722,13 +1781,19 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
$( "#edgeStrokeColor" ).unbind();
|
||||
$( "#edgeTextColor" ).unbind();
|
||||
$( "#edgeStyle" ).unbind();
|
||||
$( "#edgeWidth" ).unbind();
|
||||
$( "#edgeWidth" ).unbind();
|
||||
$( "#weightEdgeTextColor" ).unbind();
|
||||
$( "#weightTextPosition" ).unbind();
|
||||
$( "#edgeSelectedIndex" ).unbind();
|
||||
|
||||
$( "#edgeFillColor" ).change(redrawVertex);
|
||||
$( "#edgeStrokeColor" ).change(redrawVertex);
|
||||
$( "#edgeTextColor" ).change(redrawVertex);
|
||||
$( "#edgeStyle" ).change(redrawVertex);
|
||||
$( "#edgeWidth" ).change(redrawVertex);
|
||||
$( "#weightEdgeTextColor" ).change(redrawVertex);
|
||||
$( "#weightTextPosition" ).change(redrawVertex);
|
||||
$( "#edgeSelectedIndex" ).change(changeIndex);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -953,7 +953,8 @@ Graph.prototype.getGraphBBox = function (viewportSize)
|
||||
for(i = 0; i < this.vertices.length; i++)
|
||||
{
|
||||
var vertex = this.vertices[i];
|
||||
var deltaVector = new Point(vertex.diameterFactor() * diameter, diameter);
|
||||
var factor = vertex.diameterFactor();
|
||||
var deltaVector = new Point(factor.x * diameter, factor.y * diameter);
|
||||
pointMin = pointMin.min(vertex.position.subtract(deltaVector));
|
||||
pointMax = pointMax.max(vertex.position.add(deltaVector));
|
||||
}
|
||||
|
||||
47
tpl/home.php
47
tpl/home.php
@ -427,7 +427,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="commonTextPosition" class="col-sm-5 col-form-label"><?= L('weight_position') ?></label>
|
||||
<label for="commonTextPosition" class="col-sm-5 col-form-label"><?= L('text_position') ?></label>
|
||||
<div class="col-sm-5">
|
||||
<select id="commonTextPosition">
|
||||
<option value="0"><?= L('center') ?></option>
|
||||
@ -452,6 +452,18 @@
|
||||
<input type="number" class="form-control" id="vertexSize" placeholder="10" min="10" min="100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row" id="VertexSelectedIndexForm">
|
||||
<label for="vertexSelectedIndex" class="col-sm-5 col-form-label"><?= L('selected_index')?></label>
|
||||
<div class="col-sm-5">
|
||||
<select id="vertexSelectedIndex">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
@ -467,12 +479,27 @@
|
||||
<input type="color" class="form-control" id="edgeStrokeColor" value="#FFAA22">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row small-bottom-marging">
|
||||
<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 small-bottom-marging">
|
||||
<label for="weightEdgeTextColor" class="col-sm-5 col-form-label"><?= L('additional_text_color') ?></label>
|
||||
<div class="col-sm-5">
|
||||
<input type="color" class="form-control" id="weightEdgeTextColor" value="#FFAA22">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="weightTextPosition" class="col-sm-5 col-form-label"><?= L('weight_position') ?></label>
|
||||
<div class="col-sm-5">
|
||||
<select id="weightTextPosition">
|
||||
<option value="0"><?= L('center') ?></option>
|
||||
<option value="1"><?= L('on_up') ?></option>
|
||||
</select>
|
||||
</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">
|
||||
@ -480,7 +507,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="edgeStyle" class="col-sm-5 col-form-label">Line Style</label>
|
||||
<label for="edgeStyle" class="col-sm-5 col-form-label"><?= L('line_style') ?></label>
|
||||
<div class="col-sm-5">
|
||||
<select id="edgeStyle">
|
||||
<option value="0">Solid</option>
|
||||
@ -491,11 +518,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="edgeWidth" class="col-sm-5 col-form-label">Edge width</label>
|
||||
<label for="edgeWidth" class="col-sm-5 col-form-label"><?= L('edge_width') ?></label>
|
||||
<div class="col-sm-5">
|
||||
<input type="number" class="form-control" id="edgeWidth" placeholder="3" min="1" min="20">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row" id="EdgeSelectedIndexForm">
|
||||
<label for="edgeSelectedIndex" class="col-sm-5 col-form-label"><?= L('selected_index')?></label>
|
||||
<div class="col-sm-5">
|
||||
<select id="edgeSelectedIndex">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user