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

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;}