Implement style switching functionality. Add default, night, and high contrast styles.

script/features/draw_graph/model/BackgroundStyle.js

@@ -25,11 +25,27 @@ function PrintBackgroundStyle()
 
 PrintBackgroundStyle.prototype = Object.create(CommonBackgroundStyle.prototype);
 
+function NightBackgroundStyle()
+{
+  CommonBackgroundStyle.apply(this, arguments);
+
+	this.commonColor   = '#0f172a';
+	this.commonOpacity = 1.0;
+  this.image = null;
+}
+
+NightBackgroundStyle.prototype = Object.create(CommonBackgroundStyle.prototype);
+
 function GetWhiteBackgroundStyle()
 {
   return new CommonBackgroundStyle();
 }
 
+function GetNightBackgroundStyle()
+{
+  return new NightBackgroundStyle();
+}
+
 function DefaultCommonBackgroundStyle()
 {
   return GetWhiteBackgroundStyle();

script/features/draw_graph/model/EdgeContrastStyle.js

@@ -0,0 +1,43 @@
+/**
+ * New Contrast edge styles.
+ */
+
+ function ContrastCommonEdgeStyle()
+{
+  	BaseEdgeStyle.apply(this, arguments);
+
+	this.strokeStyle = '#000000';
+	this.weightText  = '#000000';
+	this.fillStyle   = '#ffffff';
+	this.textPadding = 4;
+	this.textStrokeWidth = 2;
+	this.lineDash = 0;
+	this.additionalTextColor = '#000000';
+	this.weightPosition = WeightTextCenter;
+	this.mainTextFontSize = 16;
+}
+
+ContrastCommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function ContrastSelectedEdgeStyle0()
+{
+	BaseEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#000000';
+	this.weightText  = '#000000';
+	this.fillStyle   = '#ffffff';
+	this.additionalTextColor = '#000000';
+	this.lineDash = 1
+
+  	this.baseStyles.push("common");
+}
+
+ContrastSelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function GetContrastCommonEdgeStyle()
+{
+	return new ContrastCommonEdgeStyle();
+}
+
+var ContrastSelectedEdgeStyles      = [new ContrastSelectedEdgeStyle0(), new ContrastSelectedEdgeStyle0(), 
+	new ContrastSelectedEdgeStyle0(), new ContrastSelectedEdgeStyle0(), new ContrastSelectedEdgeStyle0()];

script/features/draw_graph/model/EdgeNewNightStyle.js

@@ -0,0 +1,95 @@
+/**
+ * New night edge styles.
+ */
+
+ 
+function NightCommonEdgeStyle()
+{
+  	BaseEdgeStyle.apply(this, arguments);
+
+	this.strokeStyle = '#cbd5e1';
+	this.weightText  = '#f8fafc';
+	this.fillStyle   = '#020617';
+	this.textPadding = 4;
+	this.textStrokeWidth = 2;
+	this.lineDash = 0;
+	this.additionalTextColor = '#cbd5e1';
+	this.weightPosition = WeightTextCenter;
+}
+
+NightCommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function NightSelectedEdgeStyle0()
+{
+	BaseEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#fdba74';
+	this.weightText  = '#fff7ed';
+	this.fillStyle   = '#7c2d12';
+	this.additionalTextColor = '#fff7ed';
+
+  	this.baseStyles.push("common");
+}
+
+NightSelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function NightSelectedEdgeStyle1()
+{
+	BaseEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#34d399';
+	this.weightText  = '#ecfdf5';
+	this.fillStyle   = '#064e3b';
+	this.additionalTextColor = '#ecfdf5';
+
+ 	this.baseStyles.push("selected");
+}
+NightSelectedEdgeStyle1.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function NightSelectedEdgeStyle2()
+{
+	BaseEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#a5b4fc';
+	this.weightText  = '#ecfeff';
+	this.fillStyle   = '#312e81';
+	this.additionalTextColor = '#ecfeff';
+
+  	this.baseStyles.push("selected");
+}
+NightSelectedEdgeStyle2.prototype = Object.create(BaseEdgeStyle.prototype);
+
+
+function NightSelectedEdgeStyle3()
+{
+	BaseEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#fca5a5';
+	this.weightText  = '#fef2f2';
+	this.fillStyle   = '#7f1d1d';
+	this.additionalTextColor = '#fef2f2';
+
+ 	this.baseStyles.push("selected");
+}
+NightSelectedEdgeStyle3.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function NightSelectedEdgeStyle4()
+{
+	BaseEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#d4d4d8';
+	this.weightText  = '#fafafa';
+	this.fillStyle   = '#3f3f46';
+	this.additionalTextColor = '#fafafa';
+
+	this.baseStyles.push("selected");
+}
+NightSelectedEdgeStyle4.prototype = Object.create(BaseEdgeStyle.prototype);
+
+function GetNightCommonEdgeStyle()
+{
+	return new NightCommonEdgeStyle();
+}
+
+var NightSelectedEdgeStyles      = [new NightSelectedEdgeStyle0(), new NightSelectedEdgeStyle1(), 
+	new NightSelectedEdgeStyle2(), new NightSelectedEdgeStyle3(), new NightSelectedEdgeStyle4()];

script/features/draw_graph/model/GraphFullStyle.js

@@ -18,8 +18,8 @@ function GraphFullStyle(redrawCallback)
     this.backgroundCommonStyle = DefaultCommonBackgroundStyle();
     this.isBackgroundCommonStyleCustom  = false;
 
-    this.defaultVertexSize = null;
-    this.defaultEdgeWidth = null;
+    this.defaultVertexSize = 30;
+    this.defaultEdgeWidth = 3;
     this.redrawCallback = redrawCallback;
 }
 
