mirrors/graphonline
1
0
Fork 0
mirror of https://github.com/UnickSoft/graphonline.git synced 2025-07-01 07:15:29 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
cgi-bin/saveGraphHelpers.php
View File

@ -6,10 +6,9 @@
// Only latic.
function isValidName($name)
{
return preg_match("(^[a-zA-Z]+$)", $name);
return preg_match("(^[a-zA-Z]+[_test]*$)", $name);
}
function getXMLFileName($graphName, $fromRoot=false)
{
global $g_config;

4
lang/bg/home.php
View File

@ -303,5 +303,7 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/ch/home.php
View File

@ -305,5 +305,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/cs/home.php
View File

@ -309,5 +309,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/de/home.php
View File

@ -267,5 +267,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/el/home.php
View File

@ -306,5 +306,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

2
lang/en/home.php
View File

@ -311,4 +311,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/es/home.php
View File

@ -310,5 +310,7 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/fr/home.php
View File

@ -277,5 +277,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/nl/home.php
View File

@ -274,5 +274,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/pl/home.php
View File

@ -310,5 +310,7 @@ Dodaliśmy polskie tłumaczenie, Patryk</a>";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

4
lang/pt/home.php
View File

@ -275,5 +275,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

2
lang/ru/home.php
View File

@ -313,4 +313,6 @@
$g_lang['wrong_image_background_format'] = "Неправильный формат изображения. Только JPEG and PNG поддерживается";
$g_lang['wrong_image_background_size'] = "Размер изобажения слишком большой. Размер изображения должен быть меньше {0} пикселей.";
$g_lang['text_size'] = "Размер текста";
?>

4
lang/sv/home.php
View File

@ -271,5 +271,7 @@
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
$g_lang['text_size'] = "Text size";
?>

5
script/entities/edge/model/BaseEdge.js
View File

@ -219,7 +219,8 @@ BaseEdge.prototype.GetEdgePositions = function()
vertices.forEach(function(data)
{
var shape = data.vertex.currentStyle.GetStyle({}, data.vertex).shape;
var style = data.vertex.currentStyle.GetStyle({}, data.vertex);
var shape = style.shape;
if (shape == VertexCircleShape)
{
var direction = data.direction.multiply(0.5);
@ -230,7 +231,7 @@ BaseEdge.prototype.GetEdgePositions = function()
{
var lineFinish1 = data.direction.multiply(-1).multiply(1000.0);
var pointsVertex1 = GetPointsForShape(shape, data.diameter, data.vertex.mainText);
var pointsVertex1 = GetPointsForShape(shape, data.diameter, {style: style, text: data.vertex.mainText});
pointsVertex1.push(pointsVertex1[0]);
for (var i = 0; i < pointsVertex1.length - 1; i ++)

13
script/entities/vertex/model/BaseVertex.js
View File

@ -104,8 +104,9 @@ BaseVertex.prototype.IsUndefinedPosition = function ()
BaseVertex.prototype.HitTest = function (pos)
{
var shape = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this).shape : VertexCircleShape;
var width = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this).lineWidth : 0;
var style = this.hasOwnProperty('currentStyle') ? this.currentStyle.GetStyle({}, this) : null;
var shape = style != null ? style.shape : VertexCircleShape;
var width = style != null ? style.lineWidth : 0;
if (shape == VertexCircleShape)
{
@ -116,8 +117,12 @@ BaseVertex.prototype.HitTest = function (pos)
var relativePos = (new Point(pos.x, pos.y)).subtract(this.position);
var lineFinish1 = relativePos.add(new Point(1000, 0));
var lineFinish2 = relativePos.add(new Point(-1000, 0));
var pointsVertex1 = GetPointsForShape(shape, this.model.diameter + width, this.mainText);
if (style == null)
{
console.error("Some thing wrong with style");
}
var pointsVertex1 = GetPointsForShape(shape, this.model.diameter + width,
style != null ? {style: style, text: this.mainText} : null);
pointsVertex1.push(pointsVertex1[0]);
var hitNumber1 = 0;

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

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

@ -79,10 +79,10 @@ var position1=this.vertex1.position;var position2=this.vertex2.position;var diam
else
{direction2=direction2.multiply(-1);}
direction1.normalize(1.0);direction2.normalize(1.0);var vertices=[];vertices.push({vertex:this.vertex1,direction:direction1,position:position1,diameter:d1});vertices.push({vertex:this.vertex2,direction:direction2,position:position2,diameter:d2});vertices.forEach(function(data)
{var shape=data.vertex.currentStyle.GetStyle({},data.vertex).shape;if(shape==VertexCircleShape)
{var style=data.vertex.currentStyle.GetStyle({},data.vertex);var shape=style.shape;if(shape==VertexCircleShape)
{var direction=data.direction.multiply(0.5);res.push(data.position.subtract(direction.multiply(data.diameter)));}
else
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,data.vertex.mainText);pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,{style:style,text:data.vertex.mainText});pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var hitText=Point.hitTest(new Point(0,0),lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitText!=null)
{res.push(data.position.add(hitText));break;}}}});return res;}
BaseEdge.prototype.SetWeight=function(weight)
@ -189,10 +189,12 @@ BaseVertex.prototype.diameterFactor=function()
BaseVertex.prototype.IsUndefinedPosition=function()
{return this.hasUndefinedPosition;}
BaseVertex.prototype.HitTest=function(pos)
{var shape=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).shape:VertexCircleShape;var width=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).lineWidth:0;if(shape==VertexCircleShape)
{var style=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this):null;var shape=style!=null?style.shape:VertexCircleShape;var width=style!=null?style.lineWidth:0;if(shape==VertexCircleShape)
{return this.position.distance(pos)<this.model.diameter/2.0+width;}
else
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,this.mainText);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));if(style==null)
{console.error("Some thing wrong with style");}
var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,style!=null?{style:style,text:this.mainText}:null);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var hitTest=Point.hitTest(relativePos,lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)
{hitNumber1++;}
hitTest=Point.hitTest(relativePos,lineFinish2,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)

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

