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

Added test size settings for vertices and edges.

Browse Source
This commit is contained in:
Oleg Sh
2024-07-15 22:11:38 +02:00
parent b7b14e16e8
commit dac4f9bcb8
31 changed files with 703 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
script/features/draw_graph/api/index.js
View File

@@ -3,7 +3,10 @@ let modulDir = "features/draw_graph/";
doInclude ([
include ("model/BaseBackgroundDrawer.js", modulDir),
include ("model/EdgeStyle.js", modulDir),
include ("model/BaseEdgeDrawer.js", modulDir),
include ("model/VertexShape.js", modulDir),
include ("model/VertexStyle.js", modulDir),
include ("model/BaseVertexDrawer.js", modulDir)
])

201
script/features/draw_graph/model/BaseEdgeDrawer.js
View File

@@ -1,187 +1,7 @@
/**
* Graph drawer.
*/
const lineDashTypes = [
[],
[4, 4],
[12, 12],
[16, 4, 4, 4],
];
// Common text position
const WeightTextCenter = 0,
WeightTextUp = 1;
function BaseEdgeStyle()
{
this.baseStyles = [];
}
BaseEdgeStyle.prototype.GetStyle = function (baseStyle, object)
{
this.baseStyles.forEach(function(element) {
var styleObject = globalApplication.GetStyle("edge", element, object);
baseStyle = styleObject.GetStyle(baseStyle, object);
});
if (this.hasOwnProperty('weightText'))
baseStyle.weightText = this.weightText;
if (this.hasOwnProperty('strokeStyle'))
baseStyle.strokeStyle = this.strokeStyle;
if (this.hasOwnProperty('fillStyle'))
baseStyle.fillStyle = this.fillStyle;
if (this.hasOwnProperty('textPadding'))
baseStyle.textPadding = this.textPadding;
if (this.hasOwnProperty('textStrokeWidth'))
baseStyle.textStrokeWidth = this.textStrokeWidth;
if (this.hasOwnProperty('lineDash'))
baseStyle.lineDash = this.lineDash;
if (this.hasOwnProperty('additionalTextColor'))
baseStyle.additionalTextColor = this.additionalTextColor;
if (this.hasOwnProperty('weightPosition'))
baseStyle.weightPosition = this.weightPosition;
return this.FixNewFields(baseStyle);
}
BaseEdgeStyle.prototype.FixNewFields = function (style)
{
if (!style.hasOwnProperty('lineDash'))
style.lineDash = 0;
if (!style.hasOwnProperty('weightPosition'))
style.weightPosition = WeightTextCenter;
return style;
}
BaseEdgeStyle.prototype.Clear = function ()
{
delete this.weightText;
delete this.strokeStyle;
delete this.fillStyle;
delete this.textPadding;
delete this.textStrokeWidth;
delete this.lineDash;
delete this.additionalTextColor;
delete this.weightPosition;
}
BaseEdgeStyle.prototype.ShouldLoad = function (field)
{
return field != "baseStyles";
}
function CommonEdgeStyle()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#c7b7c7';
this.weightText = '#f0d543';
this.fillStyle = '#68aeba';
this.textPadding = 4;
this.textStrokeWidth = 2;
this.lineDash = 0;
this.additionalTextColor = '#c7b7c7';
this.weightPosition = WeightTextCenter;
}
CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
function CommonPrintEdgeStyle()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.weightText = '#000000';
this.fillStyle = '#FFFFFF';
this.textPadding = 4;
this.textStrokeWidth = 2;
this.baseStyles.push("common");
}
CommonPrintEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle0()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#f0d543';
this.weightText = '#f0d543';
this.fillStyle = '#c7627a';
this.baseStyles.push("common");
}
SelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle1()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#8FBF83';
this.weightText = '#8FBF83';
this.fillStyle = '#F9F9D5';
this.baseStyles.push("selected");
}
SelectedEdgeStyle1.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle2()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#8C4C86';
this.weightText = '#8C4C86';
this.fillStyle = '#253267';
this.baseStyles.push("selected");
}
SelectedEdgeStyle2.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle3()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#6188FF';
this.weightText = '#6188FF';
this.fillStyle = '#E97CF9';
this.baseStyles.push("selected");
}
SelectedEdgeStyle3.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle4()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#C6B484';
this.weightText = '#C6B484';
this.fillStyle = '#E0DEE1';
this.baseStyles.push("selected");
}
SelectedEdgeStyle4.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgePrintStyle()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#AAAAAA';
this.weightText = '#000000';
this.fillStyle = '#AAAAAA';
this.baseStyles.push("printed");
}
SelectedEdgePrintStyle.prototype = Object.create(BaseEdgeStyle.prototype);
var DefaultSelectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(),
new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];
var DefaultPrintSelectedEdgeStyles = [new SelectedEdgePrintStyle()];
// Test graph: http://localhost:8080/?graph=IEktYqMyJaYYyLufZZcst_test
function BaseEdgeDrawer(context, drawObjects)
{
@@ -277,19 +97,22 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
if (baseEdge.GetUpText().length > 0)
{
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor, baseEdge.model.width / 2 + 20, null);
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor,
baseEdge.model.width / 2 + arcStyle.mainTextFontSize + 4, arcStyle.mainTextFontSize);
}
}
else if (arcStyle.weightPosition == WeightTextUp)
{
if (baseEdge.GetText().length > 0)
{
this.DrawUpText(positions[0], positions[1], baseEdge.GetText(), arcStyle, false, arcStyle.weightText, baseEdge.model.width / 2 + 10, "16px");
this.DrawUpText(positions[0], positions[1], baseEdge.GetText(), arcStyle, false, arcStyle.weightText,
baseEdge.model.width / 2 + arcStyle.mainTextFontSize / 2, arcStyle.mainTextFontSize);
}
if (baseEdge.GetUpText().length > 0)
{
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor, - baseEdge.model.width / 2 - 15, null);
this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor,
- baseEdge.model.width / 2 - (arcStyle.mainTextFontSize / 2 + 4), arcStyle.mainTextFontSize);
}
}
}
@@ -334,7 +157,7 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
{
var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
this.context.font = "bold 16px sans-serif";
this.context.font = "bold " + arcStyle.mainTextFontSize + "px sans-serif";
this.context.textBaseline = "middle";
this.context.lineWidth = arcStyle.textStrokeWidth;
this.context.fillStyle = arcStyle.fillStyle;
@@ -343,8 +166,8 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
this.context.beginPath();
this.context.rect(centerPoint.x - widthText / 2 - arcStyle.textPadding / 2,
centerPoint.y - 8 - arcStyle.textPadding / 2,
widthText + arcStyle.textPadding, 16 + arcStyle.textPadding);
centerPoint.y - arcStyle.mainTextFontSize / 1.7 - arcStyle.textPadding / 2,
widthText + arcStyle.textPadding, arcStyle.mainTextFontSize + arcStyle.textPadding);
this.context.closePath();
this.context.fill();
this.context.stroke ();
@@ -357,7 +180,9 @@ BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcSt
{
var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
this.context.font = fontSize == null ? "bold 12px sans-serif" : "bold " + fontSize + " sans-serif";
this.context.font = fontSize == null ? "bold " + (DefaultMainTextFontSizeEdge + TopTextFontSizeDeltaEdge) +
"px sans-serif" : "bold " + (fontSize + TopTextFontSizeDeltaEdge) +
"px sans-serif";
this.context.textBaseline = "middle";
var widthText = this.context.measureText(text).width;

350
script/features/draw_graph/model/BaseVertexDrawer.js
View File

@@ -2,332 +2,7 @@
* Graph drawer.
*/
// Test graph: http://localhost:8080/?graph=oimDPgsdgiAjWGBHZZcst
// Vertex shape
const VertexCircleShape = 0,
VertexSquareShape = 1,
VertexTriangleShape = 2,
VertexPentagonShape = 3,
VertexHomeShape = 4,
VertexTextboxShape = 5;
VertexSnowflakeShape = 6;
// Common text position
const CommonTextCenter = 0,
CommonTextUp = 1;
// Fonts
const DefaultFont = "px sans-serif",
MainTextFontSize = 16,
TopTextFontSize = 12.0;
function GetSquarePoints(diameter)
{
var res = [];
var a = diameter;
res.push(new Point(-a / 2, - a / 2));
res.push(new Point(a / 2, -a / 2));
res.push(new Point(a / 2, a / 2));
res.push(new Point(-a / 2, a / 2));
return res;
}
function GetTrianglePoints(diameter)
{
var res = [];
var effectiveDiameter = diameter * 1.5;
var upOffset = effectiveDiameter / 2;
var downOffset = effectiveDiameter / 4;
var lrOffset = effectiveDiameter * 3 / (Math.sqrt(3) * 4);
res.push(new Point(0, - upOffset));
res.push(new Point(lrOffset, downOffset));
res.push(new Point(- lrOffset, downOffset));
return res;
}
function GetPentagonPoints(diameter)
{
var res = [];
var baseValue = diameter / 2 * 1.2;
res.push(new Point(0, - baseValue));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 2));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 3));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 4));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 5));
return res;
}
function GetTextboxPoints(diameter, text)
{
var res = [];
var width = diameter;
var height = diameter;
if (text)
{
var tempContext = document.createElement('canvas').getContext('2d');
tempContext.font = "bold " + MainTextFontSize + DefaultFont;
width = tempContext.measureText(text).width + diameter / 2;
}
res.push(new Point(-width / 2, -height / 2));
res.push(new Point(width / 2, -height / 2));
res.push(new Point(width / 2, height / 2));
res.push(new Point(-width / 2, height / 2));
return res;
}
function GetShowflakePoints(diameter)
{
var res = [];
var superSmallRadius = diameter * 0.8 / 2;
var smallRadius = diameter * 0.95 / 2;
var bigRadius = diameter * 1.5 / 2;
let angel = 8;
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), - angel));
res.push(new Point(smallRadius, 0));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60 + 60 + 60 + 60));
return res;
}
function GetPointsForShape(shape, diameter, text=null)
{
switch (parseInt(shape))
{
case VertexSquareShape: return GetSquarePoints(diameter); break;
case VertexTriangleShape: return GetTrianglePoints(diameter); break;
case VertexPentagonShape: return GetPentagonPoints(diameter); break;
case VertexTextboxShape: return GetTextboxPoints(diameter, text); break;
case VertexSnowflakeShape: return GetShowflakePoints(diameter); break;
default: return null; break;
}
}
function GetSizeForShape(shape, diameter)
{
switch (parseInt(shape))
{
case VertexSquareShape: return diameter; break;
case VertexTriangleShape: return diameter * 1.5; break;
case VertexPentagonShape: return diameter * 1.2; break;
case VertexTextboxShape: return diameter; break;
case VertexSnowflakeShape: return diameter * 1.5; break;
default: return diameter; break;
}
}
function BaseVertexStyle()
{
this.baseStyles = [];
}
BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
{
this.baseStyles.forEach(function(element) {
var styleObject = globalApplication.GetStyle("vertex", element, object);
baseStyle = styleObject.GetStyle(baseStyle, object);
});
if (this.hasOwnProperty('lineWidth'))
baseStyle.lineWidth = this.lineWidth;
if (this.hasOwnProperty('strokeStyle'))
baseStyle.strokeStyle = this.strokeStyle;
if (this.hasOwnProperty('fillStyle'))
baseStyle.fillStyle = this.fillStyle;
if (this.hasOwnProperty('mainTextColor'))
baseStyle.mainTextColor = this.mainTextColor;
if (this.hasOwnProperty('shape'))
baseStyle.shape = this.shape;
if (this.hasOwnProperty('upTextColor'))
baseStyle.upTextColor = this.upTextColor;
if (this.hasOwnProperty('commonTextPosition'))
baseStyle.commonTextPosition = this.commonTextPosition;
baseStyle.lineWidth = parseInt(baseStyle.lineWidth);
return this.FixNewFields(baseStyle);
}
BaseVertexStyle.prototype.FixNewFields = function (style)
{
if (!style.hasOwnProperty('shape'))
style.shape = VertexCircleShape;
if (!style.hasOwnProperty('commonTextPosition'))
style.commonTextPosition = CommonTextCenter;
return style;
}
BaseVertexStyle.prototype.Clear = function ()
{
delete this.lineWidth;
delete this.strokeStyle;
delete this.fillStyle;
delete this.mainTextColor;
delete this.shape;
delete this.upTextColor;
delete this.commonTextPosition;
delete this.lineWidth;
}
BaseVertexStyle.prototype.ShouldLoad = function (field)
{
return field != "baseStyles";
}
// Common style of Graphs.
function CommonVertexStyle()
{
BaseVertexStyle.apply(this, arguments);
this.lineWidth = 2;
this.strokeStyle = '#c7b7c7';
this.fillStyle = '#68aeba';
this.mainTextColor = '#f0d543';
this.shape = VertexCircleShape;
this.upTextColor = '#68aeba';
this.commonTextPosition = CommonTextCenter;
this.baseStyles = [];
}
CommonVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
function CommonPrintVertexStyle()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.fillStyle = '#FFFFFF';
this.mainTextColor = '#000000';
this.baseStyles.push("common");
}
CommonPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
// Selected style of Graphs.
function SelectedVertexStyle0()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#f0d543';
this.mainTextColor = '#f0d543';
this.fillStyle = '#c7627a';
this.baseStyles.push("common");
}
SelectedVertexStyle0.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle1()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#7a9ba0';
this.mainTextColor = '#c3d2d5';
this.fillStyle = '#534641';
this.baseStyles.push("selected");
}
SelectedVertexStyle1.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle2()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#8C4C86';
this.mainTextColor = '#dbbdd8';
this.fillStyle = '#253267';
this.baseStyles.push("selected");
}
SelectedVertexStyle2.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle3()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#6188FF';
this.mainTextColor = '#6188FF';
this.fillStyle = '#E97CF9';
this.baseStyles.push("selected");
}
SelectedVertexStyle3.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle4()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#C6B484';
this.mainTextColor = '#C6B484';
this.fillStyle = '#E0DEE1';
this.baseStyles.push("selected");
}
SelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedPrintVertexStyle()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.mainTextColor = '#000000';
this.fillStyle = '#AAAAAA';
this.baseStyles.push("printed");
}
SelectedPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4()];
var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()];
// Test graph: http://localhost/?graph=IEktYqMyJaYYyLufZZcst_test
function BaseVertexDrawer(context)
{
@@ -349,18 +24,21 @@ BaseVertexDrawer.prototype.Draw = function(baseGraph, graphStyle)
if (graphStyle.commonTextPosition == CommonTextCenter)
{
this.DrawCenterText(baseGraph.position, baseGraph.mainText, graphStyle.mainTextColor,
graphStyle.fillStyle, true, true, MainTextFontSize);
graphStyle.fillStyle, true, true, graphStyle.mainTextFontSize);
// Top text
this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - 9.0)), baseGraph.upText,
graphStyle.upTextColor, graphStyle.strokeStyle, false, false, TopTextFontSize);
this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - graphStyle.mainTextFontSize / 2.2)), baseGraph.upText,
graphStyle.upTextColor, graphStyle.strokeStyle, false, false,
graphStyle.mainTextFontSize + TopTextFontSizeDelta);
}
else if (graphStyle.commonTextPosition == CommonTextUp)
{
this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - 7.0)), baseGraph.mainText,
graphStyle.mainTextColor, graphStyle.fillStyle, true, false, MainTextFontSize);
this.DrawCenterText(baseGraph.position.add(new Point(0, - shapeSize / 2.0 - graphStyle.mainTextFontSize / 2.2)), baseGraph.mainText,
graphStyle.mainTextColor, graphStyle.fillStyle, true, false,
graphStyle.mainTextFontSize);
// Top text
this.DrawCenterText(baseGraph.position.add(new Point(0, shapeSize / 2.0 + 9.0)), baseGraph.upText,
graphStyle.upTextColor, graphStyle.strokeStyle, false, false, TopTextFontSize);
this.DrawCenterText(baseGraph.position.add(new Point(0, shapeSize / 2.0 + graphStyle.mainTextFontSize / 1.7)), baseGraph.upText,
graphStyle.upTextColor, graphStyle.strokeStyle, false, false,
graphStyle.mainTextFontSize + TopTextFontSizeDelta);
}
/*
// Bottom text
@@ -386,7 +64,8 @@ BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
}
else
{
var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter, baseGraph.mainText);
var points = GetPointsForShape(this.currentStyle.shape, baseGraph.model.diameter,
{style: this.currentStyle, text: baseGraph.mainText});
this.context.moveTo(baseGraph.position.x + points[points.length - 1].x, baseGraph.position.y + points[points.length - 1].y);
@@ -418,7 +97,8 @@ BaseVertexDrawer.prototype.DrawText = function(position, text, color, outlineCol
this.context.fillText(text, position.x, position.y);
}
BaseVertexDrawer.prototype.DrawCenterText = function(position, text, color, outlineColor, bold, outline, size)
BaseVertexDrawer.prototype.DrawCenterText = function(position, text,
color, outlineColor, bold, outline, size)
{
this.context.textBaseline="middle";
this.context.font = (bold ? "bold " : "") + size + DefaultFont;

195
script/features/draw_graph/model/EdgeStyle.js Normal file
View File

@@ -0,0 +1,195 @@
/**
* Graph drawer.
*/
const lineDashTypes = [
[],
[4, 4],
[12, 12],
[16, 4, 4, 4],
];
// Common text position
const WeightTextCenter = 0,
WeightTextUp = 1;
// Fonts
const DefaultFontEdge = "px sans-serif",
DefaultMainTextFontSizeEdge = 16,
TopTextFontSizeDeltaEdge = -4; // 4 less then main.
function BaseEdgeStyle()
{
this.baseStyles = [];
}
BaseEdgeStyle.prototype.GetStyle = function (baseStyle, object)
{
this.baseStyles.forEach(function(element) {
var styleObject = globalApplication.GetStyle("edge", element, object);
baseStyle = styleObject.GetStyle(baseStyle, object);
});
if (this.hasOwnProperty('weightText'))
baseStyle.weightText = this.weightText;
if (this.hasOwnProperty('strokeStyle'))
baseStyle.strokeStyle = this.strokeStyle;
if (this.hasOwnProperty('fillStyle'))
baseStyle.fillStyle = this.fillStyle;
if (this.hasOwnProperty('textPadding'))
baseStyle.textPadding = this.textPadding;
if (this.hasOwnProperty('textStrokeWidth'))
baseStyle.textStrokeWidth = this.textStrokeWidth;
if (this.hasOwnProperty('lineDash'))
baseStyle.lineDash = this.lineDash;
if (this.hasOwnProperty('additionalTextColor'))
baseStyle.additionalTextColor = this.additionalTextColor;
if (this.hasOwnProperty('weightPosition'))
baseStyle.weightPosition = this.weightPosition;
if (this.hasOwnProperty('mainTextFontSize'))
baseStyle.mainTextFontSize = this.mainTextFontSize;
return this.FixNewFields(baseStyle);
}
BaseEdgeStyle.prototype.FixNewFields = function (style)
{
if (!style.hasOwnProperty('lineDash'))
style.lineDash = 0;
if (!style.hasOwnProperty('weightPosition'))
style.weightPosition = WeightTextCenter;
if (!style.hasOwnProperty('mainTextFontSize'))
style.mainTextFontSize = DefaultMainTextFontSizeEdge;
return style;
}
BaseEdgeStyle.prototype.Clear = function ()
{
delete this.weightText;
delete this.strokeStyle;
delete this.fillStyle;
delete this.textPadding;
delete this.textStrokeWidth;
delete this.lineDash;
delete this.additionalTextColor;
delete this.weightPosition;
delete this.mainTextFontSize;
}
BaseEdgeStyle.prototype.ShouldLoad = function (field)
{
return field != "baseStyles";
}
function CommonEdgeStyle()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#c7b7c7';
this.weightText = '#f0d543';
this.fillStyle = '#68aeba';
this.textPadding = 4;
this.textStrokeWidth = 2;
this.lineDash = 0;
this.additionalTextColor = '#c7b7c7';
this.weightPosition = WeightTextCenter;
}
CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
function CommonPrintEdgeStyle()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.weightText = '#000000';
this.fillStyle = '#FFFFFF';
this.textPadding = 4;
this.textStrokeWidth = 2;
this.baseStyles.push("common");
}
CommonPrintEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle0()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#f0d543';
this.weightText = '#f0d543';
this.fillStyle = '#c7627a';
this.baseStyles.push("common");
}
SelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle1()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#8FBF83';
this.weightText = '#8FBF83';
this.fillStyle = '#F9F9D5';
this.baseStyles.push("selected");
}
SelectedEdgeStyle1.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle2()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#8C4C86';
this.weightText = '#8C4C86';
this.fillStyle = '#253267';
this.baseStyles.push("selected");
}
SelectedEdgeStyle2.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle3()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#6188FF';
this.weightText = '#6188FF';
this.fillStyle = '#E97CF9';
this.baseStyles.push("selected");
}
SelectedEdgeStyle3.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgeStyle4()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#C6B484';
this.weightText = '#C6B484';
this.fillStyle = '#E0DEE1';
this.baseStyles.push("selected");
}
SelectedEdgeStyle4.prototype = Object.create(BaseEdgeStyle.prototype);
function SelectedEdgePrintStyle()
{
BaseEdgeStyle.apply(this, arguments);
this.strokeStyle = '#AAAAAA';
this.weightText = '#000000';
this.fillStyle = '#AAAAAA';
this.baseStyles.push("printed");
}
SelectedEdgePrintStyle.prototype = Object.create(BaseEdgeStyle.prototype);
var DefaultSelectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(),
new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];
var DefaultPrintSelectedEdgeStyles = [new SelectedEdgePrintStyle()];

