Merge branch 'master' of https://github.com/UnickSoft/graphonline

lang/en/home.php

@@ -160,4 +160,9 @@
     $g_lang["vertex_draw_style"] = "Vertex Style";
     $g_lang["text_background"]   = "Text background";
     $g_lang["edge_draw_style"]   = "Edge Style";
+
+    $g_lang["color"] = "Color";
+    $g_lang["alpha"] = "Opacity";
+
+    $g_lang["background_style"] = "Background color";
 ?>

lang/ru/home.php

@@ -164,4 +164,8 @@
     $g_lang["text_background"]   = "Фон текста";
     $g_lang["edge_draw_style"]   = "Стиль отрисовки дуги";
 
+    $g_lang["color"] = "Цвет";
+    $g_lang["alpha"] = "Прозрачность";
+
+    $g_lang["background_style"] = "Цвет фона";
 ?>

script/Appilcation.js

@@ -41,6 +41,10 @@ function Application(document, window)
     
     this.vertexPrintCommonStyle          = new CommonPrintVertexStyle(); 
     this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles.slice();
+    
+    this.backgroundCommonStyle = new CommonBackgroundStyle();
+    this.backgroundPrintStyle  = new PrintBackgroundStyle(); 
+    this.isBackgroundCommonStyleCustom  = false;
 };
 
 // List of graph.
@@ -137,10 +141,14 @@ Application.prototype._redrawGraph = function()
     var context = this.canvas.getContext('2d');
     
     context.save();
-    context.clearRect(0, 0, Math.max(this.canvas.width, this.GetRealWidth()), Math.max(this.canvas.height, this.GetRealHeight()));
+    
     context.scale(this.canvasScale, this.canvasScale);
     context.translate(this.canvasPosition.x, this.canvasPosition.y);
     
+    var backgroundDrawer = new BaseBackgroundDrawer(context);
+    
+    backgroundDrawer.Draw(this.backgroundCommonStyle, Math.max(this.canvas.width, this.GetRealWidth()), Math.max(this.canvas.height, this.GetRealHeight()), this.canvasPosition, this.canvasScale);
+    
     this.RedrawEdges(context);
     this.RedrawNodes(context);
     
@@ -158,9 +166,13 @@ Application.prototype._OffscreenRedrawGraph = function()
     var context = canvas.getContext('2d');
     
     context.save();
-    context.clearRect(0, 0, Math.max(this.canvas.width, this.GetRealWidth()), Math.max(this.canvas.height, this.GetRealHeight()));
+
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
+    var backgroundDrawer = new BaseBackgroundDrawer(context);
+    
+    backgroundDrawer.Draw(this.backgroundCommonStyle, Math.max(this.canvas.width, this.GetRealWidth()), Math.max(this.canvas.height, this.GetRealHeight()), bbox.minPoint.inverse(), this.canvasScale);
+    
     this.RedrawEdges(context);
     this.RedrawNodes(context);
     
@@ -179,10 +191,12 @@ Application.prototype._PrintRedrawGraph = function()
     
     context.save();
     
-    context.fillStyle = "white";
-    context.fillRect(0, 0, Math.max(canvas.width, this.GetRealWidth()), Math.max(canvas.height, this.GetRealHeight()));
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
+    var backgroundDrawer = new BaseBackgroundDrawer(context);
+    
+    backgroundDrawer.Draw(this.backgroundPrintStyle, Math.max(this.canvas.width, this.GetRealWidth()), Math.max(this.canvas.height, this.GetRealHeight()), bbox.minPoint.inverse(), this.canvasScale);
+    
     this.RedrawEdges(context, this.edgePrintCommonStyle,   this.edgePrintSelectedStyles);
     this.RedrawNodes(context, this.vertexPrintCommonStyle, this.vertexPrintSelectedVertexStyles);
     
@@ -658,6 +672,11 @@ Application.prototype.SetHandlerMode = function(mode)
 		var setupEdgeStyle = new SetupEdgeStyle(this);
 		setupEdgeStyle.show(1); 
     }
+    else if (mode == "setupBackgroundStyle")
+    {
+		var setupBackgroundStyle = new SetupBackgroundStyle(this);
+		setupBackgroundStyle.show();
+    }
     else if (g_AlgorithmIds.indexOf(mode) >= 0)
     {
         this.handler = new AlgorithmGraphHandler(this, g_Algorithms[g_AlgorithmIds.indexOf(mode)](this.graph, this));
@@ -1305,6 +1324,10 @@ Application.prototype.SaveUserSettings = function()
                      value: this.vertexSelectedVertexStyles,
                      check: this.isVertexSelectedVertexStylesCustom});
     
