diff --git a/i/css/home.css b/i/css/home.css index 5e3d47b..44673d7 100755 --- a/i/css/home.css +++ b/i/css/home.css @@ -86,7 +86,7 @@ #EdgeWeight { - max-width : 80px; + width: 86px; } #EdgeWeightSlider @@ -354,4 +354,9 @@ #NewEdgeAction { padding-top: 8px; +} + +#EdgeLabelControls +{ + padding-top: 4px; } \ No newline at end of file diff --git a/lang/en/home.php b/lang/en/home.php index 0588664..e0520ad 100755 --- a/lang/en/home.php +++ b/lang/en/home.php @@ -174,4 +174,5 @@ $g_lang["replace_edge"] = "replace current"; $g_lang["add_edge"] = "add (multigraph)"; $g_lang["french_add"] = "We have added French translation 🇫🇷"; + $g_lang["text_above_edge"] = "Text above edge"; ?> diff --git a/lang/fr/home.php b/lang/fr/home.php index efa7f82..f6d10f9 100644 --- a/lang/fr/home.php +++ b/lang/fr/home.php @@ -143,4 +143,5 @@ $g_lang["graph_is_general_message"] = ""; $g_lang["replace_edge"] = "remplacer l'actuel"; $g_lang["add_edge"] = "ajout (multigraphe)"; + $g_lang["text_above_edge"] = "Texte au-dessus du bord"; ?> \ No newline at end of file diff --git a/lang/ru/home.php b/lang/ru/home.php index 4eea510..01d49ec 100755 --- a/lang/ru/home.php +++ b/lang/ru/home.php @@ -176,4 +176,5 @@ $g_lang["graph_is_multi_message"] = "Мультиграф не поддерживает все алгоритмы"; $g_lang["graph_is_general_message"] = ""; + $g_lang["text_above_edge"] = "Текст над дугой"; ?> diff --git a/script/Appilcation.js b/script/Appilcation.js index be1861c..90960b5 100644 --- a/script/Appilcation.js +++ b/script/Appilcation.js @@ -502,9 +502,9 @@ Application.prototype.CreateNewGraphEx = function(x, y, vertexEnume) return this.graph.AddNewVertex(new BaseVertex(x, y, vertexEnume)); } -Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight, replaceIfExist) +Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight, replaceIfExist, upText) { - var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight), replaceIfExist); + var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight, upText), replaceIfExist); var edgeObject = this.graph.edges[edge]; var hasPair = this.graph.hasPair(edgeObject); diff --git a/script/BaseEdge.js b/script/BaseEdge.js index 7cff174..1757e30 100755 --- a/script/BaseEdge.js +++ b/script/BaseEdge.js @@ -4,7 +4,7 @@ * */ -function BaseEdge(vertex1, vertex2, isDirect, weight) +function BaseEdge(vertex1, vertex2, isDirect, weight, upText) { this.vertex1 = vertex1; this.vertex2 = vertex2; @@ -17,6 +17,7 @@ function BaseEdge(vertex1, vertex2, isDirect, weight) this.useWeight = false; this.id = 0; this.model = new EdgeModel(); + this.upText = upText; if (weight !== undefined) this.SetWeight(weight); @@ -32,6 +33,7 @@ BaseEdge.prototype.SaveToXML = function () "useWeight=\"" + this.useWeight + "\" " + "id=\"" + this.id + "\" " + "text=\"" + this.text + "\" " + + "upText=\"" + this.upText + "\" " + "arrayStyleStart=\"" + this.arrayStyleStart + "\" " + "arrayStyleFinish=\"" + this.arrayStyleFinish + "\" " + this.model.SaveToXML() + @@ -64,6 +66,11 @@ BaseEdge.prototype.LoadFromXML = function (xml, graph) this.text = xml.attr("text") == null ? "" : xml.attr("text"); this.arrayStyleStart = xml.attr("arrayStyleStart") == null ? "" : xml.attr("arrayStyleStart"); this.arrayStyleFinish = xml.attr("arrayStyleFinish") == null ? "" : xml.attr("arrayStyleFinish"); + this.upText = xml.attr('upText'); + if (typeof this.upText === 'undefined') + { + this.upText = ""; + } this.model.LoadFromXML(xml); } @@ -90,6 +97,11 @@ BaseEdge.prototype.GetText = function () return this.text.length > 0 ? this.text : (this.useWeight ? this.weight.toString() : ""); } +BaseEdge.prototype.GetUpText = function () +{ + return this.upText; +} + BaseEdge.prototype.GetStartEdgeStyle = function () { return this.arrayStyleStart; @@ -159,4 +171,9 @@ BaseEdge.prototype.SetWeight = function(weight) this.weight = Number(weight); this.useWeight = useWeight; +} + +BaseEdge.prototype.SetUpText = function(text) +{ + this.upText = text; } \ No newline at end of file diff --git a/script/BaseEdgeDrawer.js b/script/BaseEdgeDrawer.js index 7b6b53f..799ce69 100644 --- a/script/BaseEdgeDrawer.js +++ b/script/BaseEdgeDrawer.js @@ -165,6 +165,11 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle) { 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); + } } @@ -216,13 +221,44 @@ 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); + 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); + this.context.fillStyle = arcStyle.weightText; + this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y); +} + +BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair) +{ + var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle); + + this.context.font = "bold 12px sans-serif"; + this.context.textBaseline = "middle"; + + var widthText = this.context.measureText(text).width; + + this.context.fillStyle = arcStyle.strokeStyle; + + 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(20); + this.context.save(); + this.context.translate(centerPoint.x - normalize.x, centerPoint.y - normalize.y); + this.context.rotate(angleRadians); + this.context.textAlign = "center"; + //context.textAlign = "center"; + //context.fillText("Your Label Here", labelXposition, 0); + + this.context.fillText(text, 0, 0); + + this.context.restore(); } BaseEdgeDrawer.prototype.DrawArrow = function(position, direction, length, width) diff --git a/script/EventHandlers.js b/script/EventHandlers.js index bdfcdb2..935b964 100644 --- a/script/EventHandlers.js +++ b/script/EventHandlers.js @@ -302,6 +302,7 @@ DefaultHandler.prototype.MouseUp = function(pos) dialogButtons[g_save] = function() { handler.selectedObject.SetWeight(document.getElementById('EdgeWeight').value); + handler.selectedObject.SetUpText(document.getElementById('EdgeLable').value); handler.needRedraw = true; handler.app.redrawGraph(); @@ -313,6 +314,17 @@ DefaultHandler.prototype.MouseUp = function(pos) document.getElementById('EdgeWeight').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : g_noWeight; document.getElementById('EdgeWeightSlider').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : 0; + var edgePresets = handler.app.GetEdgePresets(); + var presetsStr = "" + g_DefaultWeightPreset + ""; + + for(var i = 0; i < edgePresets.length; i ++) + { + var edgePreset = edgePresets[i]; + presetsStr += "" + edgePreset + ""; + } + document.getElementById("EdgesPresets").innerHTML = presetsStr; + document.getElementById('EdgeLable').value = handler.selectedObject.upText; + $( "#addEdge" ).dialog({ resizable: false, height: "auto", @@ -421,7 +433,9 @@ ConnectionGraphHandler.prototype.firstObject = null; ConnectionGraphHandler.prototype.AddNewEdge = function(selectedObject, isDirect) { - this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked")); + this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked"), document.getElementById('EdgeLable').value); + + EdgeLable this.SelectFirst(); this.app.NeedRedraw(); } @@ -471,6 +485,7 @@ ConnectionGraphHandler.prototype.SelectVertex = function(selectedObject) presetsStr += "" + edgePreset + ""; } document.getElementById("EdgesPresets").innerHTML = presetsStr; + document.getElementById('EdgeLable').value = ""; $( "#addEdge" ).dialog({ resizable: false, @@ -1280,7 +1295,7 @@ SetupEdgeStyle.prototype.show = function(index) var graphDrawer = new BaseEdgeDrawer(context); var baseVertex1 = new BaseVertex(0, canvas.height / 2, new BaseEnumVertices(this)); var baseVertex2 = new BaseVertex(canvas.width, canvas.height / 2, new BaseEnumVertices(this)); - var baseEdge = new BaseEdge(baseVertex1, baseVertex2, true, 10); + var baseEdge = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text"); graphDrawer.Draw(baseEdge, style); diff --git a/tpl/home.php b/tpl/home.php index bdc5888..231589f 100755 --- a/tpl/home.php +++ b/tpl/home.php @@ -215,17 +215,16 @@
-
+
   
1 - 3 - 5 - 7 - 11
+
+    +