mirror of
https://github.com/UnickSoft/graphonline.git
synced 2026-02-16 10:40:57 +00:00
Refactor canvas rendering and DPI handling for improved quality and performance
This commit is contained in:
@@ -9,12 +9,27 @@ doInclude ([
|
||||
function SetupEdgeStyle(app)
|
||||
{
|
||||
BaseHandler.apply(this, arguments);
|
||||
this.message = "";
|
||||
this.message = "";
|
||||
this.hdr_called = false;
|
||||
}
|
||||
|
||||
// inheritance.
|
||||
SetupEdgeStyle.prototype = Object.create(BaseHandler.prototype);
|
||||
|
||||
SetupEdgeStyle.prototype.apply_dpr = function(canvas)
|
||||
{
|
||||
if (this.hdr_called)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
|
||||
setDPIForCanvas(canvas, rect.width, rect.height);
|
||||
|
||||
this.hdr_called = true;
|
||||
}
|
||||
|
||||
SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
{
|
||||
var handler = this;
|
||||
@@ -126,13 +141,15 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.save();
|
||||
|
||||
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
app.setupHighQualityRendering(context);
|
||||
var backgroundDrawer = new BaseBackgroundDrawer(context);
|
||||
backgroundDrawer.Draw(app.style.backgroundCommonStyle, canvas.width, canvas.height, new Point(0, 0), 1.0);
|
||||
|
||||
var graphDrawer = new BaseEdgeDrawer(context);
|
||||
var baseVertex1 = new BaseVertex(0, canvas.height / 2, new BaseEnumVertices(this));
|
||||
var baseVertex2 = new BaseVertex(canvas.width, canvas.height / 2, new BaseEnumVertices(this));
|
||||
var baseVertex1 = new BaseVertex(0, canvas.height / 2 / dpr, new BaseEnumVertices(this));
|
||||
var baseVertex2 = new BaseVertex(canvas.width / dpr, canvas.height / 2 / dpr, new BaseEnumVertices(this));
|
||||
|
||||
baseVertex1.currentStyle = baseVertex1.getStyleFor(0);
|
||||
baseVertex2.currentStyle = baseVertex2.getStyleFor(0);
|
||||
@@ -274,7 +291,10 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
|
||||
modal: true,
|
||||
title: g_edgeDraw,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
dialogClass: 'EdgeDialog',
|
||||
open: function(event, ui) {
|
||||
handler.apply_dpr(document.getElementById( "EdgePreview" ));
|
||||
}
|
||||
});
|
||||
|
||||
redrawVertex();
|
||||
|
||||
@@ -9,12 +9,27 @@ doInclude ([
|
||||
function SetupVertexStyle(app)
|
||||
{
|
||||
BaseHandler.apply(this, arguments);
|
||||
this.message = "";
|
||||
this.message = "";
|
||||
this.hdr_called = false;
|
||||
}
|
||||
|
||||
// inheritance.
|
||||
SetupVertexStyle.prototype = Object.create(BaseHandler.prototype);
|
||||
|
||||
SetupVertexStyle.prototype.apply_dpr = function(canvas)
|
||||
{
|
||||
if (this.hdr_called)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
|
||||
setDPIForCanvas(canvas, rect.width, rect.height);
|
||||
|
||||
this.hdr_called = true;
|
||||
}
|
||||
|
||||
SetupVertexStyle.prototype.show = function(index, selectedVertices)
|
||||
{
|
||||
var handler = this;
|
||||
@@ -131,11 +146,14 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
|
||||
|
||||
context.save();
|
||||
|
||||
app.setupHighQualityRendering(context);
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
|
||||
var backgroundDrawer = new BaseBackgroundDrawer(context);
|
||||
backgroundDrawer.Draw(app.style.backgroundCommonStyle, canvas.width, canvas.height, new Point(0, 0), 1.0);
|
||||
|
||||
var graphDrawer = new BaseVertexDrawer(context);
|
||||
var baseVertex = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
|
||||
var baseVertex = new BaseVertex(canvas.width / 2 / dpr, canvas.height / 2 / dpr, new BaseEnumVertices(this));
|
||||
baseVertex.mainText = "1";
|
||||
baseVertex.upText = "Up Text";
|
||||
baseVertex.model.diameter = diameter;
|
||||
@@ -276,7 +294,10 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
|
||||
modal: true,
|
||||
title: g_vertexDraw,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
dialogClass: 'EdgeDialog',
|
||||
open: function(event, ui) {
|
||||
handler.apply_dpr(document.getElementById( "VertexPreview" ));
|
||||
}
|
||||
});
|
||||
|
||||
redrawVertex();
|
||||
|
||||
Reference in New Issue
Block a user