@ -79,10 +79,10 @@ var position1=this.vertex1.position;var position2=this.vertex2.position;var diam
else
{direction2=direction2.multiply(-1);}
direction1.normalize(1.0);direction2.normalize(1.0);var vertices=[];vertices.push({vertex:this.vertex1,direction:direction1,position:position1,diameter:d1});vertices.push({vertex:this.vertex2,direction:direction2,position:position2,diameter:d2});vertices.forEach(function(data)
{var shape=data.vertex.currentStyle.GetStyle({},data.vertex).shape;if(shape==VertexCircleShape)
{var style=data.vertex.currentStyle.GetStyle({},data.vertex);var shape=style.shape;if(shape==VertexCircleShape)
{var direction=data.direction.multiply(0.5);res.push(data.position.subtract(direction.multiply(data.diameter)));}
else
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,data.vertex.mainText);pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,{style:style,text:data.vertex.mainText});pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var hitText=Point.hitTest(new Point(0,0),lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitText!=null)
{res.push(data.position.add(hitText));break;}}}});return res;}
BaseEdge.prototype.SetWeight=function(weight)
@ -189,10 +189,12 @@ BaseVertex.prototype.diameterFactor=function()
BaseVertex.prototype.IsUndefinedPosition=function()
{return this.hasUndefinedPosition;}
BaseVertex.prototype.HitTest=function(pos)
{var shape=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).shape:VertexCircleShape;var width=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).lineWidth:0;if(shape==VertexCircleShape)
{var style=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this):null;var shape=style!=null?style.shape:VertexCircleShape;var width=style!=null?style.lineWidth:0;if(shape==VertexCircleShape)
{return this.position.distance(pos)<this.model.diameter/2.0+width;}
else
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,this.mainText);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));if(style==null)
{console.error("Some thing wrong with style");}
var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,style!=null?{style:style,text:this.mainText}:null);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var hitTest=Point.hitTest(relativePos,lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)
{hitNumber1++;}
hitTest=Point.hitTest(relativePos,lineFinish2,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)

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

