mirror of
https://github.com/UnickSoft/graphonline.git
synced 2025-07-03 08:15:38 +00:00
Added printed version of graph image.
This commit is contained in:
Unick Soft
parent
479282d0c1
commit
bec33619c9
@ -57,8 +57,9 @@
|
||||
$g_lang["wrong_matrix_title"] = "Matrix has wrong format";
|
||||
$g_lang["bad_adj_matrix_message"] = "Cannot create graph. Adjacency Matrix has wrong format. Click \"fix matrix\" button to fix matrix or \"help\" button to open help about Adjacency Matrix format";
|
||||
$g_lang["bad_inc_matrix_message"] = "Cannot create graph. Incidence Matrix has wrong format. Click \"fix matrix\" button to fix matrix or \"help\" button to open help about Incidence Matrix format";
|
||||
$g_lang["save_image"] = "Save workspace image";
|
||||
$g_lang["save_full_image"] = "Save full graph image";
|
||||
$g_lang["save_image"] = "Workspace screenshot";
|
||||
$g_lang["save_full_image"] = "Save graph image";
|
||||
$g_lang["save_print_image"] = "Printed image of graph (black&white)";
|
||||
$g_lang["open_saved_image_browser"] = "Open image in browser";
|
||||
$g_lang["download_saved_image"] = "Download saved image";
|
||||
$g_lang["save_image_dialog_title"] = "Save Graph Image";
|
||||
|
||||
@ -57,8 +57,9 @@
|
||||
$g_lang["wrong_matrix_title"] = "Матрица имеет неправильный формат";
|
||||
$g_lang["bad_adj_matrix_message"] = "Ошибка создания графа. Матрица смежности имеет неправильный формат. Нажимте кнопку \"исправить матрицу\" чтобы исправить матрицу или кнопку \"справка\" чтобы открыть справку о формате матрицы";
|
||||
$g_lang["bad_inc_matrix_message"] = "Ошибка создания графа. Матрица инцидентности имеет неправильный формат. Нажимте кнопку \"исправить матрицу\" чтобы исправить матрицу или кнопку \"справка\" чтобы открыть справку о формате матрицы";
|
||||
$g_lang["save_image"] = "Сохранить изображение рабочей области";
|
||||
$g_lang["save_full_image"] = "Сохранить изображение всего графа";
|
||||
$g_lang["save_image"] = "Снимок рабочей области";
|
||||
$g_lang["save_full_image"] = "Сохранить изображение графа";
|
||||
$g_lang["save_print_image"] = "Изображение графа для печати (ч\б)";
|
||||
$g_lang["open_saved_image_browser"] = "Открыть изображение в браузере";
|
||||
$g_lang["download_saved_image"] = "Скачать сохранённое изображение";
|
||||
$g_lang["save_image_dialog_title"] = "Сохранение изображения графа";
|
||||
|
||||
@ -25,6 +25,18 @@ function Application(document, window)
|
||||
this.algorithmsValues = {};
|
||||
this.userAction = function(){};
|
||||
this.undoStack = [];
|
||||
|
||||
this.edgeCommonStyle = new CommonEdgeStyle();
|
||||
this.edgeSelectedStyles = DefaultSelectedEdgeStyles;
|
||||
|
||||
this.edgePrintCommonStyle = new CommonPrintEdgeStyle();
|
||||
this.edgePrintSelectedStyles = DefaultPrintSelectedEdgeStyles;
|
||||
|
||||
this.vertexCommonStyle = new CommonVertexStyle();
|
||||
this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles;
|
||||
|
||||
this.vertexPrintCommonStyle = new CommonPrintVertexStyle();
|
||||
this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles;
|
||||
};
|
||||
|
||||
// List of graph.
|
||||
@ -153,6 +165,28 @@ Application.prototype._OffscreenRedrawGraph = function()
|
||||
return canvas;
|
||||
}
|
||||
|
||||
Application.prototype._PrintRedrawGraph = function()
|
||||
{
|
||||
var bbox = this.graph.getGraphBBox();
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = bbox.size().x;
|
||||
canvas.height = bbox.size().y;
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
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);
|
||||
|
||||
this.RedrawEdges(context, this.edgePrintCommonStyle, this.edgePrintSelectedStyles);
|
||||
this.RedrawNodes(context, this.vertexPrintCommonStyle, this.vertexPrintSelectedVertexStyles);
|
||||
|
||||
context.restore();
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
Application.prototype.updateRenderPathLength = function()
|
||||
{
|
||||
this.renderPathLength = 0;
|
||||
@ -221,15 +255,15 @@ Application.prototype.GetBaseArcDrawer = function(context, edge)
|
||||
return arcDrawer;
|
||||
}
|
||||
|
||||
Application.prototype.RedrawEdge = function(context, edge)
|
||||
Application.prototype.RedrawEdge = function(context, edge, ForceCommonStyle, ForceSelectedStyle)
|
||||
{
|
||||
var curvedArcDrawer = new CurvedArcDrawer(context, edge.model)
|
||||
var arcDrawer = this.GetBaseArcDrawer(context, edge);
|
||||
|
||||
var commonStyle = new CommonEdgeStyle(context);
|
||||
var selectedStyles = selectedEdgeStyles;
|
||||
var commonStyle = (ForceCommonStyle === undefined) ? this.edgeCommonStyle : ForceCommonStyle;
|
||||
var selectedStyle = (ForceSelectedStyle === undefined) ? this.edgeSelectedStyles : ForceSelectedStyle;
|
||||
|
||||
this._RedrawEdge(edge, arcDrawer, commonStyle, selectedStyles);
|
||||
this._RedrawEdge(edge, arcDrawer, commonStyle, selectedStyle);
|
||||
}
|
||||
|
||||
Application.prototype._RedrawEdge = function(edge, arcDrawer, commonStyle, selectedStyles)
|
||||
@ -250,39 +284,34 @@ Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
|
||||
{
|
||||
var progressDraw = new ProgressArcDrawer(context, this.GetBaseArcDrawer(context, edge), progress);
|
||||
var arcDrawer = new BaseEdgeDrawer(context, {drawObject : progressDraw});
|
||||
var commonStyle = new CommonEdgeStyle(context);
|
||||
var selectedStyles = selectedEdgeStyles;
|
||||
|
||||
this._RedrawEdge(edge, arcDrawer, commonStyle, selectedStyles);
|
||||
this._RedrawEdge(edge, arcDrawer, this.edgeCommonStyle, this.edgeSelectedStyles);
|
||||
}
|
||||
|
||||
Application.prototype.RedrawEdges = function(context)
|
||||
Application.prototype.RedrawEdges = function(context, ForceCommonStyle, ForceSelectedStyle)
|
||||
{
|
||||
for (i = 0; i < this.graph.edges.length; i ++)
|
||||
{
|
||||
this.RedrawEdge(context, this.graph.edges[i]);
|
||||
this.RedrawEdge(context, this.graph.edges[i], ForceCommonStyle, ForceSelectedStyle);
|
||||
}
|
||||
}
|
||||
|
||||
Application.prototype.RedrawNodes = function(context)
|
||||
Application.prototype.RedrawNodes = function(context, ForceCommonStyle, ForceSelectedStyle)
|
||||
{
|
||||
var graphDrawer = new BaseVertexDrawer(context);
|
||||
var commonGraphDrawer = new CommonVertexStyle();
|
||||
var selectedGraphDrawer = selectedGraphStyles;
|
||||
var graphDrawer = new BaseVertexDrawer(context);
|
||||
var commonStyle = (ForceCommonStyle === undefined) ? this.vertexCommonStyle : ForceCommonStyle;
|
||||
var selectedStyle = (ForceSelectedStyle === undefined) ? this.vertexSelectedVertexStyles : ForceSelectedStyle;
|
||||
|
||||
for (i = 0; i < this.graph.vertices.length; i ++)
|
||||
{
|
||||
var selectedGroup = this.handler.GetSelectedGroup(this.graph.vertices[i]);
|
||||
var currentStyle = selectedGroup > 0 ?
|
||||
selectedGraphDrawer[(selectedGroup - 1) % selectedGraphDrawer.length] : commonGraphDrawer;
|
||||
|
||||
//this.graph.vertices[i].upText = this.handler.GetUpText(this.graph.vertices[i]);
|
||||
selectedStyle[(selectedGroup - 1) % selectedStyle.length] : commonStyle;
|
||||
|
||||
graphDrawer.Draw(this.graph.vertices[i], currentStyle);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Application.prototype.updateMessage = function()
|
||||
{
|
||||
this.document.getElementById('message').innerHTML = this.handler.GetMessage();
|
||||
@ -590,12 +619,17 @@ Application.prototype.SetHandlerMode = function(mode)
|
||||
else if (mode == "saveDialogImage")
|
||||
{
|
||||
var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
|
||||
savedDialogGraphImageHandler.show();
|
||||
savedDialogGraphImageHandler.showWorkspace();
|
||||
}
|
||||
else if (mode == "saveDialogFullImage")
|
||||
{
|
||||
var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
|
||||
savedDialogGraphImageHandler.show(null, true);
|
||||
savedDialogGraphImageHandler.showFullgraph();
|
||||
}
|
||||
else if (mode == "savePrintGraphImage")
|
||||
{
|
||||
var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
|
||||
savedDialogGraphImageHandler.showPrint();
|
||||
}
|
||||
else if (mode == "eulerianLoop")
|
||||
{
|
||||
@ -903,12 +937,12 @@ Application.prototype.SaveGraphImageOnDisk = function (showDialogCallback)
|
||||
return imageName;
|
||||
}
|
||||
|
||||
Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback)
|
||||
Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback, forPrint)
|
||||
{
|
||||
var imageName = this.GetNewGraphName();
|
||||
|
||||
this.stopRenderTimer();
|
||||
var canvas = this._OffscreenRedrawGraph();
|
||||
var canvas = forPrint ? this._PrintRedrawGraph() : this._OffscreenRedrawGraph();
|
||||
|
||||
var bbox = this.graph.getGraphBBox();
|
||||
|
||||
@ -932,9 +966,6 @@ Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback)
|
||||
return imageName;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Application.prototype.LoadGraphFromString = function (str)
|
||||
{
|
||||
var graph = new Graph();
|
||||
|
||||
@ -14,6 +14,17 @@ function CommonEdgeStyle()
|
||||
this.loopShiftAngel = Math.PI / 6;
|
||||
}
|
||||
|
||||
function CommonPrintEdgeStyle()
|
||||
{
|
||||
this.strokeStyle = '#000000';
|
||||
this.weightText = '#000000';
|
||||
this.fillStyle = '#FFFFFF';
|
||||
this.textPadding = 4;
|
||||
this.textStrockeWidth = 2;
|
||||
this.sizeOfLoop = 24;
|
||||
this.loopShiftAngel = Math.PI / 6;
|
||||
}
|
||||
|
||||
function SelectedEdgeStyle0()
|
||||
{
|
||||
CommonEdgeStyle.apply(this, arguments);
|
||||
@ -24,17 +35,6 @@ function SelectedEdgeStyle0()
|
||||
}
|
||||
SelectedEdgeStyle0.prototype = Object.create(CommonEdgeStyle.prototype);
|
||||
|
||||
function ProgressEdgeStyle()
|
||||
{
|
||||
CommonEdgeStyle.apply(this, arguments);
|
||||
|
||||
var selectedStyle = new SelectedEdgeStyle0();
|
||||
this.strokeStyle = selectedStyle.fillStyle;
|
||||
this.weightText = '#000000';
|
||||
this.fillStyle = '#000000';
|
||||
}
|
||||
ProgressEdgeStyle.prototype = Object.create(CommonEdgeStyle.prototype);
|
||||
|
||||
function SelectedEdgeStyle1()
|
||||
{
|
||||
CommonEdgeStyle.apply(this, arguments);
|
||||
@ -78,9 +78,20 @@ function SelectedEdgeStyle4()
|
||||
}
|
||||
SelectedEdgeStyle4.prototype = Object.create(CommonEdgeStyle.prototype);
|
||||
|
||||
var selectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(),
|
||||
function SelectedEdgePrintStyle()
|
||||
{
|
||||
CommonEdgeStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#AAAAAA';
|
||||
this.weightText = '#000000';
|
||||
this.fillStyle = '#AAAAAA';
|
||||
}
|
||||
SelectedEdgeStyle0.prototype = Object.create(CommonEdgeStyle.prototype);
|
||||
|
||||
var DefaultSelectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(),
|
||||
new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];
|
||||
|
||||
var DefaultPrintSelectedEdgeStyles = [new SelectedEdgePrintStyle()];
|
||||
|
||||
function BaseEdgeDrawer(context, drawObjects)
|
||||
{
|
||||
@ -299,8 +310,6 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
|
||||
{
|
||||
this.baseDrawer.Draw(baseEdge, arcStyle);
|
||||
|
||||
this.SetupStyle(baseEdge, new ProgressEdgeStyle());
|
||||
|
||||
this.context.lineWidth = 10;
|
||||
|
||||
var positions = baseEdge.GetEdgePositionsShift();
|
||||
|
||||
@ -11,6 +11,14 @@ function CommonVertexStyle()
|
||||
this.mainTextColor = '#f0d543';
|
||||
}
|
||||
|
||||
function CommonPrintVertexStyle()
|
||||
{
|
||||
this.lineWidth = 1;
|
||||
this.strokeStyle = '#000000';
|
||||
this.fillStyle = '#FFFFFF';
|
||||
this.mainTextColor = '#000000';
|
||||
}
|
||||
|
||||
// Selected style of Graphs.
|
||||
function SelectedVertexStyle0()
|
||||
{
|
||||
@ -122,9 +130,22 @@ function SelectedVertexStyle9()
|
||||
|
||||
SelectedVertexStyle9.prototype = Object.create(CommonVertexStyle.prototype);
|
||||
|
||||
var selectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
|
||||
function SelectedPrintVertexStyle()
|
||||
{
|
||||
CommonVertexStyle.apply(this, arguments);
|
||||
|
||||
this.strokeStyle = '#000000';
|
||||
this.mainTextColor = '#000000';
|
||||
this.fillStyle = '#AAAAAA';
|
||||
}
|
||||
|
||||
SelectedPrintVertexStyle.prototype = Object.create(CommonVertexStyle.prototype);
|
||||
|
||||
var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
|
||||
new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4(), new SelectedVertexStyle5(), new SelectedVertexStyle6(), new SelectedVertexStyle7(), new SelectedVertexStyle8(), new SelectedVertexStyle9()];
|
||||
|
||||
var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()];
|
||||
|
||||
function BaseVertexDrawer(context)
|
||||
{
|
||||
this.context = context;
|
||||
|
||||
@ -844,6 +844,7 @@ function SavedDialogGraphImageHandler(app)
|
||||
{
|
||||
BaseHandler.apply(this, arguments);
|
||||
this.message = "";
|
||||
this.imageName = "";
|
||||
}
|
||||
|
||||
// inheritance.
|
||||
@ -855,47 +856,66 @@ SavedDialogGraphImageHandler.prototype.pathObjects = null;
|
||||
// Objects.
|
||||
SavedDialogGraphImageHandler.prototype.objects = null;
|
||||
|
||||
SavedDialogGraphImageHandler.prototype.show = function(object, isFull)
|
||||
SavedDialogGraphImageHandler.prototype.showDialogCallback = function ()
|
||||
{
|
||||
if (isFull === undefined)
|
||||
{
|
||||
isFull = false;
|
||||
}
|
||||
var dialogButtons = {};
|
||||
|
||||
var showDialogCallback = function ()
|
||||
{
|
||||
var dialogButtons = {};
|
||||
dialogButtons[g_close] = function() {
|
||||
$( this ).dialog( "close" );
|
||||
};
|
||||
|
||||
dialogButtons[g_close] = function() {
|
||||
$( this ).dialog( "close" );
|
||||
};
|
||||
var fileLocation = "tmp/saved/" + this.imageName.substr(0, 2) + "/"+ this.imageName + ".png"
|
||||
|
||||
var fileLocation = "tmp/saved/" + imageName.substr(0, 2) + "/"+ imageName + ".png"
|
||||
document.getElementById("showSavedImageGraph").src = "/" + fileLocation;
|
||||
document.getElementById("showSavedImageGraphRef").href = "/" + fileLocation;
|
||||
//document.getElementById("showSavedImageGraph").src = document.getElementById("showSavedImageGraph").src.replace(/tmp\/saved\/([A-Za-z]*)\/([A-Za-z]*).png/g, fileLocation);
|
||||
document.getElementById("ShareSavedImageGraph").innerHTML =
|
||||
document.getElementById("ShareSavedImageGraph").innerHTML.replace(/tmp\/saved\/([A-Za-z]*)\/([A-Za-z]*).png/g, fileLocation);
|
||||
|
||||
document.getElementById("showSavedImageGraph").src = "/" + fileLocation;
|
||||
document.getElementById("showSavedImageGraphRef").href = "/" + fileLocation;
|
||||
//document.getElementById("showSavedImageGraph").src = document.getElementById("showSavedImageGraph").src.replace(/tmp\/saved\/([A-Za-z]*)\/([A-Za-z]*).png/g, fileLocation);
|
||||
document.getElementById("ShareSavedImageGraph").innerHTML =
|
||||
document.getElementById("ShareSavedImageGraph").innerHTML.replace(/tmp\/saved\/([A-Za-z]*)\/([A-Za-z]*).png/g, fileLocation);
|
||||
document.getElementById("SaveImageLinks").innerHTML =
|
||||
document.getElementById("SaveImageLinks").innerHTML.replace(/tmp\/saved\/([A-Za-z]*)\/([A-Za-z]*).png/g, fileLocation);
|
||||
|
||||
document.getElementById("SaveImageLinks").innerHTML =
|
||||
document.getElementById("SaveImageLinks").innerHTML.replace(/tmp\/saved\/([A-Za-z]*)\/([A-Za-z]*).png/g, fileLocation);
|
||||
$( "#saveImageDialog" ).dialog({
|
||||
resizable: false,
|
||||
height: "auto",
|
||||
width: "auto",
|
||||
modal: true,
|
||||
title: g_save_image_dialog,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
});
|
||||
|
||||
$( "#saveImageDialog" ).dialog({
|
||||
resizable: false,
|
||||
height: "auto",
|
||||
width: "auto",
|
||||
modal: true,
|
||||
title: g_save_image_dialog,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var imageName = isFull ? this.app.SaveFullGraphImageOnDisk(showDialogCallback) : this.app.SaveGraphImageOnDisk(showDialogCallback);
|
||||
}
|
||||
|
||||
SavedDialogGraphImageHandler.prototype.showWorkspace = function()
|
||||
{
|
||||
var object = this;
|
||||
var callback = function() {
|
||||
object.showDialogCallback();
|
||||
};
|
||||
|
||||
this.imageName = this.app.SaveGraphImageOnDisk(callback);
|
||||
}
|
||||
|
||||
SavedDialogGraphImageHandler.prototype.showFullgraph = function()
|
||||
{
|
||||
var object = this;
|
||||
var callback = function() {
|
||||
object.showDialogCallback();
|
||||
};
|
||||
|
||||
this.imageName = this.app.SaveFullGraphImageOnDisk(callback, false);
|
||||
}
|
||||
|
||||
SavedDialogGraphImageHandler.prototype.showPrint = function()
|
||||
{
|
||||
var object = this;
|
||||
var callback = function() {
|
||||
object.showDialogCallback();
|
||||
};
|
||||
|
||||
this.imageName = this.app.SaveFullGraphImageOnDisk(callback, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Algorithm Graph handler.
|
||||
|
||||
@ -360,6 +360,12 @@ function postLoadPage()
|
||||
application.SetHandlerMode("saveDialogFullImage");
|
||||
}
|
||||
|
||||
document.getElementById('SavePrintGraphImage').onclick = function ()
|
||||
{
|
||||
userAction(this.id);
|
||||
application.SetHandlerMode("savePrintGraphImage");
|
||||
}
|
||||
|
||||
document.getElementById('Zoom100').onclick = function ()
|
||||
{
|
||||
userAction(this.id);
|
||||
|
||||
10
tpl/home.php
10
tpl/home.php
@ -41,12 +41,16 @@
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveGraph"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save')?></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveGraphImage"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save_image')?></button>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveFullGraphImage"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save_full_image')?></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveGraphImage"><span class="glyphicon glyphicon-camera fa-fw"></span> <?= L('save_image')?></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-sm btn-submenu" id="SavePrintGraphImage"><span class="glyphicon glyphicon-print fa-fw"></span> <?= L('save_print_image')?></button>
|
||||
</li>
|
||||
<li class="divider hidden-phone"></li>
|
||||
<li class="hidden-phone">
|
||||
<button type="button" class="btn btn-default btn-sm btn-submenu" id="ExportGraph"><span class="glyphicon glyphicon-download fa-fw"></span> <?= L('export_graph')?></button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user