+    checkValue.push({field: "backgroundCommonStyle",
+                     value: this.backgroundCommonStyle,
+                     check: this.isBackgroundCommonStyleCustom});
+    
     //checkValue.push({field: "vertexPrintCommonStyle",
     //                 value: this.vertexPrintCommonStyle});
 
@@ -1359,6 +1382,10 @@ Application.prototype.LoadUserSettings = function(json)
     //checkValue.push({field: "vertexPrintSelectedVertexStyles",
     //                 value: this.vertexPrintSelectedVertexStyles});
     
+    checkValue.push({field: "backgroundCommonStyle",
+                     value: this.backgroundCommonStyle,
+                     check: "isBackgroundCommonStyleCustom"});
+    
     var decoderStr = this.DecodeFromHTML(json);
     var parsedSave = JSON.parse(decoderStr);
     
@@ -1448,3 +1475,16 @@ Application.prototype.ResetEdgeStyle = function (index)
         this.isEdgeSelectedStylesCustom = false;
     }
 }
+
+Application.prototype.SetBackgroundStyle = function (style)
+{
+    this.backgroundCommonStyle         = style;
+    this.isBackgroundCommonStyleCustom = true;
+}
+
+Application.prototype.ResetBackgroundStyle = function ()
+{
+    this.backgroundCommonStyle         = new CommonBackgroundStyle();
+    this.isBackgroundCommonStyleCustom = false;
+}
+

script/BaseBackgroundDrawer.js

@@ -0,0 +1,38 @@
+/**
+ * Graph drawer.
+ */
+ 
+ 
+function CommonBackgroundStyle()
+{
+	this.commonColor   = '#ffffff';
+	this.commonOpacity = 1.0;
+}
+
+function PrintBackgroundStyle()
+{
+	this.commonColor   = '#ffffff';
+	this.commonOpacity = 1.0;
+}
+
+function BaseBackgroundDrawer(context)
+{   
+  this.context = context;
+}
+
+BaseBackgroundDrawer.prototype.Draw = function(style, width, height, position, scale) 
+{
+    var context = this.context;
+    
+    var rect = new Rect(position, position.add(new Point(width / scale, height / scale)));
+    
+    context.clearRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
+    
+    if (style.commonOpacity > 0.0)
+    {
+        context.globalAlpha = style.commonOpacity;
+        context.fillStyle   = style.commonColor;
+        context.fillRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
+        context.globalAlpha = 1.0;
+    }
+}

script/EventHandlers.js

@@ -1297,3 +1297,87 @@ SetupEdgeStyle.prototype.show = function(index)
     $( "#edgeStrokeColor" ).change(redrawVertex);
     $( "#edgeTextColor" ).change(redrawVertex);
 }
+
+/**
+ * Setup Background Style rename vertices.
+ *
+ */
+function SetupBackgroundStyle(app)
+{
+  BaseHandler.apply(this, arguments);
+  this.message = "";	
+}
+
+// inheritance.
+SetupBackgroundStyle.prototype = Object.create(BaseHandler.prototype);
+
+SetupBackgroundStyle.prototype.show = function()
+{
+	var handler = this;
+	var dialogButtons = {};
+    var graph = this.app.graph;
+    var app   = this.app;
+    var style = Object.assign({}, app.backgroundCommonStyle);
+    
+    var fillFields = function()
+    {
+        $( "#backgroundColor" ).val(style.commonColor);
+        $( "#backgroundTransporent" ).val(style.commonOpacity);
+    }
+    
+    var redrawVertex = function()
+    {
+        style.commonColor     = $( "#backgroundColor" ).val();
+        style.commonOpacity   = $( "#backgroundTransporent" ).val();
+        
+        var canvas  = document.getElementById( "BackgroundPreview" );
+        var context = canvas.getContext('2d');    
+        
+        context.save();
+
+        var backgroundDrawer = new BaseBackgroundDrawer(context);
+        backgroundDrawer.Draw(style, canvas.width, canvas.height, new Point(0, 0), 1.0);
+        
+        context.restore();
+    }
+    
+	dialogButtons[g_default] = 
+           {
+               text    : g_default,
+               class   : "MarginLeft",
+               click   : function() {
+                    app.ResetBackgroundStyle();
+                    app.redrawGraph();
+                    $( this ).dialog( "close" );
+               }
+           };
+    
+	dialogButtons[g_save] = function() {
+                app.SetBackgroundStyle(style);    
+                app.redrawGraph();
+				$( this ).dialog( "close" );
+			};
+	dialogButtons[g_cancel] = function() {
+				$( this ).dialog( "close" );
+			};
+    
+    fillFields();
+        
+	$( "#SetupBackgroundStyleDialog" ).dialog({
+		resizable: false,
+        height: "auto",
+        width:  "auto",
+		modal: true,
+		title: g_backgroundStyle,
+		buttons: dialogButtons,
+		dialogClass: 'EdgeDialog'
+	});
+    
+    redrawVertex();
+
+    $( "#backgroundColor" ).unbind();
+    $( "#backgroundTransporent" ).unbind();
+    
+    $( "#backgroundColor" ).change(redrawVertex);
+    $( "#backgroundTransporent" ).change(redrawVertex);
+}

