Qtype_drawline: display middle label

Author: AnupamaSarjoshi

amd/build/form.min.js

@@ -32,7 +32,7 @@ define(['jquery', 'core/dragdrop', 'qtype_drawlines/line'], function($, dragDrop
     function LineManager(lineNo) {
         this.lineNo = lineNo;
         this.svgEl = null;
-        this.line = Line.make(this.getCoordinatesFromForm(this.lineNo), this.getLabel(), this.getLineType());
+        this.line = Line.make(this.getCoordinatesFromForm(this.lineNo), this.getLineType(), this.getLabel());
         this.updateCoordinatesFromForm();
     }
 
@@ -138,11 +138,10 @@ define(['jquery', 'core/dragdrop', 'qtype_drawlines/line'], function($, dragDrop
      */
     LineManager.prototype.updateLabel = function() {
         var label = this.getLabel();
-        if (this.line.labelstart !== label[0] || this.line.labelend !== label[1]) {
-            this.line.labelstart = label[0];
-            this.line.labelend = label[1];
-            this.updateSvgEl();
-        }
+        this.line.labelstart = label[0];
+        this.line.labelmiddle = label[1];
+        this.line.labelend = label[2];
+        this.updateSvgEl();
     };
 
     /**
@@ -162,6 +161,7 @@ define(['jquery', 'core/dragdrop', 'qtype_drawlines/line'], function($, dragDrop
     LineManager.prototype.getLabel = function() {
         return [
             drawlinesForm.getFormValue('labelstart', [this.lineNo]),
+            drawlinesForm.getFormValue('labelmiddle', [this.lineNo]),
             drawlinesForm.getFormValue('labelend', [this.lineNo])
         ];
     };
@@ -189,14 +189,14 @@ define(['jquery', 'core/dragdrop', 'qtype_drawlines/line'], function($, dragDrop
         // Then comes the move handle followed by the edit handles.
         var i = 0;
         for (i = 0; i < handles.moveHandles.length; ++i) {
-            this.svgEl.childNodes[5 + i].setAttribute('cx', handles.moveHandles[i].x);
-            this.svgEl.childNodes[5 + i].setAttribute('cy', handles.moveHandles[i].y);
+            this.svgEl.childNodes[6 + i].setAttribute('cx', handles.moveHandles[i].x);
+            this.svgEl.childNodes[6 + i].setAttribute('cy', handles.moveHandles[i].y);
         }
 
         // Edit handles.
         for (i = 0; i < handles.editHandles.length; ++i) {
-            this.svgEl.childNodes[7 + i].setAttribute('x', handles.editHandles[i].x - 6);
-            this.svgEl.childNodes[7 + i].setAttribute('y', handles.editHandles[i].y - 6);
+            this.svgEl.childNodes[8 + i].setAttribute('x', handles.editHandles[i].x - 6);
+            this.svgEl.childNodes[8 + i].setAttribute('y', handles.editHandles[i].y - 6);
         }
     };
 
@@ -571,6 +571,7 @@ define(['jquery', 'core/dragdrop', 'qtype_drawlines/line'], function($, dragDrop
                                 break;
 
                             case 'labelstart':
+                            case 'labelmiddle':
                             case 'labelend':
                                 dropZone.updateLabel();
                                 break;

amd/build/form.min.js.map

@@ -94,20 +94,19 @@ define(function() {
     /**
      * Line constructor. Class to represent the different types of drop zone shapes.
      *
-     * @param {String} [labelstart] start label of a line.
      * @param {int} [x1] centre X1.
      * @param {int} [y1] centre Y1.
      * @param {int} [startRadius] startRadius.
-     * @param {String} [labelend] end label of a line.
      * @param {int} [x2] centre X2.
      * @param {int} [y2] centre Y2.
      * @param {int} [endRadius] endRadius.
      * @param {String} [lineType] Line type.
+     * @param {String} [labelstart] start label of a line.
+     * @param {String} [labelmiddle] middle label of a line.
+     * @param {String} [labelend] end label of a line.
      * @constructor
      */
-    function Line(labelstart, x1, y1, startRadius, labelend, x2, y2, endRadius, lineType) {
-        this.labelstart = labelstart;
-        this.labelend = labelend;
+    function Line(x1, y1, startRadius, x2, y2, endRadius, lineType, labelstart, labelmiddle, labelend) {
         this.x1 = x1;
         this.y1 = y1;
 
@@ -121,6 +120,10 @@ define(function() {
         this.endRadius = endRadius;
 
         this.lineType = lineType;
+
+        this.labelstart = labelstart;
+        this.labelmiddle = labelmiddle;
+        this.labelend = labelend;
     }
     Line.prototype = new Line();
 
@@ -178,12 +181,15 @@ define(function() {
 
         // Set start and end label attributes.
         svgEl.childNodes[3].textContent = this.labelstart;
-        svgEl.childNodes[3].setAttribute('x', this.centre1.x);
-        svgEl.childNodes[3].setAttribute('y', parseInt(this.centre1.y) + 20);
+        this.adjustTextPosition(svgEl, svgEl.childNodes[3], this.centre1.x, parseInt(this.centre1.y));
 
-        svgEl.childNodes[4].textContent = this.labelend;
-        svgEl.childNodes[4].setAttribute('x', this.centre2.x);
-        svgEl.childNodes[4].setAttribute('y', parseInt(this.centre2.y) + 20);
+        svgEl.childNodes[4].textContent = this.labelmiddle;
+        let middlex = Math.abs((this.centre1.x + this.centre2.x) / 2);
+        let middley = Math.abs((this.centre1.y + this.centre2.y) / 2);
+        this.adjustTextPosition(svgEl, svgEl.childNodes[4], middlex, middley);
+
+        svgEl.childNodes[5].textContent = this.labelend;
+        this.adjustTextPosition(svgEl, svgEl.childNodes[5], this.centre2.x, parseInt(this.centre2.y));
 
         // If the svg g element is already placed in dropzone, then add the keyboard support.
         var svgClass = svgEl.getAttribute('class');
@@ -193,6 +199,41 @@ define(function() {
         }
     };
 
+    /**
+     * Update svg line attributes.
+     *
+     * @param {SVGElement} [svgEl] the g element of the SVG.
+     * @param {SVGElement} [svgTextEl] the text node of the SVG.
+     * @param {int} [linex] coordinate of the line.
+     * @param {int} [liney] coordinate of the line.
+     */
+    Line.prototype.adjustTextPosition = function(svgEl, svgTextEl, linex, liney) {
+        // SVG container dimensions
+        let parentSVG = svgEl.parentNode;
+        const svgWidth = parentSVG.getAttribute('width');
+        const svgHeight = parentSVG.getAttribute('height');
+        const padding = 20;
+
+        // Text element dimensions.
+        const bbox = svgTextEl.getBBox();
+        const textWidth = bbox.width;
+
+        svgTextEl.setAttribute('x', linex);
+        svgTextEl.setAttribute('y', liney + padding);
+
+        // Recalculate the position of x and y coordinates of text, to make sure the text content is fully displayed.
+        if (linex < textWidth / 2) {
+            svgTextEl.setAttribute('x', Math.abs(textWidth / 2));
+        } else if ((linex + (textWidth / 2)) > svgWidth) {
+            svgTextEl.setAttribute('x', Math.abs(svgWidth - (textWidth / 2)));
+        }
+
+        if (liney + padding > svgHeight) {
+            // Adjust if the line is very near to the bottom of the svg.
+            svgTextEl.setAttribute('y', liney - padding);
+        }
+    };
+
     /**
      * Update svg line attributes.
      *
@@ -607,6 +648,7 @@ define(function() {
         var endcirleEl = createSvgElement(svgEl, 'circle');
         endcirleEl.setAttribute('class', 'endcircle shape');
         createSvgElement(svgEl, 'text').setAttribute('class', 'labelstart shapeLabel');
+        createSvgElement(svgEl, 'text').setAttribute('class', 'labelmiddle shapeLabel');
         createSvgElement(svgEl, 'text').setAttribute('class', 'labelend shapeLabel');
         return svgEl;
     }
@@ -627,15 +669,16 @@ define(function() {
         /**
          * Line constructor. Class to represent the different types of drop zone shapes.
          *
-         * @param {String} [labelstart] start label of a line.
          * @param {int} [x1] centre X1.
          * @param {int} [y1] centre Y1.
          * @param {int} [startRadius] startRadius.
-         * @param {String} [labelend] end label of a line.
          * @param {int} [x2] centre X2.
          * @param {int} [y2] centre Y2.
          * @param {int} [endRadius] endRadius.
          * @param {String} [lineType] Line type.
+         * @param {String} [labelstart] start label of a line.
+         * @param {String} [labelmiddle] middle label of a line.
+         * @param {String} [labelend] end label of a line.
          * @constructor
          */
         Line: Line,
@@ -652,20 +695,21 @@ define(function() {
         /**
          * Make a line of the given type.
          *
-         * @param {Array} linecoordinates in the format (x,y;radius).
-         * @param {Array} labels Start and end labels of a line.
-         * @param {String} lineType The linetype (e.g., linesinglearrow, linedoublearrows, ...).
+         * @param {Array} [linecoordinates] in the format (x,y;radius).
+         * @param {String} [lineType] The linetype (e.g., linesinglearrow, linedoublearrows, ...).
+         * @param {Array} [labels] Start, middle and end labels of a line.
          * @return {Line} the new line.
          */
-        make: function(linecoordinates, labels, lineType) {
+        make: function(linecoordinates, lineType, labels) {
             // Line coordinates are in the format (x,y;radius).
             var startcoordinates = linecoordinates[0].split(';');
             var endcoordinates = linecoordinates[1].split(';');
             var linestartbits = startcoordinates[0].split(',');
             var lineendbits = endcoordinates[0].split(',');
 
-            return new Line(labels[0], parseInt(linestartbits[0]), parseInt(linestartbits[1]), parseInt(startcoordinates[1]),
-                labels[1], parseInt(lineendbits[0]), parseInt(lineendbits[1]), parseInt(endcoordinates[1]), lineType);
+            return new Line(parseInt(linestartbits[0]), parseInt(linestartbits[1]), parseInt(startcoordinates[1]),
+                parseInt(lineendbits[0]), parseInt(lineendbits[1]), parseInt(endcoordinates[1]), lineType,
+                labels[0], labels[1], labels[2]);
         },
 
         /**
@@ -676,8 +720,9 @@ define(function() {
          * @return {line} the similar line of a different linetype.
          */
         getSimilar: function(lineType, line) {
-            return new Line(line.labelstart, parseInt(line.x1), parseInt(line.y1), parseInt(line.startRadius),
-                line.labelend, parseInt(line.x2), parseInt(line.y2), parseInt(line.endRadius), lineType);
+            return new Line(parseInt(line.x1), parseInt(line.y1), parseInt(line.startRadius),
+                parseInt(line.x2), parseInt(line.y2), parseInt(line.endRadius), lineType,
+                line.labelstart, line.labelmiddle, line.labelend);
         }
     };
 });

amd/build/line.min.js

@@ -152,16 +152,16 @@ define([
                 endcoordinates = coords[1] + ';10';
                 this.lines[line] = Line.make(
                     [startcoordinates, endcoordinates],
-                    [questionLines[line].labelstart, questionLines[line].labelend],
-                    questionLines[line].type
+                    questionLines[line].type,
+                    [questionLines[line].labelstart, questionLines[line].labelmiddle, questionLines[line].labelend]
                 );
                 this.addToSvg(line, dropzoneSvg);
             } else {
                 // Need to be added to draghomeSvg.
                 this.lines[line] = Line.make(
                     [startcoordinates, endcoordinates],
-                    [questionLines[line].labelstart, questionLines[line].labelend],
-                    questionLines[line].type
+                    questionLines[line].type,
+                    [questionLines[line].labelstart, questionLines[line].labelmiddle, questionLines[line].labelend]
                 );
                 this.addToSvg(line, draghomeSvg);
             }

amd/build/line.min.js.map

@@ -57,6 +57,18 @@ Feature: Test editing an draw lines question
     And I press "id_submitbutton"
     Then I should see "Drawline edited"
 
+  @javascript
+  Scenario: Editing DrawLines question labels should rellect in svg
+    Given I am on the "Drawlines to edit" "core_question > edit" page logged in as teacher
+    And I should see "Editing a Draw lines question"
+    And I expand all fieldsets
+    When I set the field "id_labelstart_0" to "new label start"
+    And I set the field "id_labelmiddle_0" to "new label middle"
+    And I set the field "id_labelend_0" to "new label end"
+    Then "//*[name()='svg']/*[name()='g' and @data-dropzone-no='0']/*[name()='text'][1][contains(text(), 'new label start')]" "xpath_element" should exist
+    And "//*[name()='svg']/*[name()='g' and @data-dropzone-no='0']/*[name()='text'][2][contains(text(), 'new label middle')]" "xpath_element" should exist
+    And "//*[name()='svg']/*[name()='g' and @data-dropzone-no='0']/*[name()='text'][3][contains(text(), 'new label end')]" "xpath_element" should exist
+
   @javascript @_file_upload
   Scenario: Validate the background image size for Draw lines question
     Given I am on the "Drawlines to edit" "core_question > edit" page logged in as teacher