147
script/features/draw_graph/model/VertexShape.js Normal file
View File

@@ -0,0 +1,147 @@
/**
* Graph drawer.
*/
// Vertex shape
const VertexCircleShape = 0,
VertexSquareShape = 1,
VertexTriangleShape = 2,
VertexPentagonShape = 3,
VertexHomeShape = 4,
VertexTextboxShape = 5;
VertexSnowflakeShape = 6;
function GetSquarePoints(diameter)
{
var res = [];
var a = diameter;
res.push(new Point(-a / 2, - a / 2));
res.push(new Point(a / 2, -a / 2));
res.push(new Point(a / 2, a / 2));
res.push(new Point(-a / 2, a / 2));
return res;
}
function GetTrianglePoints(diameter)
{
var res = [];
var effectiveDiameter = diameter * 1.5;
var upOffset = effectiveDiameter / 2;
var downOffset = effectiveDiameter / 4;
var lrOffset = effectiveDiameter * 3 / (Math.sqrt(3) * 4);
res.push(new Point(0, - upOffset));
res.push(new Point(lrOffset, downOffset));
res.push(new Point(- lrOffset, downOffset));
return res;
}
function GetPentagonPoints(diameter)
{
var res = [];
var baseValue = diameter / 2 * 1.2;
res.push(new Point(0, - baseValue));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 2));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 3));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 4));
res.push((new Point(0, - baseValue)).rotate(new Point(0, 0), 72 * 5));
return res;
}
function GetTextboxPoints(diameter, additional_data)
{
var res = [];
var width = diameter;
var height = diameter;
if (additional_data)
{
var tempContext = document.createElement('canvas').getContext('2d');
tempContext.font = "bold " + additional_data.style.mainTextFontSize +
DefaultFont;
let metrics = tempContext.measureText(additional_data.text);
width = metrics.width + diameter / 2;
let actualHeight = metrics.actualBoundingBoxAscent * 1.6;
height = Math.max(height, actualHeight);
}
res.push(new Point(-width / 2, -height / 2));
res.push(new Point(width / 2, -height / 2));
res.push(new Point(width / 2, height / 2));
res.push(new Point(-width / 2, height / 2));
return res;
}
function GetShowflakePoints(diameter)
{
var res = [];
var superSmallRadius = diameter * 0.8 / 2;
var smallRadius = diameter * 0.95 / 2;
var bigRadius = diameter * 1.5 / 2;
let angel = 8;
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), - angel));
res.push(new Point(smallRadius, 0));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + 60 - angel));
res.push(new Point(smallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + 60));
res.push(new Point(superSmallRadius, 0).rotate(new Point(0, 0), 60 + 60 + 60 + 60 + 60 + angel));
res.push(new Point(bigRadius, 0).rotate(new Point(0, 0), 30 + 60 + 60 + 60 + 60 + 60));
return res;
}
function GetPointsForShape(shape, diameter, additional_data=null)
{
switch (parseInt(shape))
{
case VertexSquareShape: return GetSquarePoints(diameter); break;
case VertexTriangleShape: return GetTrianglePoints(diameter); break;
case VertexPentagonShape: return GetPentagonPoints(diameter); break;
case VertexTextboxShape: return GetTextboxPoints(diameter, additional_data); break;
case VertexSnowflakeShape: return GetShowflakePoints(diameter); break;
default: return null; break;
}
}
function GetSizeForShape(shape, diameter)
{
switch (parseInt(shape))
{
case VertexSquareShape: return diameter; break;
case VertexTriangleShape: return diameter * 1.5; break;
case VertexPentagonShape: return diameter * 1.2; break;
case VertexTextboxShape: return diameter; break;
case VertexSnowflakeShape: return diameter * 1.5; break;
default: return diameter; break;
}
}

