diff --git a/core/config/main.php b/core/config/main.php index aec6e24..c307964 100755 --- a/core/config/main.php +++ b/core/config/main.php @@ -94,5 +94,5 @@ $g_config['vote'] = "./tmp/vote/vote.txt"; $g_config['voteTopics'] = "./tmp/vote/voteTopics.txt_"; $g_config['use_js_cache'] = true; - $g_config['engine_version'] = 104; + $g_config['engine_version'] = 105; ?> diff --git a/script/features/setup_edge_style/index.js b/script/features/setup_edge_style/index.js index 7d64767..b3761ce 100644 --- a/script/features/setup_edge_style/index.js +++ b/script/features/setup_edge_style/index.js @@ -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(); diff --git a/script/features/setup_vertex_style/index.js b/script/features/setup_vertex_style/index.js index dccd658..abc33b4 100644 --- a/script/features/setup_vertex_style/index.js +++ b/script/features/setup_vertex_style/index.js @@ -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(); diff --git a/script/pages/create_graph_by_edge_list/api/index.js.cache b/script/pages/create_graph_by_edge_list/api/index.js.cache index 6a0de0e..51276c1 100644 --- a/script/pages/create_graph_by_edge_list/api/index.js.cache +++ b/script/pages/create_graph_by_edge_list/api/index.js.cache @@ -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() diff --git a/script/pages/create_graph_by_incidence_matrix/api/index.js.cache b/script/pages/create_graph_by_incidence_matrix/api/index.js.cache index 6fc2caf..83d6c32 100644 --- a/script/pages/create_graph_by_incidence_matrix/api/index.js.cache +++ b/script/pages/create_graph_by_incidence_matrix/api/index.js.cache @@ -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() diff --git a/script/pages/create_graph_by_matrix/api/index.js.cache b/script/pages/create_graph_by_matrix/api/index.js.cache index 6cc65fd..8e5ed72 100644 --- a/script/pages/create_graph_by_matrix/api/index.js.cache +++ b/script/pages/create_graph_by_matrix/api/index.js.cache @@ -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() diff --git a/script/pages/editor/api/index.js.cache b/script/pages/editor/api/index.js.cache index 3a2d253..8e416ca 100644 --- a/script/pages/editor/api/index.js.cache +++ b/script/pages/editor/api/index.js.cache @@ -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;} diff --git a/script/pages/editor/model/Application.js b/script/pages/editor/model/Application.js index c28c089..f915475 100644 --- a/script/pages/editor/model/Application.js +++ b/script/pages/editor/model/Application.js @@ -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() diff --git a/script/pages/editor/ui/main.js b/script/pages/editor/ui/main.js index 359df87..b5e32b9 100644 --- a/script/pages/editor/ui/main.js +++ b/script/pages/editor/ui/main.js @@ -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(); } diff --git a/script/shared/utils.js b/script/shared/utils.js index 3acd91e..897096d 100644 --- a/script/shared/utils.js +++ b/script/shared/utils.js @@ -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; } \ No newline at end of file