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 presets for color

Browse Source 
Add select style for all selected styles.
This commit is contained in:
Oleg Sh
2021-05-04 12:13:27 +02:00
parent f0dbbb31f4
commit 89ad081919
15 changed files with 264 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lang/de/home.php
View File

@@ -202,4 +202,6 @@
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

2
lang/el/home.php
View File

@@ -240,4 +240,6 @@
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

2
lang/en/home.php
View File

@@ -239,4 +239,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

2
lang/es/home.php
View File

@@ -239,4 +239,6 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

4
lang/fr/home.php
View File

@@ -206,5 +206,7 @@
$g_lang['text_position'] = "Text position";
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

4
lang/nl/home.php
View File

@@ -203,5 +203,7 @@
$g_lang['text_position'] = "Text position";
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

2
lang/pt/home.php
View File

@@ -205,4 +205,6 @@
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

2
lang/ru/home.php
View File

@@ -240,4 +240,6 @@
$g_lang['line_style'] = "Стиль дуги";
$g_lang['edge_width'] = "Толщина дуги";
$g_lang['selected_index'] = "Группа выделения";
$g_lang['all'] = "Все";
?>

2
lang/sv/home.php
View File

@@ -201,4 +201,6 @@
$g_lang['line_style'] = "Edge style";
$g_lang['edge_width'] = "Edge width";
$g_lang['selected_index'] = "Selection group";
$g_lang['all'] = "All";
?>

14
script/Appilcation.js
View File