195
script/features/draw_graph/model/VertexStyle.js Normal file
View File

@@ -0,0 +1,195 @@
/**
* Graph drawer.
*/
// Common text position
const CommonTextCenter = 0,
CommonTextUp = 1;
// Fonts
const DefaultFont = "px sans-serif",
DefaultMainTextFontSize = 16,
TopTextFontSizeDelta = -4; // 4 less then main.
function BaseVertexStyle()
{
this.baseStyles = [];
}
BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
{
this.baseStyles.forEach(function(element) {
var styleObject = globalApplication.GetStyle("vertex", element, object);
baseStyle = styleObject.GetStyle(baseStyle, object);
});
if (this.hasOwnProperty('lineWidth'))
baseStyle.lineWidth = this.lineWidth;
if (this.hasOwnProperty('strokeStyle'))
baseStyle.strokeStyle = this.strokeStyle;
if (this.hasOwnProperty('fillStyle'))
baseStyle.fillStyle = this.fillStyle;
if (this.hasOwnProperty('mainTextColor'))
baseStyle.mainTextColor = this.mainTextColor;
if (this.hasOwnProperty('shape'))
baseStyle.shape = this.shape;
if (this.hasOwnProperty('upTextColor'))
baseStyle.upTextColor = this.upTextColor;
if (this.hasOwnProperty('commonTextPosition'))
baseStyle.commonTextPosition = this.commonTextPosition;
if (this.hasOwnProperty('mainTextFontSize'))
baseStyle.mainTextFontSize = this.mainTextFontSize;
baseStyle.lineWidth = parseInt(baseStyle.lineWidth);
return this.FixNewFields(baseStyle);
}
BaseVertexStyle.prototype.FixNewFields = function (style)
{
if (!style.hasOwnProperty('shape'))
style.shape = VertexCircleShape;
if (!style.hasOwnProperty('commonTextPosition'))
style.commonTextPosition = CommonTextCenter;
if (!style.hasOwnProperty('mainTextFontSize'))
style.mainTextFontSize = DefaultMainTextFontSize;
return style;
}
BaseVertexStyle.prototype.Clear = function ()
{
delete this.lineWidth;
delete this.strokeStyle;
delete this.fillStyle;
delete this.mainTextColor;
delete this.shape;
delete this.upTextColor;
delete this.commonTextPosition;
delete this.lineWidth;
delete this.mainTextFontSize;
}
BaseVertexStyle.prototype.ShouldLoad = function (field)
{
return field != "baseStyles";
}
// Common style of Graphs.
function CommonVertexStyle()
{
BaseVertexStyle.apply(this, arguments);
this.lineWidth = 2;
this.strokeStyle = '#c7b7c7';
this.fillStyle = '#68aeba';
this.mainTextColor = '#f0d543';
this.shape = VertexCircleShape;
this.upTextColor = '#68aeba';
this.commonTextPosition = CommonTextCenter;
this.baseStyles = [];
}
CommonVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
function CommonPrintVertexStyle()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.fillStyle = '#FFFFFF';
this.mainTextColor = '#000000';
this.baseStyles.push("common");
}
CommonPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
// Selected style of Graphs.
function SelectedVertexStyle0()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#f0d543';
this.mainTextColor = '#f0d543';
this.fillStyle = '#c7627a';
this.baseStyles.push("common");
}
SelectedVertexStyle0.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle1()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#7a9ba0';
this.mainTextColor = '#c3d2d5';
this.fillStyle = '#534641';
this.baseStyles.push("selected");
}
SelectedVertexStyle1.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle2()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#8C4C86';
this.mainTextColor = '#dbbdd8';
this.fillStyle = '#253267';
this.baseStyles.push("selected");
}
SelectedVertexStyle2.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle3()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#6188FF';
this.mainTextColor = '#6188FF';
this.fillStyle = '#E97CF9';
this.baseStyles.push("selected");
}
SelectedVertexStyle3.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedVertexStyle4()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#C6B484';
this.mainTextColor = '#C6B484';
this.fillStyle = '#E0DEE1';
this.baseStyles.push("selected");
}
SelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype);
function SelectedPrintVertexStyle()
{
BaseVertexStyle.apply(this, arguments);
this.strokeStyle = '#000000';
this.mainTextColor = '#000000';
this.fillStyle = '#AAAAAA';
this.baseStyles.push("printed");
}
SelectedPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4()];
var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()];

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

