From 290306e9246251859b13d4c607715d62158eb212 Mon Sep 17 00:00:00 2001 From: Unick Soft Date: Sat, 7 Sep 2019 22:36:18 +0200 Subject: [PATCH] Added setup dialog for background. --- lang/en/home.php | 5 ++ lang/ru/home.php | 4 ++ script/Appilcation.js | 48 +++++++++++++++++-- script/BaseBackgroundDrawer.js | 38 +++++++++++++++ script/EventHandlers.js | 84 ++++++++++++++++++++++++++++++++++ script/main.js | 5 ++ script/merge.php | 1 + script/texts.js | 3 ++ tpl/home.php | 27 ++++++++++- 9 files changed, 210 insertions(+), 5 deletions(-) create mode 100644 script/BaseBackgroundDrawer.js diff --git a/lang/en/home.php b/lang/en/home.php index b0f3d77..0e5d2d7 100755 --- a/lang/en/home.php +++ b/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"; ?> diff --git a/lang/ru/home.php b/lang/ru/home.php index 057170f..02dbcd0 100755 --- a/lang/ru/home.php +++ b/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"] = "Цвет фона"; ?> diff --git a/script/Appilcation.js b/script/Appilcation.js index 1021f51..50aeedd 100644 --- a/script/Appilcation.js +++ b/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; +} + diff --git a/script/BaseBackgroundDrawer.js b/script/BaseBackgroundDrawer.js new file mode 100644 index 0000000..8177b8b --- /dev/null +++ b/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; + } +} diff --git a/script/EventHandlers.js b/script/EventHandlers.js index 6762452..b774aab 100644 --- a/script/EventHandlers.js +++ b/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); +} diff --git a/script/main.js b/script/main.js index ef08620..b564b15 100644 --- a/script/main.js +++ b/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 () { diff --git a/script/merge.php b/script/merge.php index 65a7f35..5fbec94 100644 --- a/script/merge.php +++ b/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); diff --git a/script/texts.js b/script/texts.js index 9200d18..b921593 100644 --- a/script/texts.js +++ b/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; } diff --git a/tpl/home.php b/tpl/home.php index e0450ee..632f1a5 100755 --- a/tpl/home.php +++ b/tpl/home.php @@ -10,7 +10,7 @@ - +