@@ -238,6 +238,63 @@ function OldGraphFullStyle()
     this.vertexSelectedVertexStyles = FullArrayCopy(OldSelectedGraphStyles);
 
     this.backgroundCommonStyle = GetWhiteBackgroundStyle();
+
+    this.defaultVertexSize = 30;
+    this.defaultEdgeWidth = 4;
 }
 
-OldGraphFullStyle.prototype = Object.create(GraphFullStyle.prototype);
+OldGraphFullStyle.prototype = Object.create(GraphFullStyle.prototype);
+
+function NightGraphFullStyle()
+{
+    GraphFullStyle.apply(this, arguments);
+
+    this.version = 1;
+    this.edgeCommonStyle         = GetNightCommonEdgeStyle();
+    this.edgeSelectedStyles      = FullArrayCopy(NightSelectedEdgeStyles);
+
+    this.vertexCommonStyle          = GetNightCommonVertexStyle();
+    this.vertexSelectedVertexStyles = FullArrayCopy(NightSelectedGraphStyles);
+
+    this.backgroundCommonStyle = GetNightBackgroundStyle();
+
+    this.defaultVertexSize = 30;
+    this.defaultEdgeWidth = 3;
+
+    this.isEdgeCommonStyleCustom = true;
+    this.isEdgeSelectedStylesCustom = true;
+
+    this.isVertexCommonStyleCustom = true;
+    this.isVertexSelectedVertexStylesCustom = true;
+
+    this.isBackgroundCommonStyleCustom = true;
+}
+
+NightGraphFullStyle.prototype = Object.create(GraphFullStyle.prototype);
+
+function ContrastGraphFullStyle()
+{
+    GraphFullStyle.apply(this, arguments);
+
+    this.version = 1;
+    this.edgeCommonStyle         = GetContrastCommonEdgeStyle();
+    this.edgeSelectedStyles      = FullArrayCopy(ContrastSelectedEdgeStyles);
+
+    this.vertexCommonStyle          = GetContrastCommonVertexStyle();
+    this.vertexSelectedVertexStyles = FullArrayCopy(ContrastSelectedGraphStyles);
+
+    this.backgroundCommonStyle = GetWhiteBackgroundStyle();
+
+    this.defaultVertexSize = 36;
+    this.defaultEdgeWidth = 4;
+
+    this.isEdgeCommonStyleCustom = true;
+    this.isEdgeSelectedStylesCustom = true;
+
+    this.isVertexCommonStyleCustom = true;
+    this.isVertexSelectedVertexStylesCustom = true;
+
+    this.isBackgroundCommonStyleCustom = true;
+}
+
+ContrastGraphFullStyle.prototype = Object.create(GraphFullStyle.prototype);

script/features/draw_graph/model/VertexContrastStyle.js