@@ -51,6 +51,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
$( "#weightEdgeTextColor" ).val(fullStyle.additionalTextColor);
$( "#weightTextPosition" ).val(fullStyle.weightPosition);
$( "#edgeTextSize" ).val(fullStyle.mainTextFontSize);
if (self.index > 0 || self.index == "all")
{
@@ -116,6 +117,9 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
if (fullStyle.weightPosition != $( "#weightTextPosition" ).val())
self.style.weightPosition = $( "#weightTextPosition" ).val();
if (fullStyle.mainTextFontSize != $( "#edgeTextSize" ).val())
self.style.mainTextFontSize = parseInt($( "#edgeTextSize" ).val());
var edgeWidth = parseInt($( "#edgeWidth" ).val());
var canvas = document.getElementById( "EdgePreview" );
@@ -283,6 +287,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
$( "#weightEdgeTextColor" ).unbind();
$( "#weightTextPosition" ).unbind();
$( "#edgeSelectedIndex" ).unbind();
$( "#edgeTextSize" ).unbind();
$( "#edgeFillColor" ).change(redrawVertex);
$( "#edgeStrokeColor" ).change(redrawVertex);
@@ -292,4 +297,5 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
$( "#weightEdgeTextColor" ).change(redrawVertex);
$( "#weightTextPosition" ).change(redrawVertex);
$( "#edgeSelectedIndex" ).change(changeIndex);
$( "#edgeTextSize" ).change(redrawVertex);
}

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