script/main.js

@@ -432,6 +432,11 @@ function postLoadPage()
         userAction(this.id);
         application.SetHandlerMode("setupEdgeStyleSelected");
     }
+    document.getElementById('SetupBackgroundStyle').onclick = function ()
+    {
+        userAction(this.id);
+        application.SetHandlerMode("setupBackgroundStyle");
+    }
     
     document.getElementById('runUserScript').onclick = function ()
     {

script/merge.php

@@ -11,6 +11,7 @@ file_put_contents($outputFilename, file_get_contents("BaseVertex.js"), FILE_APPE
 file_put_contents($outputFilename, file_get_contents("BaseEdge.js"), FILE_APPEND);
 file_put_contents($outputFilename, file_get_contents("BaseVertexDrawer.js"), FILE_APPEND);
 file_put_contents($outputFilename, file_get_contents("BaseEdgeDrawer.js"), FILE_APPEND);
+file_put_contents($outputFilename, file_get_contents("BaseBackgroundDrawer.js"), FILE_APPEND);
 file_put_contents($outputFilename, file_get_contents("Algorithms.js"), FILE_APPEND);
 file_put_contents($outputFilename, file_get_contents("EventHandlers.js"), FILE_APPEND);
 file_put_contents($outputFilename, file_get_contents("GraphMLCreater.js"), FILE_APPEND);

script/texts.js

@@ -102,6 +102,7 @@ var g_Undo           = "Undo";
 var g_default        = "default";
 var g_vertexDraw     = "Vertex draw style";
 var g_edgeDraw       = "Edge draw style";
+var g_backgroundStyle = "Bacgkround style";
 
 function loadTexts()
 {
@@ -205,4 +206,6 @@ function loadTexts()
     g_default    = document.getElementById("default").innerHTML;
     g_vertexDraw = document.getElementById("vertexDrawStyle").innerHTML;
     g_edgeDraw   = document.getElementById("edgeDrawStyle").innerHTML;
+    
+    g_backgroundStyle = document.getElementById("backgroundStyle").innerHTML;
 }

tpl/home.php

@@ -10,7 +10,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/example.js?v=19")?>" ></script>
+        <script src="<?= Root("script/example.js?v=20")?>" ></script>
     </head>
 <!--
 <div class="pull-right">
@@ -129,6 +129,8 @@
                  <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>
+                 <li class="divider"></li>
+                 <li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupBackgroundStyle"><?= L('background_style') ?></button> </li>
           </ul>
         </div>
 
@@ -427,6 +429,27 @@
         
         <canvas id="EdgePreview" width="300" height="150"></canvas>
     </div>
+        
+    <div id="SetupBackgroundStyleDialog">
+        <form>
+		<fieldset>
+          <div class="form-group row">
+            <label for="bacgkroundColor" class="col-sm-5 col-form-label"><?= L('color') ?></label>
+            <div class="col-sm-5">
+              <input type="color" class="form-control" id="backgroundColor" value="#FFAA22">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="backgroundTransporent" class="col-sm-5 col-form-label"><?= L('alpha') ?></label>
+            <div class="col-sm-5">
+              <input type="range" min="0" max="1" step="0.1" id="backgroundTransporent">
+            </div>
+          </div>
+        </fieldset>
+        </form>
+        
+        <canvas id="BackgroundPreview" 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>
@@ -526,6 +549,8 @@
     <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>
+    <p id="backgroundStyle" class="translation"><?= L('background_style')?></p>
+        
 
 </section>
 <!--