Changes to fix the preview

moodleou · Jul 23, 2024 · 9fb7876 · 9fb7876
1 parent c065c3f
commit 9fb7876
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 48 deletions.
diff --git a/amd/build/Line.min.js b/amd/build/Line.min.js
diff --git a/amd/build/Line.min.js.map b/amd/build/Line.min.js.map
diff --git a/amd/build/question.min.js b/amd/build/question.min.js
diff --git a/amd/build/question.min.js.map b/amd/build/question.min.js.map
diff --git a/amd/src/Line.js b/amd/src/Line.js
@@ -360,21 +360,20 @@ define(function() {
      * @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
      * @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
      * @param {String} whichSVG The svg containing the drag.
-     * @param {int} lineNo The line number
      */
-    Line.prototype.moveDrags = function(dx, dy, maxX, maxY, whichSVG, lineNo) {
-        this.centre1.move(dx, dy);
-        this.centre2.move(dx, dy);
-        if (whichSVG === 'svgDropZones') {
+    Line.prototype.moveDrags = function(dx, dy, maxX, maxY, whichSVG) {
+        // If the drags are in the dragHomes then we want to keep the x coordinates fixed.
+        if (whichSVG === 'DragsSVG') {
+            // We don't want to move drags horizontally in this SVG.
+            this.centre1.move(0, dy);
+            this.centre2.move(0, dy);
             this.centre1.x = 50;
-            this.centre1.y = 25 + lineNo * 50;
             this.x1 = 50;
-            this.y1 = 25 + lineNo * 50;
             this.centre2.x = 200;
             this.x2 = 200;
-            this.centre2.y = 25 + lineNo * 50;
-            this.y2 = 25 + lineNo * 50;
         } else {
+            this.centre1.move(dx, dy);
+            this.centre2.move(dx, dy);
             if (this.centre1.x < this.startRadius) {
                 this.centre1.x = this.startRadius;
                 this.x1 = this.startRadius;
@@ -391,27 +390,27 @@ define(function() {
                 this.centre2.x = maxX - this.startRadius;
                 this.x2 = maxX - this.startRadius;
             }
-            if (this.centre1.y < this.endRadius) {
-                this.centre1.y = this.endRadius;
-                this.y1 = this.endRadius;
-            }
-            if (this.centre1.y > maxY - this.endRadius) {
-                this.centre1.y = maxY - this.endRadius;
-                this.y1 = maxY - this.endRadius;
-            }
-            if (this.centre2.y < this.endRadius) {
-                this.centre2.y = this.endRadius;
-                this.y2 = this.endRadius;
-            }
-            if (this.centre2.y > maxY - this.endRadius) {
-                this.centre2.y = maxY - this.endRadius;
-                this.y2 = maxY - this.endRadius;
-            }
+        }
+        if (this.centre1.y < this.endRadius) {
+            this.centre1.y = this.endRadius;
+            this.y1 = this.endRadius;
+        }
+        if (this.centre1.y > maxY - this.endRadius) {
+            this.centre1.y = maxY - this.endRadius;
+            this.y1 = maxY - this.endRadius;
+        }
+        if (this.centre2.y < this.endRadius) {
+            this.centre2.y = this.endRadius;
+            this.y2 = this.endRadius;
+        }
+        if (this.centre2.y > maxY - this.endRadius) {
+            this.centre2.y = maxY - this.endRadius;
+            this.y2 = maxY - this.endRadius;
         }
     };
 
     /**
-     * Move the g element to the dropzone.
+     * Move the g element between the dropzones and dragHomes.
      * @param {SVGElement} svgDrags Svg element containing the drags.
      * @param {SVGElement} svgDropZones Svg element containing the dropZone.
      * @param {SVGElement} selectedElement The element selected for dragging.
@@ -430,16 +429,20 @@ define(function() {
             selectedElement.getAttribute('data-dropzone-no');
 
             // Caluculate the position of line drop.
-            this.centre1.y = maxY - (2 * this.startRadius) - (dropzoneNo * 50);
-            this.y1 = maxY - (2 * this.startRadius) - (dropzoneNo * 50);
-            this.centre2.y = maxY - (2 * this.endRadius) - (dropzoneNo * 50);
-            this.y2 = maxY - (2 * this.endRadius) - (dropzoneNo * 50);
+            // this.centre1.y = maxY - (2 * this.startRadius) - (dropzoneNo * 50);
+            // this.y1 = maxY - (2 * this.startRadius) - (dropzoneNo * 50);
+            // this.centre2.y = maxY - (2 * this.endRadius) - (dropzoneNo * 50);
+            // this.y2 = maxY - (2 * this.endRadius) - (dropzoneNo * 50);
+            this.centre1.y = maxY - (2 * this.startRadius);
+            this.y1 = maxY - (2 * this.startRadius);
+            this.centre2.y = maxY - (2 * this.endRadius);
+            this.y2 = maxY - (2 * this.endRadius);
         } else if (this.isInsideSVG(svgDropZones, dropX, dropY)) {
             // Append the element to the first SVG (to ensure it stays in the same SVG if dropped there)
             svgDrags.appendChild(selectedElement);
 
             // We want to drop the lines from the top, depending on the line number.
-            // Caluculate the position of line drop.
+            // Calculate the position of line drop.
             this.centre1.x = 50;
             this.centre1.y = this.startRadius + (dropzoneNo * 50);
             this.y1 = this.startRadius + (dropzoneNo * 50);

diff --git a/amd/src/question.js b/amd/src/question.js
@@ -509,35 +509,44 @@ define([
             svgDropZones = document.querySelector('svg.dropzones'),
             maxX = svgDrags.width.baseVal.value,
             maxY = svgDrags.height.baseVal.value,
-            whichSVG = "";
+            whichSVG = "",
+            bgImage = document.querySelector('img.dropbackground');
 
         var selectedElement = this.lineSVGs[dropzoneNo];
         const dropX = e.clientX;
         const dropY = e.clientY;
 
         dragDrop.start(e, $(dragProxy), function(pageX, pageY) {
-            var svgDragsbBox = svgDrags.getBBox();
-            var svgDropZonesbBox = svgDropZones.getBBox();
 
             // Check if the drags need to be moved from one svg to another.
             // If true, the drag is moved from draghomes SVG to dropZone SVG.
-            if (movingDrag.lines[dropzoneNo].centre1.y === 10 && svgDragsbBox.y === 0) {
+            var closeTo = selectedElement.closest('svg');
+            var svgClass = closeTo.getAttribute('class');
+
+            // Moving the drags between the SVG's.
+            var isMoveFromDragsToDropzones = (svgClass === "drags") &&
+                (movingDrag.lines[dropzoneNo].centre1.y === 10);
+            var isMoveFromDropzonesToDrags = (svgClass === 'dropzones') &&
+                (movingDrag.lines[dropzoneNo].centre1.y > (bgImage.height - 20));
+            if (isMoveFromDragsToDropzones || isMoveFromDropzonesToDrags) {
                 movingDrag.lines[dropzoneNo].addToDropZone(svgDrags, svgDropZones, selectedElement,
                     dropX, dropY);
-                maxX = svgDropZones.width.baseVal.value;
-                maxY = svgDropZones.height.baseVal.value;
-                whichSVG = "svgDropZones";
-            } else if (movingDrag.lines[dropzoneNo].centre1.y === svgDropZonesbBox.y + 10) {
-                // Move drags from dropZone SVG to draghomes SVG.
-                movingDrag.lines[dropzoneNo].addToDropZone(svgDrags, svgDropZones, selectedElement,
-                    dropX, dropY);
-                whichSVG = "svgDrags";
             }
 
             // Drag the lines within the SVG
+            closeTo = selectedElement.closest('svg');
+            if (closeTo.getAttribute('class') === 'drags') {
+                maxX = svgDrags.width.baseVal.value;
+                maxY = svgDrags.height.baseVal.value;
+                whichSVG = "DragsSVG";
+            } else {
+                maxX = svgDropZones.width.baseVal.value;
+                maxY = svgDropZones.height.baseVal.value;
+                whichSVG = "DropZonesSVG";
+            }
             movingDrag.lines[dropzoneNo].moveDrags(
                 parseInt(pageX) - parseInt(lastX), parseInt(pageY) - parseInt(lastY),
-                parseInt(maxX), parseInt(maxY), whichSVG, dropzoneNo);
+                parseInt(maxX), parseInt(maxY), whichSVG);
             lastX = pageX;
             lastY = pageY;