@@ -1501,15 +1501,25 @@ Application.prototype.LoadUserSettings = function(json)
}
else
{
if (!entry.deep)
entry.value.Clear();
for(var k in parsedSave[entry.field])
{
if (!entry.deep)
{
if (entry.value.ShouldLoad(k))
{
entry.value[k] = parsedSave[entry.field][k];
}
}
else
{
// Check is number or not
if (k % 1 != 0)
continue;
entry.value[k].Clear();
for(var deepK in parsedSave[entry.field][k])
{
if (k < entry.value.length && entry.value[k].ShouldLoad(deepK))
@@ -1659,7 +1669,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
}
else if (styleName == "selected")
{
return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[correctIndex];
return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.vertexSelectedVertexStyles[correctIndex];
}
else if (styleName == "printed")
{
@@ -1680,7 +1690,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
}
else if (styleName == "selected")
{
return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[correctIndex];
return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.edgeSelectedStyles[correctIndex];
}
else if (styleName == "printed")
{

6
script/BaseBackgroundDrawer.js
View File

@@ -9,6 +9,12 @@ function CommonBackgroundStyle()
this.commonOpacity = 1.0;
}
CommonBackgroundStyle.prototype.Clear = function ()
{
delete this.commonColor;
delete this.commonOpacity;
}
CommonBackgroundStyle.prototype.ShouldLoad = function (field)
{
return true;

14
script/BaseEdgeDrawer.js
View File

@@ -45,7 +45,19 @@ const WeightTextCenter = 0,
return baseStyle;
}
BaseEdgeStyle.prototype.Clear = function ()
{
delete this.weightText;
delete this.strokeStyle;
delete this.fillStyle;
delete this.textPadding;
delete this.textStrockeWidth;
delete this.lineDash;
delete this.additionalTextColor;
delete this.weightPosition;
}
BaseEdgeStyle.prototype.ShouldLoad = function (field)
{
return field != "baseStyles";

12
script/BaseVertexDrawer.js
View File

@@ -115,6 +115,18 @@ BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
return baseStyle;
}
BaseVertexStyle.prototype.Clear = function ()
{
delete this.lineWidth;
delete this.strokeStyle;
delete this.fillStyle;
delete this.mainTextColor;
delete this.shape;
delete this.upTextColor;
delete this.commonTextPosition;
delete this.lineWidth;
}
BaseVertexStyle.prototype.ShouldLoad = function (field)
{
return field != "baseStyles";

197
script/EventHandlers.js
View File

@@ -1418,7 +1418,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
$( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
$( "#commonTextPosition" ).val(fullStyle.commonTextPosition);
if (self.index > 0)
if (self.index > 0 || self.index == "all")
{
$( "#VertexSelectedIndexForm" ).show();
$( "#vertexSelectedIndex" ).val(self.index);
@@ -1426,7 +1426,40 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
else
{
$( "#VertexSelectedIndexForm" ).hide();
}
}
// Fill color presets.
var stylesArray = [];
stylesArray.push(app.vertexCommonStyle);
for (i = 0; i < app.vertexSelectedVertexStyles.length; i ++)
stylesArray.push(app.vertexSelectedVertexStyles[i]);
var colorSet = {};
for (i = 0; i < stylesArray.length; i ++)
{
var style = stylesArray[i];
if (style.hasOwnProperty('strokeStyle'))
colorSet[style.strokeStyle] = 1;
if (style.hasOwnProperty('fillStyle'))
colorSet[style.fillStyle] = 1;
if (style.hasOwnProperty('mainTextColor'))
colorSet[style.mainTextColor] = 1;
if (style.hasOwnProperty('upTextColor'))
colorSet[style.upTextColor] = 1;
}
$("#vertexFillColorPreset").find('option').remove();
$("#upVertexTextColorPreset").find('option').remove();
$("#vertexTextColorPreset").find('option').remove();
$("#vertexStrokeColorPreset").find('option').remove();
for (const property in colorSet)
{
$("#vertexFillColorPreset").append(new Option(property));
$("#upVertexTextColorPreset").append(new Option(property));
$("#vertexTextColorPreset").append(new Option(property));
$("#vertexStrokeColorPreset").append(new Option(property));
}
}
var redrawVertex = function()
@@ -1480,10 +1513,20 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
var changeIndex = function()
{
var index = parseInt($( "#vertexSelectedIndex" ).val());
this.index = index;
applyIndex(index);
fillFields();
var val = $( "#vertexSelectedIndex" ).val();
if (val == "all")
{
applyIndex(1);
self.index = "all";
fillFields();
}
else
{
var index = parseInt(val);
self.index = index;
applyIndex(index);
fillFields();
}
redrawVertex();
}
@@ -1509,14 +1552,28 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
applyDiameter(forAll ? (new VertexModel()).diameter : app.GetDefaultVertexSize());
var indexes = [];
if (self.index == "all")
{
for (i = 0; i < app.vertexSelectedVertexStyles.length; i ++)
indexes.push(i + 1);
}
else
indexes.push(self.index);
if (forAll)
{
app.ResetVertexStyle(self.index);
indexes.forEach(function(index) {
app.ResetVertexStyle(index);
});
}
else
{
selectedVertexes.forEach(function(vertex) {
vertex.resetOwnStyle(self.index);
indexes.forEach(function(index) {
vertex.resetOwnStyle(index);
});
});
}
app.redrawGraph();
@@ -1528,16 +1585,37 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
applyDiameter(parseInt($( "#vertexSize" ).val()));
var indexes = [];
if (self.index == "all")
{
indexes.push({index : 1, style : self.style});
for (i = 1; i < app.vertexSelectedVertexStyles.length; i ++)
{
var style = (new BaseVertexStyle());
style.baseStyles.push("selected");
indexes.push({index : i + 1, style : style});
}
self.style.baseStyles = [];
self.style.baseStyles = self.style.baseStyles.concat((new SelectedVertexStyle0()).baseStyles);
}
else
indexes.push({index : self.index, style : self.style});
if (forAll)
{
app.SetVertexStyle(self.index, self.style);
indexes.forEach(function(index) {
app.SetVertexStyle(index.index, index.style);
});
}
else
{
if (JSON.stringify(self.originStyle) !== JSON.stringify(self.style))
{
selectedVertexes.forEach(function(vertex) {
vertex.setOwnStyle(self.index, self.style);
indexes.forEach(function(index) {
vertex.setOwnStyle(index.index, index.style);
});
});
}
}
@@ -1633,7 +1711,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
$( "#weightEdgeTextColor" ).val(fullStyle.additionalTextColor);
$( "#weightTextPosition" ).val(fullStyle.weightPosition);
if (self.index > 0)
if (self.index > 0 || self.index == "all")
{
$( "#EdgeSelectedIndexForm" ).show();
$( "#edgeSelectedIndex" ).val(self.index);
@@ -1642,6 +1720,37 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
{
$( "#EdgeSelectedIndexForm" ).hide();
}
// Fill color presets.
var stylesArray = [];
stylesArray.push(app.edgeCommonStyle);
for (i = 0; i < app.edgeSelectedStyles.length; i ++)
stylesArray.push(app.edgeSelectedStyles[i]);
var colorSet = {};
for (i = 0; i < stylesArray.length; i ++)
{
var style = stylesArray[i];
if (style.hasOwnProperty('strokeStyle'))
colorSet[style.strokeStyle] = 1;
if (style.hasOwnProperty('fillStyle'))
colorSet[style.fillStyle] = 1;
if (style.hasOwnProperty('additionalTextColor'))
colorSet[style.additionalTextColor] = 1;
}
$("#edgeFillColorPreset").find('option').remove();
$("#weightEdgeTextColorPreset").find('option').remove();
$("#edgeTextColorPreset").find('option').remove();
$("#edgeStrokeColorPreset").find('option').remove();
for (const property in colorSet)
{
$("#edgeFillColorPreset").append(new Option(property));
$("#weightEdgeTextColorPreset").append(new Option(property));
$("#edgeTextColorPreset").append(new Option(property));
$("#edgeStrokeColorPreset").append(new Option(property));
}
}
var redrawVertex = function()
@@ -1697,10 +1806,21 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
var changeIndex = function()
{
var index = parseInt($( "#edgeSelectedIndex" ).val());
this.index = index;
applyIndex(index);
fillFields();
var val = $( "#edgeSelectedIndex" ).val();
if (val == "all")
{
applyIndex(1);
self.index = "all";
fillFields();
}
else
{
var index = parseInt(val);
self.index = index;
applyIndex(index);
fillFields();
}
redrawVertex();
}
@@ -1723,17 +1843,28 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
text : g_default,
class : "MarginLeft",
click : function() {
applyWidth(forAll ? (new EdgeModel()).width : app.GetDefaultEdgeWidth());
var indexes = [];
if (self.index == "all")
{
for (i = 0; i < app.edgeSelectedStyles.length; i ++)
indexes.push(i + 1);
}
else
indexes.push(self.index);
if (forAll)
{
app.ResetEdgeStyle(self.index);
{
indexes.forEach(function(index) {
app.ResetEdgeStyle(index);
});
}
else
{
selectedEdges.forEach(function(edge) {
edge.resetOwnStyle(self.index);
indexes.forEach(function(index) {
edge.resetOwnStyle(index);
});
});
}
@@ -1746,15 +1877,37 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
applyWidth(parseInt($( "#edgeWidth" ).val()));
var indexes = [];
if (self.index == "all")
{
indexes.push({index : 1, style : self.style});
for (i = 1; i < app.edgeSelectedStyles.length; i ++)
{
var style = (new BaseEdgeStyle());
style.baseStyles.push("selected");
indexes.push({index : i + 1, style : style});
}
self.style.baseStyles = [];
self.style.baseStyles = self.style.baseStyles.concat((new SelectedEdgeStyle0()).baseStyles);
}
else
indexes.push({index : self.index, style : self.style});
if (forAll)
{
app.SetEdgeStyle(self.index, self.style);
indexes.forEach(function(index) {
app.SetEdgeStyle(index.index, index.style);
});
}
else
{
selectedEdges.forEach(function(edge) {
edge.setOwnStyle(self.index, self.style);
});
indexes.forEach(function(index) {
edge.setOwnStyle(index.index, index.style);
});
});
}
app.redrawGraph();
$( this ).dialog( "close" );

34
tpl/home.php
View File

@@ -399,13 +399,17 @@
<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">
<input type="color" class="form-control" id="vertexFillColor" value="#FFAA22" list="vertexFillColorPreset">
<datalist id="vertexFillColorPreset">
</datalist>
</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">
<input type="color" class="form-control" id="vertexStrokeColor" value="#FFAA22" list="vertexStrokeColorPreset">
<datalist id="vertexStrokeColorPreset">
</datalist>
</div>
</div>
<div class="form-group row">
@@ -417,13 +421,17 @@
<div class="form-group row small-bottom-marging">
<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">
<input type="color" class="form-control" id="vertexTextColor" value="#FFAA22" list="vertexTextColorPreset">
<datalist id="vertexTextColorPreset">
</datalist>
</div>
</div>
<div class="form-group row small-bottom-marging">
<label for="upVertexTextColor" class="col-sm-5 col-form-label"><?= L('additional_text_color') ?></label>
<div class="col-sm-5">
<input type="color" class="form-control" id="upVertexTextColor" value="#FFAA22">
<input type="color" class="form-control" id="upVertexTextColor" value="#FFAA22" list="upVertexTextColorPreset">
<datalist id="upVertexTextColorPreset">
</datalist>
</div>
</div>
<div class="form-group row">
@@ -461,6 +469,7 @@
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="all"><?= L('all')?></option>
</select>
</div>
</div>
@@ -476,19 +485,25 @@
<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">
<input type="color" class="form-control" id="edgeStrokeColor" value="#FFAA22" list="edgeStrokeColorPreset">
<datalist id="edgeStrokeColorPreset">
</datalist>
</div>
</div>
<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">
<input type="color" class="form-control" id="edgeTextColor" value="#FFAA22" list="edgeTextColorPreset">
<datalist id="edgeTextColorPreset">
</datalist>
</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">
<input type="color" class="form-control" id="weightEdgeTextColor" value="#FFAA22" list="weightEdgeTextColorPreset">
<datalist id="weightEdgeTextColorPreset">
</datalist>
</div>
</div>
<div class="form-group row">
@@ -503,7 +518,9 @@
<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">
<input type="color" class="form-control" id="edgeFillColor" value="#FFAA22" list="edgeFillColorPreset">
<datalist id="edgeFillColorPreset">
</datalist>
</div>
</div>
<div class="form-group row">
@@ -532,6 +549,7 @@
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="all"><?= L('all')?></option>
</select>
</div>
</div>