@@ -49,8 +49,9 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
$( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
$( "#vertexShape" ).val(fullStyle.shape);
$( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertices[0].model.diameter);
$( "#commonTextPosition" ).val(fullStyle.commonTextPosition);
$( "#commonTextPosition" ).val(fullStyle.commonTextPosition);
$( "#textSize" ).val(fullStyle.mainTextFontSize);
if (self.index > 0 || self.index == "all")
{
$( "#VertexSelectedIndexForm" ).show();
@@ -120,6 +121,9 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
if (fullStyle.commonTextPosition != $( "#commonTextPosition" ).val())
self.style.commonTextPosition = $( "#commonTextPosition" ).val();
if (fullStyle.mainTextFontSize != $( "#textSize" ).val())
self.style.mainTextFontSize = parseInt($( "#textSize" ).val());
var diameter = parseInt($( "#vertexSize" ).val());
var canvas = document.getElementById( "VertexPreview" );
@@ -286,6 +290,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
$( "#vertexSize" ).unbind();
$( "#commonTextPosition" ).unbind();
$( "#vertexSelectedIndex" ).unbind();
$( "#textSize" ).unbind();
$( "#vertexFillColor" ).change(redrawVertex);
$( "#vertexStrokeColor" ).change(redrawVertex);
@@ -296,4 +301,5 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
$( "#upVertexTextColor" ).change(redrawVertex);
$( "#commonTextPosition" ).change(redrawVertex);
$( "#vertexSelectedIndex" ).change(changeIndex);
$( "#textSize" ).change(redrawVertex);
}