@ -79,10 +79,10 @@ var position1=this.vertex1.position;var position2=this.vertex2.position;var diam
else
{direction2=direction2.multiply(-1);}
direction1.normalize(1.0);direction2.normalize(1.0);var vertices=[];vertices.push({vertex:this.vertex1,direction:direction1,position:position1,diameter:d1});vertices.push({vertex:this.vertex2,direction:direction2,position:position2,diameter:d2});vertices.forEach(function(data)
{var shape=data.vertex.currentStyle.GetStyle({},data.vertex).shape;if(shape==VertexCircleShape)
{var style=data.vertex.currentStyle.GetStyle({},data.vertex);var shape=style.shape;if(shape==VertexCircleShape)
{var direction=data.direction.multiply(0.5);res.push(data.position.subtract(direction.multiply(data.diameter)));}
else
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,data.vertex.mainText);pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,{style:style,text:data.vertex.mainText});pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var hitText=Point.hitTest(new Point(0,0),lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitText!=null)
{res.push(data.position.add(hitText));break;}}}});return res;}
BaseEdge.prototype.SetWeight=function(weight)
@ -189,10 +189,12 @@ BaseVertex.prototype.diameterFactor=function()
BaseVertex.prototype.IsUndefinedPosition=function()
{return this.hasUndefinedPosition;}
BaseVertex.prototype.HitTest=function(pos)
{var shape=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).shape:VertexCircleShape;var width=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).lineWidth:0;if(shape==VertexCircleShape)
{var style=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this):null;var shape=style!=null?style.shape:VertexCircleShape;var width=style!=null?style.lineWidth:0;if(shape==VertexCircleShape)
{return this.position.distance(pos)<this.model.diameter/2.0+width;}
else
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,this.mainText);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));if(style==null)
{console.error("Some thing wrong with style");}
var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,style!=null?{style:style,text:this.mainText}:null);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var hitTest=Point.hitTest(relativePos,lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)
{hitNumber1++;}
hitTest=Point.hitTest(relativePos,lineFinish2,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)

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

