mirrors/graphonline
1
0
Fork 0
mirror of https://github.com/UnickSoft/graphonline.git synced 2026-02-16 02:30:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor canvas rendering and DPI handling for improved quality and performance

Browse Source
This commit is contained in:
Oleg Sh
2026-01-01 16:16:46 +01:00
parent ea61466fe0
commit e276350318
10 changed files with 133 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
script/features/setup_edge_style/index.js
View File

@@ -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();

27
script/features/setup_vertex_style/index.js
View File

@@ -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();

2
script/pages/create_graph_by_edge_list/api/index.js.cache
View File

@@ -1,4 +1,4 @@
moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=104","/script/shared/point.js?v=104","/script/entities/edge/api/index.js?v=104","/script/entities/edge/model/BaseEdge.js?v=104","/script/entities/edge/model/EdgeModel.js?v=104","/script/entities/vertex/api/index.js?v=104","/script/entities/vertex/model/BaseVertex.js?v=104","/script/entities/vertex/model/VertexModel.js?v=104","/script/entities/graph/model/Graph.js?v=104",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=105","/script/shared/point.js?v=105","/script/entities/edge/api/index.js?v=105","/script/entities/edge/model/BaseEdge.js?v=105","/script/entities/edge/model/EdgeModel.js?v=105","/script/entities/vertex/api/index.js?v=105","/script/entities/vertex/model/BaseVertex.js?v=105","/script/entities/vertex/model/VertexModel.js?v=105","/script/entities/graph/model/Graph.js?v=105",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
{let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
{return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
{return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()

2
script/pages/create_graph_by_incidence_matrix/api/index.js.cache
View File

@@ -1,4 +1,4 @@
moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=104","/script/shared/point.js?v=104","/script/entities/edge/api/index.js?v=104","/script/entities/edge/model/BaseEdge.js?v=104","/script/entities/edge/model/EdgeModel.js?v=104","/script/entities/vertex/api/index.js?v=104","/script/entities/vertex/model/BaseVertex.js?v=104","/script/entities/vertex/model/VertexModel.js?v=104","/script/entities/graph/model/Graph.js?v=104",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=105","/script/shared/point.js?v=105","/script/entities/edge/api/index.js?v=105","/script/entities/edge/model/BaseEdge.js?v=105","/script/entities/edge/model/EdgeModel.js?v=105","/script/entities/vertex/api/index.js?v=105","/script/entities/vertex/model/BaseVertex.js?v=105","/script/entities/vertex/model/VertexModel.js?v=105","/script/entities/graph/model/Graph.js?v=105",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
{let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
{return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
{return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()

2
script/pages/create_graph_by_matrix/api/index.js.cache
View File

@@ -1,4 +1,4 @@
moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=104","/script/shared/point.js?v=104","/script/entities/edge/api/index.js?v=104","/script/entities/edge/model/BaseEdge.js?v=104","/script/entities/edge/model/EdgeModel.js?v=104","/script/entities/vertex/api/index.js?v=104","/script/entities/vertex/model/BaseVertex.js?v=104","/script/entities/vertex/model/VertexModel.js?v=104","/script/entities/graph/model/Graph.js?v=104","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=104","/script/pages/create_graph_by_matrix/model/main.js?v=104",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js"),include("model/createByMatrixMain.js",modulDir),include("model/main.js",modulDir)]);}
moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=105","/script/shared/point.js?v=105","/script/entities/edge/api/index.js?v=105","/script/entities/edge/model/BaseEdge.js?v=105","/script/entities/edge/model/EdgeModel.js?v=105","/script/entities/vertex/api/index.js?v=105","/script/entities/vertex/model/BaseVertex.js?v=105","/script/entities/vertex/model/VertexModel.js?v=105","/script/entities/graph/model/Graph.js?v=105","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=105","/script/pages/create_graph_by_matrix/model/main.js?v=105",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js"),include("model/createByMatrixMain.js",modulDir),include("model/main.js",modulDir)]);}
{let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
{return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
{return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()

33
script/pages/editor/api/index.js.cache
View File

@@ -1,4 +1,4 @@
moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=104","/script/shared/gzip.js?v=104","/script/entities/graph/api/index.js?v=104","/script/shared/point.js?v=104","/script/entities/edge/api/index.js?v=104","/script/entities/edge/model/BaseEdge.js?v=104","/script/entities/edge/model/EdgeModel.js?v=104","/script/entities/vertex/api/index.js?v=104","/script/entities/vertex/model/BaseVertex.js?v=104","/script/entities/vertex/model/VertexModel.js?v=104","/script/entities/graph/model/Graph.js?v=104","/script/features/draw_graph/api/index.js?v=104","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=104","/script/features/draw_graph/model/EdgeStyle.js?v=104","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=104","/script/features/draw_graph/model/VertexShape.js?v=104","/script/features/draw_graph/model/VertexStyle.js?v=104","/script/features/draw_graph/model/BaseVertexDrawer.js?v=104","/script/features/draw_graph/model/GraphFullStyle.js?v=104","/script/features/algorithms/api/index.js?v=104","/script/features/algorithms/model/Algorithms.js?v=104","/script/features/algorithms/model/BaseTraversal.js?v=104","/script/features/base_handler/index.js?v=104","/script/features/default_handler/index.js?v=104","/script/features/add_vertices_handler/index.js?v=104","/script/features/connect_vertices_handler/index.js?v=104","/script/features/delete_objects_handler/index.js?v=104","/script/features/algorithm_handler/index.js?v=104","/script/features/select_auto_save_graph_or_not/index.js?v=104","/script/features/graph_preview/index.js?v=104","/script/features/serialization/api/index.js?v=104","/script/features/serialization/model/GraphMLCreator.js?v=104","/script/features/enum_vertices/EnumVertices.js?v=104","/script/pages/editor/model/texts.js?v=104","/script/pages/editor/model/UndoStack.js?v=104","/script/pages/editor/model/DiskSaveLoad.js?v=104","/script/pages/editor/model/Application.js?v=104","/script/pages/editor/ui/ya_metrika.js?v=104","/script/pages/editor/ui/editor.js?v=104","/script/pages/editor/ui/main.js?v=104",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.min.js"),include("features/group_rename_handler/index.js"),include("features/saved_graph_handler/index.js"),include("features/saved_graph_image_handler/index.js"),include("features/show_adjacency_matrix/index.js"),include("features/show_distance_matrix/index.js"),include("features/show_incidence_matrix/index.js"),include("features/setup_background_style/index.js"),include("features/setup_edge_style/index.js"),include("features/setup_vertex_style/index.js"),]);postLoadPage();}
moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=105","/script/shared/gzip.js?v=105","/script/entities/graph/api/index.js?v=105","/script/shared/point.js?v=105","/script/entities/edge/api/index.js?v=105","/script/entities/edge/model/BaseEdge.js?v=105","/script/entities/edge/model/EdgeModel.js?v=105","/script/entities/vertex/api/index.js?v=105","/script/entities/vertex/model/BaseVertex.js?v=105","/script/entities/vertex/model/VertexModel.js?v=105","/script/entities/graph/model/Graph.js?v=105","/script/features/draw_graph/api/index.js?v=105","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=105","/script/features/draw_graph/model/EdgeStyle.js?v=105","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=105","/script/features/draw_graph/model/VertexShape.js?v=105","/script/features/draw_graph/model/VertexStyle.js?v=105","/script/features/draw_graph/model/BaseVertexDrawer.js?v=105","/script/features/draw_graph/model/GraphFullStyle.js?v=105","/script/features/algorithms/api/index.js?v=105","/script/features/algorithms/model/Algorithms.js?v=105","/script/features/algorithms/model/BaseTraversal.js?v=105","/script/features/base_handler/index.js?v=105","/script/features/default_handler/index.js?v=105","/script/features/add_vertices_handler/index.js?v=105","/script/features/connect_vertices_handler/index.js?v=105","/script/features/delete_objects_handler/index.js?v=105","/script/features/algorithm_handler/index.js?v=105","/script/features/select_auto_save_graph_or_not/index.js?v=105","/script/features/graph_preview/index.js?v=105","/script/features/serialization/api/index.js?v=105","/script/features/serialization/model/GraphMLCreator.js?v=105","/script/features/enum_vertices/EnumVertices.js?v=105","/script/pages/editor/model/texts.js?v=105","/script/pages/editor/model/UndoStack.js?v=105","/script/pages/editor/model/DiskSaveLoad.js?v=105","/script/pages/editor/model/Application.js?v=105","/script/pages/editor/ui/ya_metrika.js?v=105","/script/pages/editor/ui/editor.js?v=105","/script/pages/editor/ui/main.js?v=105",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.min.js"),include("features/group_rename_handler/index.js"),include("features/saved_graph_handler/index.js"),include("features/saved_graph_image_handler/index.js"),include("features/show_adjacency_matrix/index.js"),include("features/show_distance_matrix/index.js"),include("features/show_incidence_matrix/index.js"),include("features/setup_background_style/index.js"),include("features/setup_edge_style/index.js"),include("features/setup_vertex_style/index.js"),]);postLoadPage();}
let modulDir="pages/editor/";doInclude([include("shared/utils.js"),include("shared/gzip.js"),include("entities/graph/api/index.js"),include("features/draw_graph/api/index.js"),include("features/algorithms/api/index.js"),include("features/base_handler/index.js"),include("features/default_handler/index.js"),include("features/add_vertices_handler/index.js"),include("features/connect_vertices_handler/index.js"),include("features/delete_objects_handler/index.js"),include("features/algorithm_handler/index.js"),include("features/select_auto_save_graph_or_not/index.js"),include("features/serialization/api/index.js"),include("features/enum_vertices/EnumVertices.js"),include("model/texts.js",modulDir),include("model/UndoStack.js",modulDir),include("model/DiskSaveLoad.js",modulDir),include("model/Application.js",modulDir),include("ui/ya_metrika.js",modulDir),include("ui/editor.js",modulDir),include("ui/main.js",modulDir)],onloadEditor);}
function gEncodeToHTML(str)
{if(typeof str!=='string')
@@ -12,7 +12,12 @@ function FullArrayCopy(arr)
{var res=[];arr.forEach(function(element){var copyElement=FullObjectCopy(element);res.push(copyElement);});return res;}
function formatString(string,params){return string.replace(/{(\d+)}/g,(match,index)=>{return typeof params[index]!=='undefined'?params[index]:match;});}
Array.prototype.swap=function(x,y){var b=this[x];this[x]=this[y];this[y]=b;return this;}
function InvertColor(hex){hex=hex.replace(/^#/,'');let r=255-parseInt(hex.slice(0,2),16);let g=255-parseInt(hex.slice(2,4),16);let b=255-parseInt(hex.slice(4,6),16);const toHex=(n)=>n.toString(16).padStart(2,'0');return`#${toHex(r)}${toHex(g)}${toHex(b)}`;};async function compress_text_into_zip_base64(str,callback,mode="gzip")
function InvertColor(hex){hex=hex.replace(/^#/,'');let r=255-parseInt(hex.slice(0,2),16);let g=255-parseInt(hex.slice(2,4),16);let b=255-parseInt(hex.slice(4,6),16);const toHex=(n)=>n.toString(16).padStart(2,'0');return`#${toHex(r)}${toHex(g)}${toHex(b)}`;}
function setDPIForCanvas(canvas,width,height){const dpr=window.devicePixelRatio||1;canvas.width=Math.round(width*dpr);canvas.height=Math.round(height*dpr);if(dpr!=1)
{canvas.style.width=Math.round(width)+"px";canvas.style.height=Math.round(height)+"px";}
const ctx=canvas.getContext("2d");ctx.setTransform(dpr,0,0,dpr,0,0);}
function getCanvasLogicWidth(canvas){const dpr=window.devicePixelRatio||1;return canvas.width/dpr;}
function getCanvasLogicHeight(canvas){const dpr=window.devicePixelRatio||1;return canvas.height/dpr;};async function compress_text_into_zip_base64(str,callback,mode="gzip")
{try
{const blobToBase64=blob=>new Promise((resolve,_)=>{const reader=new FileReader();reader.onloadend=()=>resolve(reader.result.split(',')[1]);reader.readAsDataURL(blob);});const byteArray=new TextEncoder().encode(str);const cs=new CompressionStream(mode);const writer=cs.writable.getWriter();writer.write(byteArray);writer.close();return await new Response(cs.readable).blob().then(blobToBase64).then(res=>callback(res));}
catch(err)
@@ -1517,8 +1522,10 @@ DiskSaveLoad.LoadAutoSaveGraphFromDisk=function(graphName,callback)
DiskSaveLoad.RemoveAutoSaveGraphFromDisk=function(graphName,callback)
{$.ajax({type:"GET",url:"/"+SiteDir+"backend/removeGraph.php?name=autosave_"+graphName}).done(callback);}
var globalApplication=null;function Application(document,window,listener)
{this.document=document;this.listener=listener;this.canvas=this.document.getElementById('canvas');this.handler=new DefaultHandler(this);this.savedGraphName="";this.currentEnumVerticesType=new BaseEnumVertices(this,1);this.findPathReport=1;this.isTimerRender=false;globalApplication=this;this.renderPath=[];this.renderTimer=0;this.renderPathLength=0;this.renderPathCounter=0;this.renderPathLoops=0;this.enumVerticesTextList=[new BaseEnumVertices(this,1),new BaseEnumVertices(this,0),new TextEnumVertices(this),new TextEnumVerticesCyr(this),new TextEnumVerticesGreek(this),new TextEnumVerticesCustom(this)];this.SetDefaultTransformations();this.algorithmsValues={};this.undoStack=new UndoStack(this.maxUndoStackSize);this.style=new GraphFullStyle(function()
{this.redrawGraph();}.bind(this));this.edgePrintCommonStyle=new CommonPrintEdgeStyle();this.edgePrintSelectedStyles=FullArrayCopy(DefaultPrintSelectedEdgeStyles);this.vertexPrintCommonStyle=new CommonPrintVertexStyle();this.vertexPrintSelectedVertexStyles=FullArrayCopy(DefaultPrintSelectedGraphStyles);this.backgroundPrintStyle=new PrintBackgroundStyle();this.renderPathWithEdges=false;this.edgePresets=[1,3,5,7,11,42];this.maxEdgePresets=6;this.selectionRect=null;this.processEmscriptenFunction=null;this.defaultEdge=null;this.useDefaultEdge=false;this.lastSavedAutoSave="";this.lastGraphName="";this.lastUsedGraphs=[];};Application.prototype.graph=new Graph();Application.prototype.dragObject=-1;Application.prototype.handler=null;Application.prototype.status={};Application.prototype.graphNameLength=16;Application.prototype.maxUndoStackSize=8;Application.prototype.maxAutosaveSizeForCookie=2000;Application.prototype.autosaveTimeInterval=1000*60;Application.prototype.styliedGraphNamePostfix="ZZcst";Application.prototype.maxLastUsedGraphCount=5;Application.prototype.getMousePos=function(canvas,e)
{this.document=document;this.listener=listener;this.initCanvas();this.handler=new DefaultHandler(this);this.savedGraphName="";this.currentEnumVerticesType=new BaseEnumVertices(this,1);this.findPathReport=1;this.isTimerRender=false;globalApplication=this;this.renderPath=[];this.renderTimer=0;this.renderPathLength=0;this.renderPathCounter=0;this.renderPathLoops=0;this.enumVerticesTextList=[new BaseEnumVertices(this,1),new BaseEnumVertices(this,0),new TextEnumVertices(this),new TextEnumVerticesCyr(this),new TextEnumVerticesGreek(this),new TextEnumVerticesCustom(this)];this.algorithmsValues={};this.undoStack=new UndoStack(this.maxUndoStackSize);this.style=new GraphFullStyle(function()
{this.redrawGraph();}.bind(this));this.edgePrintCommonStyle=new CommonPrintEdgeStyle();this.edgePrintSelectedStyles=FullArrayCopy(DefaultPrintSelectedEdgeStyles);this.vertexPrintCommonStyle=new CommonPrintVertexStyle();this.vertexPrintSelectedVertexStyles=FullArrayCopy(DefaultPrintSelectedGraphStyles);this.backgroundPrintStyle=new PrintBackgroundStyle();this.renderPathWithEdges=false;this.edgePresets=[1,3,5,7,11,42];this.maxEdgePresets=6;this.selectionRect=null;this.processEmscriptenFunction=null;this.defaultEdge=null;this.useDefaultEdge=false;this.lastSavedAutoSave="";this.lastGraphName="";this.lastUsedGraphs=[];};Application.prototype.graph=new Graph();Application.prototype.dragObject=-1;Application.prototype.handler=null;Application.prototype.status={};Application.prototype.graphNameLength=16;Application.prototype.maxUndoStackSize=8;Application.prototype.maxAutosaveSizeForCookie=2000;Application.prototype.autosaveTimeInterval=1000*60;Application.prototype.styliedGraphNamePostfix="ZZcst";Application.prototype.maxLastUsedGraphCount=5;Application.prototype.initCanvas=function()
{this.canvas=this.document.getElementById('canvas');console.log(this.canvas.width,this.canvas.height);console.log(this.canvas.getBoundingClientRect());console.log(window.devicePixelRatio);this.SetDefaultTransformations();}
Application.prototype.getMousePos=function(canvas,e)
{var rect=canvas.getBoundingClientRect();return{x:(e.clientX-rect.left)/this.canvasScale-this.canvasPosition.x,y:(e.clientY-rect.top)/this.canvasScale-this.canvasPosition.y};}
Application.prototype.redrawGraph=function()
{if(!this.isTimerRender)
@@ -1548,12 +1555,14 @@ else
var progress=(this.renderPathCounter-currentLength)/edge.GetPixelLength();this.RedrawEdgeProgress(context,edge,edge.vertex1.id==currentVertexId?progress:1.0-progress);this.renderPathCounter+=movePixelStep;context.restore();}}
if(this.renderPathLoops>=5)
{this.stopRenderTimer();}}
Application.prototype.setupHighQualityRendering=function(context)
{context.imageSmoothingEnabled=false;context.imageSmoothingQuality='high';}
Application.prototype._redrawGraphInWindow=function()
{var context=this.canvas.getContext('2d');context.save();context.scale(this.canvasScale,this.canvasScale);context.translate(this.canvasPosition.x,this.canvasPosition.y);this._RedrawGraph(context,{width:this.canvas.width,height:this.canvas.height,scale:this.canvasScale},this.canvasPosition,this.style.backgroundCommonStyle,true);context.restore();return context;}
{var context=this.canvas.getContext('2d');this.setupHighQualityRendering(context);context.save();context.scale(this.canvasScale,this.canvasScale);context.translate(this.canvasPosition.x,this.canvasPosition.y);this._RedrawGraph(context,{width:getCanvasLogicWidth(this.canvas),height:getCanvasLogicHeight(this.canvas),scale:this.canvasScale},this.canvasPosition,this.style.backgroundCommonStyle,true);context.restore();return context;}
Application.prototype._OffscreenRedrawGraph=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.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:canvas.width,height:canvas.height,scale:1.0},bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return canvas;}
{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');this.setupHighQualityRendering(context);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:canvas.width,height:canvas.height,scale:1.0},bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();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.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:canvas.width,height:canvas.height,scale:1.0},bbox.minPoint.inverse(),this.backgroundPrintStyle,false,this.vertexPrintCommonStyle,this.vertexPrintSelectedVertexStyles,this.edgePrintCommonStyle,this.edgePrintSelectedStyles);context.restore();return canvas;}
{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');this.setupHighQualityRendering(context);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:canvas.width,height:canvas.height,scale:1.0},bbox.minPoint.inverse(),this.backgroundPrintStyle,false,this.vertexPrintCommonStyle,this.vertexPrintSelectedVertexStyles,this.edgePrintCommonStyle,this.edgePrintSelectedStyles);context.restore();return canvas;}
Application.prototype._printToSVG=function()
{var bbox=this.graph.getGraphBBox();var context=new C2S(bbox.size().x,bbox.size().y);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,{width:bbox.size().x,height:bbox.size().y,scale:1.0},bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return context.getSerializedSvg();}
Application.prototype.updateRenderPathLength=function()
@@ -1825,9 +1834,9 @@ Application.prototype.SetFindPathReport=function(value)
Application.prototype.GetFindPathReport=function()
{return this.findPathReport;}
Application.prototype.GetRealWidth=function()
{return this.canvas.width/this.canvasScale;}
{return getCanvasLogicWidth(this.canvas)/this.canvasScale;}
Application.prototype.GetRealHeight=function()
{return this.canvas.height/this.canvasScale;}
{return getCanvasLogicHeight(this.canvas)/this.canvasScale;}
Application.prototype.SetDefaultTransformations=function()
{this.canvasScale=1.0;this.canvasPosition=new Point(0,0);}
Application.prototype.AutoAdjustViewport=function()
@@ -2287,10 +2296,10 @@ Editor.prototype.OnGraphTypeChanged=function(isMulti)
Editor.prototype.updateMessage=function(message)
{$("#message").html(message);}
let DisableEmscripten=false;let PostLoadedCalled=false;let editor=new Editor(document,window);function resizeCanvas()
{var adv=document.getElementById('bottom_info');var canvas=document.getElementById('canvas');canvas.width=document.getElementById('canvasSection').offsetWidth;var mainContainer=document.getElementById('mainContainer');var offset=(mainContainer.offsetTop+mainContainer.offsetHeight)-(canvas.offsetTop+canvas.offsetHeight)+
($("#footerContent").css("display")==='block'?0:24);canvas.height=$(window).height()-document.getElementById('canvas').offsetTop-
{var adv=document.getElementById('bottom_info');var canvas=document.getElementById('canvas');let width_float=document.getElementById('canvasSection').offsetWidth;var mainContainer=document.getElementById('mainContainer');var offset=(mainContainer.offsetTop+mainContainer.offsetHeight)-(canvas.offsetTop+canvas.offsetHeight)+
($("#footerContent").css("display")==='block'?0:24);let height_float=$(window).height()-document.getElementById('canvas').offsetTop-
(adv&&$("#bottom_info").css("display")==='block'?document.getElementById('bottom_info').offsetHeight:0)-
($("#footer").css("display")==='block'?document.getElementById('footer').offsetHeight:0)-offset;editor.redraw();}
($("#footer").css("display")==='block'?document.getElementById('footer').offsetHeight:0)-offset;setDPIForCanvas(canvas,width_float,height_float);editor.redraw();}
function touchHandler(event)
{var touches=event.changedTouches,first=touches[0],type="";switch(event.type)
{case"touchstart":type="mousedown";break;case"touchmove":type="mousemove";break;case"touchend":type="mouseup";break;default:return;}

35
script/pages/editor/model/Application.js
View File

@@ -9,7 +9,8 @@ function Application(document, window, listener)
{
this.document = document;
this.listener = listener;
this.canvas = this.document.getElementById('canvas');
this.initCanvas();
this.handler = new DefaultHandler(this);
this.savedGraphName = "";
this.currentEnumVerticesType = new BaseEnumVertices(this, 1);//this.enumVerticesTextList[0];
@@ -28,7 +29,6 @@ function Application(document, window, listener)
new TextEnumVerticesGreek(this),
new TextEnumVerticesCustom(this)];
this.SetDefaultTransformations();
this.algorithmsValues = {};
this.undoStack = new UndoStack(this.maxUndoStackSize);
@@ -80,6 +80,17 @@ Application.prototype.styliedGraphNamePostfix = "ZZcst";
// Max size of last used graph list. It is saved into cookie and takes about 300 bytes.
Application.prototype.maxLastUsedGraphCount = 5;
Application.prototype.initCanvas = function()
{
this.canvas = this.document.getElementById('canvas');
console.log(this.canvas.width, this.canvas.height);
console.log(this.canvas.getBoundingClientRect());
console.log(window.devicePixelRatio);
this.SetDefaultTransformations();
}
Application.prototype.getMousePos = function(canvas, e)
{
/// getBoundingClientRect is supported in most browsers and gives you
@@ -185,16 +196,24 @@ Application.prototype.redrawGraphTimer = function()
}
}
Application.prototype.setupHighQualityRendering = function(context)
{
context.imageSmoothingEnabled = false; // or false for pixel art
context.imageSmoothingQuality = 'high';
}
Application.prototype._redrawGraphInWindow = function()
{
var context = this.canvas.getContext('2d');
this.setupHighQualityRendering(context);
context.save();
context.scale(this.canvasScale, this.canvasScale);
context.translate(this.canvasPosition.x, this.canvasPosition.y);
this._RedrawGraph(context, {width: this.canvas.width, height: this.canvas.height, scale: this.canvasScale},
this._RedrawGraph(context, {width: getCanvasLogicWidth(this.canvas), height: getCanvasLogicHeight(this.canvas), scale: this.canvasScale},
this.canvasPosition, this.style.backgroundCommonStyle, true);
context.restore();
@@ -209,6 +228,8 @@ Application.prototype._OffscreenRedrawGraph = function()
canvas.width = bbox.size().x;
canvas.height = bbox.size().y;
var context = canvas.getContext('2d');
this.setupHighQualityRendering(context);
context.save();
@@ -229,6 +250,8 @@ Application.prototype._PrintRedrawGraph = function()
canvas.width = bbox.size().x;
canvas.height = bbox.size().y;
var context = canvas.getContext('2d');
this.setupHighQualityRendering(context);
context.save();
@@ -1202,12 +1225,12 @@ Application.prototype.GetFindPathReport = function ()
Application.prototype.GetRealWidth = function ()
{
return this.canvas.width / this.canvasScale;
return getCanvasLogicWidth(this.canvas) / this.canvasScale;
}
Application.prototype.GetRealHeight = function ()
{
return this.canvas.height / this.canvasScale;
return getCanvasLogicHeight(this.canvas) / this.canvasScale;
}
Application.prototype.SetDefaultTransformations = function()

6
script/pages/editor/ui/main.js
View File

@@ -8,15 +8,17 @@ function resizeCanvas()
{
var adv = document.getElementById('bottom_info');
var canvas = document.getElementById('canvas');
canvas.width = document.getElementById('canvasSection').offsetWidth;
let width_float = document.getElementById('canvasSection').offsetWidth;
var mainContainer = document.getElementById('mainContainer');
var offset = (mainContainer.offsetTop + mainContainer.offsetHeight) - (canvas.offsetTop + canvas.offsetHeight) +
($("#footerContent").css("display") === 'block' ? 0 : 24);
canvas.height = $(window).height() - document.getElementById('canvas').offsetTop -
let height_float = $(window).height() - document.getElementById('canvas').offsetTop -
(adv && $("#bottom_info").css("display") === 'block' ? document.getElementById('bottom_info').offsetHeight : 0) -
($("#footer").css("display") === 'block' ? document.getElementById('footer').offsetHeight : 0) - offset;
setDPIForCanvas(canvas, width_float, height_float);
editor.redraw();
}

26
script/shared/utils.js
View File

@@ -69,4 +69,30 @@ function InvertColor(hex) {
const toHex = (n) => n.toString(16).padStart(2, '0');
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
function setDPIForCanvas(canvas, width, height) {
const dpr = window.devicePixelRatio || 1;
canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);
if (dpr != 1)
{
canvas.style.width = Math.round(width) + "px";
canvas.style.height = Math.round(height) + "px";
}
const ctx = canvas.getContext("2d");
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function getCanvasLogicWidth(canvas) {
const dpr = window.devicePixelRatio || 1;
return canvas.width / dpr;
}
function getCanvasLogicHeight(canvas) {
const dpr = window.devicePixelRatio || 1;
return canvas.height / dpr;
}