@@ -0,0 +1,47 @@
+/**
+ * Contrast vertex style.
+ */
+
+// Common style of Graphs.
+function ContrastCommonVertexStyle()
+{
+  BaseVertexStyle.apply(this, arguments);
+
+  this.lineWidth   = 4;
+  this.strokeStyle = '#000000';
+  this.fillStyle   = '#ffffff';
+  this.mainTextColor = '#000000';
+  this.shape       = VertexCircleShape;
+  this.upTextColor = '#000000';
+  this.commonTextPosition = CommonTextCenter;
+  this.mainTextFontSize = 16;
+
+  this.baseStyles = [];
+}
+
+ContrastCommonVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
+
+// Selected style of Graphs.
+
+function ContrastSelectedVertexStyle0()
+{
+	BaseVertexStyle.apply(this, arguments);
+
+	this.strokeStyle = '#000000';
+	this.mainTextColor = '#ffffff';
+	this.fillStyle   = '#000000';
+	this.upTextColor = '#ffffff';
+
+	this.baseStyles.push("common");
+}
+
+ContrastSelectedVertexStyle0.prototype = Object.create(BaseVertexStyle.prototype);
+
+function GetContrastCommonVertexStyle()
+{
+	return new ContrastCommonVertexStyle();
+}
+
+var ContrastSelectedGraphStyles = [new ContrastSelectedVertexStyle0(), new ContrastSelectedVertexStyle0(),
+	new ContrastSelectedVertexStyle0(), new ContrastSelectedVertexStyle0(), new ContrastSelectedVertexStyle0()];
+

script/features/draw_graph/model/VertexNewNightStyle.js

@@ -0,0 +1,103 @@
+/**
+ * Night vertex style.
+ */
+
+
+// Common style of Graphs.
+function NightCommonVertexStyle()
+{
+  BaseVertexStyle.apply(this, arguments);
+
+  this.lineWidth   = 2;
+  this.strokeStyle = '#38bdf8';
+  this.fillStyle   = '#334155';
+  this.mainTextColor = '#e5e7eb';
+  this.shape       = VertexCircleShape;
+  this.upTextColor = '#94a3b8';
+  this.commonTextPosition = CommonTextCenter;
+
+  this.baseStyles = [];
+}
+
+NightCommonVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
+
+// Selected style of Graphs.
+
+function NightSelectedVertexStyle0()
+{
+	BaseVertexStyle.apply(this, arguments);
+
+	this.strokeStyle = '#fdba74';
+	this.mainTextColor = '#fff7ed';
+	this.fillStyle   = '#7c2d12';
+	this.upTextColor = '#fff7ed';
+
+	this.baseStyles.push("common");
+}
+
+NightSelectedVertexStyle0.prototype = Object.create(BaseVertexStyle.prototype);
+
+function NightSelectedVertexStyle1()
+{
+	BaseVertexStyle.apply(this, arguments);
+
+	this.strokeStyle = '#34d399';
+	this.mainTextColor  = '#ecfdf5';
+	this.fillStyle   = '#064e3b';
+	this.upTextColor = '#ecfdf5';
+
+	this.baseStyles.push("selected");
+}
+
+NightSelectedVertexStyle1.prototype = Object.create(BaseVertexStyle.prototype);
+
+function NightSelectedVertexStyle2()
+{
+	BaseVertexStyle.apply(this, arguments);
+
+	this.strokeStyle = '#a5b4fc';
+	this.mainTextColor  = '#ffffff';
+	this.fillStyle   = '#312e81';
+	this.upTextColor = '#ffffff';
+
+	this.baseStyles.push("selected");
+}
+
+NightSelectedVertexStyle2.prototype = Object.create(BaseVertexStyle.prototype);
+
+function NightSelectedVertexStyle3()
+{
+	BaseVertexStyle.apply(this, arguments);
+
+	this.strokeStyle = '#fca5a5';
+	this.mainTextColor  = '#fef2f2';
+	this.fillStyle   = '#7f1d1d';
+	this.upTextColor = '#fef2f2';
+
+	this.baseStyles.push("selected");
+}
+
+NightSelectedVertexStyle3.prototype = Object.create(BaseVertexStyle.prototype);
+
+function NightSelectedVertexStyle4()
+{
+	BaseVertexStyle.apply(this, arguments);
+
+	this.strokeStyle = '#d4d4d8';
+	this.mainTextColor  = '#fafafa';
+	this.fillStyle   = '#3f3f46';
+	this.upTextColor = '#fafafa';
+
+	this.baseStyles.push("selected");
+}
+
+NightSelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype);
+
+function GetNightCommonVertexStyle()
+{
+	return new NightCommonVertexStyle();
+}
+
+var NightSelectedGraphStyles = [new NightSelectedVertexStyle0(), new NightSelectedVertexStyle1(),
+	new NightSelectedVertexStyle2(), new NightSelectedVertexStyle3(), new NightSelectedVertexStyle4()];
+