@ -1,4 +1,4 @@
moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=77","/script/entities/graph/api/index.js?v=77","/script/shared/point.js?v=77","/script/entities/edge/api/index.js?v=77","/script/entities/edge/model/BaseEdge.js?v=77","/script/entities/edge/model/EdgeModel.js?v=77","/script/entities/vertex/api/index.js?v=77","/script/entities/vertex/model/BaseVertex.js?v=77","/script/entities/vertex/model/VertexModel.js?v=77","/script/entities/graph/model/Graph.js?v=77","/script/features/draw_graph/api/index.js?v=77","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=77","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=77","/script/features/draw_graph/model/BaseVertexDrawer.js?v=77","/script/features/algorithms/api/index.js?v=77","/script/features/algorithms/model/Algorithms.js?v=77","/script/features/algorithms/model/BaseTraversal.js?v=77","/script/features/base_handler/index.js?v=77","/script/features/default_handler/index.js?v=77","/script/features/add_vertices_handler/index.js?v=77","/script/features/connect_vertices_handler/index.js?v=77","/script/features/delete_objects_handler/index.js?v=77","/script/features/algorithm_handler/index.js?v=77","/script/features/serialization/api/index.js?v=77","/script/features/serialization/model/GraphMLCreator.js?v=77","/script/features/enum_vertices/EnumVertices.js?v=77","/script/pages/editor/model/texts.js?v=77","/script/pages/editor/model/UndoStack.js?v=77","/script/pages/editor/model/DiskSaveLoad.js?v=77","/script/pages/editor/model/Application.js?v=77","/script/pages/editor/ui/ya_metrika.js?v=77","/script/pages/editor/ui/editor.js?v=77","/script/pages/editor/ui/main.js?v=77",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.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=77","/script/entities/graph/api/index.js?v=77","/script/shared/point.js?v=77","/script/entities/edge/api/index.js?v=77","/script/entities/edge/model/BaseEdge.js?v=77","/script/entities/edge/model/EdgeModel.js?v=77","/script/entities/vertex/api/index.js?v=77","/script/entities/vertex/model/BaseVertex.js?v=77","/script/entities/vertex/model/VertexModel.js?v=77","/script/entities/graph/model/Graph.js?v=77","/script/features/draw_graph/api/index.js?v=77","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=77","/script/features/draw_graph/model/EdgeStyle.js?v=77","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=77","/script/features/draw_graph/model/VertexShape.js?v=77","/script/features/draw_graph/model/VertexStyle.js?v=77","/script/features/draw_graph/model/BaseVertexDrawer.js?v=77","/script/features/algorithms/api/index.js?v=77","/script/features/algorithms/model/Algorithms.js?v=77","/script/features/algorithms/model/BaseTraversal.js?v=77","/script/features/base_handler/index.js?v=77","/script/features/default_handler/index.js?v=77","/script/features/add_vertices_handler/index.js?v=77","/script/features/connect_vertices_handler/index.js?v=77","/script/features/delete_objects_handler/index.js?v=77","/script/features/algorithm_handler/index.js?v=77","/script/features/serialization/api/index.js?v=77","/script/features/serialization/model/GraphMLCreator.js?v=77","/script/features/enum_vertices/EnumVertices.js?v=77","/script/pages/editor/model/texts.js?v=77","/script/pages/editor/model/UndoStack.js?v=77","/script/pages/editor/model/DiskSaveLoad.js?v=77","/script/pages/editor/model/Application.js?v=77","/script/pages/editor/ui/ya_metrika.js?v=77","/script/pages/editor/ui/editor.js?v=77","/script/pages/editor/ui/main.js?v=77",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.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("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/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')
@ -92,10 +92,10 @@ var position1=this.vertex1.position;var position2=this.vertex2.position;var diam
else
{direction2=direction2.multiply(-1);}
direction1.normalize(1.0);direction2.normalize(1.0);var vertices=[];vertices.push({vertex:this.vertex1,direction:direction1,position:position1,diameter:d1});vertices.push({vertex:this.vertex2,direction:direction2,position:position2,diameter:d2});vertices.forEach(function(data)
{var shape=data.vertex.currentStyle.GetStyle({},data.vertex).shape;if(shape==VertexCircleShape)
{var style=data.vertex.currentStyle.GetStyle({},data.vertex);var shape=style.shape;if(shape==VertexCircleShape)
{var direction=data.direction.multiply(0.5);res.push(data.position.subtract(direction.multiply(data.diameter)));}
else
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,data.vertex.mainText);pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var lineFinish1=data.direction.multiply(-1).multiply(1000.0);var pointsVertex1=GetPointsForShape(shape,data.diameter,{style:style,text:data.vertex.mainText});pointsVertex1.push(pointsVertex1[0]);for(var i=0;i<pointsVertex1.length-1;i++)
{var hitText=Point.hitTest(new Point(0,0),lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitText!=null)
{res.push(data.position.add(hitText));break;}}}});return res;}
BaseEdge.prototype.SetWeight=function(weight)
@ -202,10 +202,12 @@ BaseVertex.prototype.diameterFactor=function()
BaseVertex.prototype.IsUndefinedPosition=function()
{return this.hasUndefinedPosition;}
BaseVertex.prototype.HitTest=function(pos)
{var shape=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).shape:VertexCircleShape;var width=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this).lineWidth:0;if(shape==VertexCircleShape)
{var style=this.hasOwnProperty('currentStyle')?this.currentStyle.GetStyle({},this):null;var shape=style!=null?style.shape:VertexCircleShape;var width=style!=null?style.lineWidth:0;if(shape==VertexCircleShape)
{return this.position.distance(pos)<this.model.diameter/2.0+width;}
else
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,this.mainText);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var relativePos=(new Point(pos.x,pos.y)).subtract(this.position);var lineFinish1=relativePos.add(new Point(1000,0));var lineFinish2=relativePos.add(new Point(-1000,0));if(style==null)
{console.error("Some thing wrong with style");}
var pointsVertex1=GetPointsForShape(shape,this.model.diameter+width,style!=null?{style:style,text:this.mainText}:null);pointsVertex1.push(pointsVertex1[0]);var hitNumber1=0;var hitNumber2=0;for(var i=0;i<pointsVertex1.length-1;i++)
{var hitTest=Point.hitTest(relativePos,lineFinish1,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)
{hitNumber1++;}
hitTest=Point.hitTest(relativePos,lineFinish2,pointsVertex1[i],pointsVertex1[i+1]);if(hitTest!=null)
@ -610,7 +612,7 @@ Graph.prototype.makeAllEdgesUndirected=function()
{if(this.edges[i].isDirect)
{this.edges[i].isDirect=false;}}
this.isMultiGraph=this.checkMutiGraph();}
{let modulDir="features/draw_graph/";doInclude([include("model/BaseBackgroundDrawer.js",modulDir),include("model/BaseEdgeDrawer.js",modulDir),include("model/BaseVertexDrawer.js",modulDir)])}
{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)])}
function CommonBackgroundStyle()
{this.commonColor='#ffffff';this.commonOpacity=1.0;this.image=null;}
CommonBackgroundStyle.prototype.Clear=function()
@ -633,7 +635,7 @@ context.globalAlpha=oldOpacity;}
BaseBackgroundDrawer.prototype.DrawImage=function(style,width,height,position,scale)
{if(style.image==null){return;}
var context=this.context;context.clearRect(0,0,style.image.width,style.image.height);context.drawImage(style.image,0,0)}
const lineDashTypes=[[],[4,4],[12,12],[16,4,4,4],];const WeightTextCenter=0,WeightTextUp=1;function BaseEdgeStyle()
const lineDashTypes=[[],[4,4],[12,12],[16,4,4,4],];const WeightTextCenter=0,WeightTextUp=1;const DefaultFontEdge="px sans-serif",DefaultMainTextFontSizeEdge=16,TopTextFontSizeDeltaEdge=-4;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'))
@ -644,13 +646,15 @@ 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);}
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;return style;}
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.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()
@ -695,12 +699,12 @@ this.SetupStyle(baseEdge,arcStyle);if(arcStyle.weightPosition==WeightTextCenter)
{if(baseEdge.GetText().length>0)
{this.DrawWeight(positions[0],positions[1],baseEdge.GetText(),arcStyle,false);}
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);}}}
BaseEdgeDrawer.prototype.SetupStyle=function(baseEdge,arcStyle)
{this.context.lineWidth=baseEdge.model.width;this.context.strokeStyle=arcStyle.strokeStyle;this.context.fillStyle=arcStyle.fillStyle;this.model=baseEdge.model;this.style=arcStyle;}
BaseEdgeDrawer.prototype.DrawArc=function(position1,position2,arcStyle)
@ -712,9 +716,9 @@ else
{this.context.beginPath();this.context.moveTo(position1.x,position1.y);this.context.lineTo(position2.x,position2.y);this.context.stroke();}
this.context.setLineDash([]);}
BaseEdgeDrawer.prototype.DrawWeight=function(position1,position2,text,arcStyle,hasPair)
{var centerPoint=this.GetTextCenterPoint(position1,position2,hasPair,arcStyle);this.context.font="bold 16px sans-serif";this.context.textBaseline="middle";this.context.lineWidth=arcStyle.textStrokeWidth;this.context.fillStyle=arcStyle.fillStyle;var widthText=this.context.measureText(text).width;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);this.context.closePath();this.context.fill();this.context.stroke();this.context.fillStyle=arcStyle.weightText;this.context.fillText(text,centerPoint.x-widthText/2,centerPoint.y);}
{var centerPoint=this.GetTextCenterPoint(position1,position2,hasPair,arcStyle);this.context.font="bold "+arcStyle.mainTextFontSize+"px sans-serif";this.context.textBaseline="middle";this.context.lineWidth=arcStyle.textStrokeWidth;this.context.fillStyle=arcStyle.fillStyle;var widthText=this.context.measureText(text).width;this.context.beginPath();this.context.rect(centerPoint.x-widthText/2-arcStyle.textPadding/2,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();this.context.fillStyle=arcStyle.weightText;this.context.fillText(text,centerPoint.x-widthText/2,centerPoint.y);}
BaseEdgeDrawer.prototype.DrawUpText=function(position1,position2,text,arcStyle,hasPair,color,offset,fontSize)
{var centerPoint=this.GetTextCenterPoint(position1,position2,hasPair,arcStyle);this.context.font=fontSize==null?"bold 12px sans-serif":"bold "+fontSize+" sans-serif";this.context.textBaseline="middle";var widthText=this.context.measureText(text).width;this.context.fillStyle=color;var vectorEdge=new Point(position2.x-position1.x,position2.y-position1.y);var angleRadians=Math.atan2(vectorEdge.y,vectorEdge.x);if(angleRadians>Math.PI/2||angleRadians<-Math.PI/2)
{var centerPoint=this.GetTextCenterPoint(position1,position2,hasPair,arcStyle);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;this.context.fillStyle=color;var vectorEdge=new Point(position2.x-position1.x,position2.y-position1.y);var angleRadians=Math.atan2(vectorEdge.y,vectorEdge.x);if(angleRadians>Math.PI/2||angleRadians<-Math.PI/2)
{vectorEdge=new Point(position1.x-position2.x,position1.y-position2.y);angleRadians=Math.atan2(vectorEdge.y,vectorEdge.x);}
var normalize=vectorEdge.normal().normalizeCopy(offset);this.context.save();this.context.translate(centerPoint.x-normalize.x,centerPoint.y-normalize.y);this.context.rotate(angleRadians);this.context.textAlign="center";this.context.fillText(text,0,0);this.context.restore();}
BaseEdgeDrawer.prototype.DrawArrow=function(position,direction,length,width)
@ -763,25 +767,26 @@ if(position1.equals(position2))
return centerPoint;}
CurvedArcDrawer.prototype.GetPointOnArc=function(position1,position2,percent)
{return this.model.GetCurvePoint(position1,position2,percent);}
const VertexCircleShape=0,VertexSquareShape=1,VertexTriangleShape=2,VertexPentagonShape=3,VertexHomeShape=4,VertexTextboxShape=5;VertexSnowflakeShape=6;const CommonTextCenter=0,CommonTextUp=1;const DefaultFont="px sans-serif",MainTextFontSize=16,TopTextFontSize=12.0;function GetSquarePoints(diameter)
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,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;}
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,text=null)
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,text);break;case VertexSnowflakeShape:return GetShowflakePoints(diameter);break;default:return null;break;}}
{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;}}
function BaseVertexStyle()
const CommonTextCenter=0,CommonTextUp=1;const DefaultFont="px sans-serif",DefaultMainTextFontSize=16,TopTextFontSizeDelta=-4;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'))
@ -791,13 +796,15 @@ 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);}
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;return style;}
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.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";}
function CommonVertexStyle()
@ -821,16 +828,16 @@ SelectedPrintVertexStyle.prototype=Object.create(BaseVertexStyle.prototype);var
BaseVertexDrawer.prototype.Draw=function(baseGraph,graphStyle)
{this.SetupStyle(graphStyle);this.DrawShape(baseGraph);if(this.currentStyle.lineWidth!=0)
this.context.stroke();this.context.fill();var shapeSize=GetSizeForShape(graphStyle.shape,baseGraph.model.diameter+graphStyle.lineWidth);if(graphStyle.commonTextPosition==CommonTextCenter)
{this.DrawCenterText(baseGraph.position,baseGraph.mainText,graphStyle.mainTextColor,graphStyle.fillStyle,true,true,MainTextFontSize);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,baseGraph.mainText,graphStyle.mainTextColor,graphStyle.fillStyle,true,true,graphStyle.mainTextFontSize);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+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.mainText,graphStyle.mainTextColor,graphStyle.fillStyle,true,false,graphStyle.mainTextFontSize);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);}}
BaseVertexDrawer.prototype.SetupStyle=function(style)
{this.currentStyle=style;this.context.lineWidth=style.lineWidth;this.context.strokeStyle=style.strokeStyle;this.context.fillStyle=style.fillStyle;}
BaseVertexDrawer.prototype.DrawShape=function(baseGraph)
{this.context.beginPath();if(this.currentStyle.shape==VertexCircleShape)
{this.context.arc(baseGraph.position.x,baseGraph.position.y,baseGraph.model.diameter/2.0,0,2*Math.PI);}
else
{var points=GetPointsForShape(this.currentStyle.shape,baseGraph.model.diameter,baseGraph.mainText);this.context.moveTo(baseGraph.position.x+points[points.length-1].x,baseGraph.position.y+points[points.length-1].y);var context=this.context;points.forEach(function(point){context.lineTo(baseGraph.position.x+point.x,baseGraph.position.y+point.y);});}
{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);var context=this.context;points.forEach(function(point){context.lineTo(baseGraph.position.x+point.x,baseGraph.position.y+point.y);});}
this.context.closePath();}
BaseVertexDrawer.prototype.DrawText=function(position,text,color,outlineColor,outline,font)
{this.context.fillStyle=color;this.context.font=font;this.context.lineWidth=4;this.context.strokeStyle=outlineColor;if(outline)

6
src/admin/page_saved_graph.php
View File

@ -73,6 +73,12 @@ if (isset($_POST["submit"]) && $_POST["submit"] == "delete1YImages")
return;
}
}
// Ignore test graphs
if (str_ends_with ($item["id"], "_test"))
{
return;
}
if (unlink($file))
{

BIN
tmp/saved/IE/IEktYqMyJaYYyLufZZcst_test.xml Normal file
View File

Binary file not shown.

12
tpl/home.php
View File

@ -510,6 +510,12 @@
<input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="0">
</div>
</div>
<div class="form-group row">
<label for="textSize" class="col-sm-5 col-form-label"><?= L('text_size') ?></label>
<div class="col-sm-5">
<input type="number" class="form-control" id="textSize" placeholder="10" min="5" min="500">
</div>
</div>
<div class="form-group row small-bottom-marging">
<label for="vertexTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
<div class="col-sm-5">
@ -584,6 +590,12 @@
</datalist>
</div>
</div>
<div class="form-group row">
<label for="edgeTextSize" class="col-sm-5 col-form-label"><?= L('text_size') ?></label>
<div class="col-sm-5">
<input type="number" class="form-control" id="edgeTextSize" placeholder="10" min="5" min="500">
</div>
</div>
<div class="form-group row small-bottom-marging">
<label for="edgeTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
<div class="col-sm-5">