diff --git a/cgi-bin/saveGraphHelpers.php b/cgi-bin/saveGraphHelpers.php index 37ce1be..1d6f5b3 100755 --- a/cgi-bin/saveGraphHelpers.php +++ b/cgi-bin/saveGraphHelpers.php @@ -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; diff --git a/lang/bg/home.php b/lang/bg/home.php index 8fb69f8..3ce536b 100644 --- a/lang/bg/home.php +++ b/lang/bg/home.php @@ -303,5 +303,7 @@ We have added Dutch translation πŸ‡³πŸ‡±. Thank you Willie de Wit"; $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"; ?> diff --git a/lang/ch/home.php b/lang/ch/home.php index c816cfc..3923b13 100644 --- a/lang/ch/home.php +++ b/lang/ch/home.php @@ -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"; ?> diff --git a/lang/cs/home.php b/lang/cs/home.php index 99febc0..9540a09 100644 --- a/lang/cs/home.php +++ b/lang/cs/home.php @@ -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"; ?> \ No newline at end of file diff --git a/lang/de/home.php b/lang/de/home.php index 9b4eb50..317fc15 100644 --- a/lang/de/home.php +++ b/lang/de/home.php @@ -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"; ?> diff --git a/lang/el/home.php b/lang/el/home.php index 4cf9f26..af86972 100644 --- a/lang/el/home.php +++ b/lang/el/home.php @@ -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"; ?> diff --git a/lang/en/home.php b/lang/en/home.php index d279c55..f5058ce 100755 --- a/lang/en/home.php +++ b/lang/en/home.php @@ -311,4 +311,6 @@ We have added Dutch translation πŸ‡³πŸ‡±. Thank you Willie de Wit"; $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"; ?> diff --git a/lang/es/home.php b/lang/es/home.php index 77be537..6f9ba01 100755 --- a/lang/es/home.php +++ b/lang/es/home.php @@ -310,5 +310,7 @@ Tenemos traducciones en griego πŸ‡¬πŸ‡·. diff --git a/lang/fr/home.php b/lang/fr/home.php index 529ef15..a9593ae 100644 --- a/lang/fr/home.php +++ b/lang/fr/home.php @@ -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"; ?> diff --git a/lang/nl/home.php b/lang/nl/home.php index 3add199..0d81fe0 100644 --- a/lang/nl/home.php +++ b/lang/nl/home.php @@ -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"; ?> diff --git a/lang/pl/home.php b/lang/pl/home.php index 948ad01..3288f8f 100644 --- a/lang/pl/home.php +++ b/lang/pl/home.php @@ -310,5 +310,7 @@ DodaliΕ›my polskie tΕ‚umaczenie, Patryk"; $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"; ?> diff --git a/lang/pt/home.php b/lang/pt/home.php index dce6c3d..bb5e5e1 100644 --- a/lang/pt/home.php +++ b/lang/pt/home.php @@ -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"; ?> diff --git a/lang/ru/home.php b/lang/ru/home.php index 4bc1450..e1adfea 100755 --- a/lang/ru/home.php +++ b/lang/ru/home.php @@ -313,4 +313,6 @@ $g_lang['wrong_image_background_format'] = "ΠΠ΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ изобраТСния. Волько JPEG and PNG поддСрТиваСтся"; $g_lang['wrong_image_background_size'] = "Π Π°Π·ΠΌΠ΅Ρ€ изобаТСния слишком большой. Π Π°Π·ΠΌΠ΅Ρ€ изобраТСния Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ мСньшС {0} пиксСлСй."; + + $g_lang['text_size'] = "Π Π°Π·ΠΌΠ΅Ρ€ тСкста"; ?> diff --git a/lang/sv/home.php b/lang/sv/home.php index 73add81..c63dafd 100644 --- a/lang/sv/home.php +++ b/lang/sv/home.php @@ -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"; ?> diff --git a/script/entities/edge/model/BaseEdge.js b/script/entities/edge/model/BaseEdge.js index ced24b9..7cad0e1 100644 --- a/script/entities/edge/model/BaseEdge.js +++ b/script/entities/edge/model/BaseEdge.js @@ -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 ++) diff --git a/script/entities/vertex/model/BaseVertex.js b/script/entities/vertex/model/BaseVertex.js index 48eb2d9..639ac30 100644 --- a/script/entities/vertex/model/BaseVertex.js +++ b/script/entities/vertex/model/BaseVertex.js @@ -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; diff --git a/script/features/draw_graph/api/index.js b/script/features/draw_graph/api/index.js index 2b94a2c..55ddd3d 100644 --- a/script/features/draw_graph/api/index.js +++ b/script/features/draw_graph/api/index.js @@ -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) ]) diff --git a/script/features/draw_graph/model/BaseEdgeDrawer.js b/script/features/draw_graph/model/BaseEdgeDrawer.js index 4898fcf..6c0fa86 100644 --- a/script/features/draw_graph/model/BaseEdgeDrawer.js +++ b/script/features/draw_graph/model/BaseEdgeDrawer.js @@ -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; diff --git a/script/features/draw_graph/model/BaseVertexDrawer.js b/script/features/draw_graph/model/BaseVertexDrawer.js index d8d4324..5e50637 100644 --- a/script/features/draw_graph/model/BaseVertexDrawer.js +++ b/script/features/draw_graph/model/BaseVertexDrawer.js @@ -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; diff --git a/script/features/draw_graph/model/EdgeStyle.js b/script/features/draw_graph/model/EdgeStyle.js new file mode 100644 index 0000000..8882ad0 --- /dev/null +++ b/script/features/draw_graph/model/EdgeStyle.js @@ -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()]; diff --git a/script/features/draw_graph/model/VertexShape.js b/script/features/draw_graph/model/VertexShape.js new file mode 100644 index 0000000..1413709 --- /dev/null +++ b/script/features/draw_graph/model/VertexShape.js @@ -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; + } +} \ No newline at end of file diff --git a/script/features/draw_graph/model/VertexStyle.js b/script/features/draw_graph/model/VertexStyle.js new file mode 100644 index 0000000..0521fe2 --- /dev/null +++ b/script/features/draw_graph/model/VertexStyle.js @@ -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()]; + diff --git a/script/features/setup_edge_style/index.js b/script/features/setup_edge_style/index.js index e324464..11c01a7 100644 --- a/script/features/setup_edge_style/index.js +++ b/script/features/setup_edge_style/index.js @@ -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); } diff --git a/script/features/setup_vertex_style/index.js b/script/features/setup_vertex_style/index.js index ef5c1ca..e30df6e 100644 --- a/script/features/setup_vertex_style/index.js +++ b/script/features/setup_vertex_style/index.js @@ -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); } diff --git a/script/pages/create_graph_by_edge_list/api/index.js.cache b/script/pages/create_graph_by_edge_list/api/index.js.cache index 91330c9..35e390c 100644 --- a/script/pages/create_graph_by_edge_list/api/index.js.cache +++ b/script/pages/create_graph_by_edge_list/api/index.js.cache @@ -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;i0) {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) diff --git a/src/admin/page_saved_graph.php b/src/admin/page_saved_graph.php index 8af37a4..3d1b372 100755 --- a/src/admin/page_saved_graph.php +++ b/src/admin/page_saved_graph.php @@ -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)) { diff --git a/tmp/saved/IE/IEktYqMyJaYYyLufZZcst_test.xml b/tmp/saved/IE/IEktYqMyJaYYyLufZZcst_test.xml new file mode 100644 index 0000000..655ea96 Binary files /dev/null and b/tmp/saved/IE/IEktYqMyJaYYyLufZZcst_test.xml differ diff --git a/tpl/home.php b/tpl/home.php index ba02dba..82b1d24 100755 --- a/tpl/home.php +++ b/tpl/home.php @@ -510,6 +510,12 @@ +
+ +
+ +
+
@@ -584,6 +590,12 @@
+
+ +
+ +
+