@citolab/qti-components 7.6.0 → 7.9.0

package/dist/chunks/{chunk-GG4NR5OR.js → chunk-4QSZJYSB.js}

@@ -1,6 +1,6 @@
 import {
   item_default
-} from "./chunk-LSEB52SP.js";
+} from "./chunk-PT5ASWGQ.js";
 import {
   watch
 } from "./chunk-ELDMXTUQ.js";
@@ -362,4 +362,4 @@ export {
   ItemShowCorrectResponse,
   QtiItem
 };
-//# sourceMappingURL=chunk-GG4NR5OR.js.map
+//# sourceMappingURL=chunk-4QSZJYSB.js.map

package/dist/chunks/{chunk-G7ZPPP7O.js → chunk-7YO5JFT3.js}

@@ -3,7 +3,7 @@ import {
   convertNumberToUniversalFormat,
   liveQuery,
   removeDoubleSlashes
-} from "./chunk-2WTHXWS3.js";
+} from "./chunk-YD7FVKDP.js";
 import {
   watch
 } from "./chunk-ELDMXTUQ.js";
@@ -744,6 +744,9 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       // Last touch target
       this.currentDropTarget = null;
       // Current droppable element
+      this.onMove = this.handleTouchMove.bind(this);
+      this.onEnd = this.handleTouchEnd.bind(this);
+      this.onCancel = this.handleTouchCancel.bind(this);
       this.MIN_DRAG_DISTANCE = 5;
       // Minimum pixel movement to start dragging
       this.DRAG_CLONE_OPACITY = 1;
@@ -852,11 +855,11 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       if (this.isMatchTabular()) return;
       const disabled = this.hasAttribute("disabled");
       if (!disabled) {
-        document.addEventListener("touchmove", this.handleTouchMove.bind(this), { passive: false });
-        document.addEventListener("mousemove", this.handleTouchMove.bind(this), { passive: false });
-        document.addEventListener("touchend", this.handleTouchEnd.bind(this), { passive: false });
-        document.addEventListener("mouseup", this.handleTouchEnd.bind(this), { passive: false });
-        document.addEventListener("touchcancel", this.handleTouchCancel.bind(this), { passive: false });
+        document.addEventListener("mousemove", this.onMove, { passive: false });
+        document.addEventListener("mouseup", this.onEnd, { passive: false });
+        document.addEventListener("touchmove", this.onMove, { passive: false });
+        document.addEventListener("touchend", this.onEnd, { passive: false });
+        document.addEventListener("touchcancel", this.onCancel, { passive: false });
       }
       const draggables = Array.from(this.querySelectorAll(draggablesSelector) || []).concat(
         Array.from(this.shadowRoot?.querySelectorAll(draggablesSelector) || [])
@@ -995,11 +998,11 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
         this.resizeObserver.disconnect();
         this.resizeObserver = null;
       }
-      document.removeEventListener("touchmove", this.handleTouchMove);
-      document.removeEventListener("mousemove", this.handleTouchMove);
-      document.removeEventListener("touchend", this.handleTouchEnd);
-      document.removeEventListener("mouseup", this.handleTouchEnd);
-      document.removeEventListener("touchcancel", this.handleTouchCancel);
+      document.removeEventListener("mousemove", this.onMove);
+      document.removeEventListener("mouseup", this.onEnd);
+      document.removeEventListener("touchmove", this.onMove);
+      document.removeEventListener("touchend", this.onEnd);
+      document.removeEventListener("touchcancel", this.onCancel);
     }
     handleTouchMove(e) {
       if (this.isMatchTabular()) return;
@@ -1031,7 +1034,7 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
     }
     handleTouchEnd(e) {
       if (this.isMatchTabular()) return;
-      if (this.isDragging) {
+      if (this.isDragging || this.isDraggable || this.dragClone) {
         this.resetDragState();
       }
       this._internals.states.delete("--dragzone-active");
@@ -1285,30 +1288,38 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       const yDist = Math.abs(touch.clientY - this.touchStartPoint.y);
       return xDist + yDist;
     }
+    getDropzoneRect(el) {
+      const slot = el.shadowRoot?.querySelector('slot[part="dropslot"]');
+      return (slot ?? el).getBoundingClientRect();
+    }
     findClosestDropzone() {
-      const allActiveDropzones = this.allDropzones.filter((d) => !d.hasAttribute("disabled"));
-      if (!this.dragClone || allActiveDropzones.length === 0) return null;
+      const activeDrops = this.allDropzones.filter((d) => !d.hasAttribute("disabled"));
+      if (!this.dragClone || activeDrops.length === 0) return null;
       const dragRect = this.dragClone.getBoundingClientRect();
       let closestDropzone = null;
-      let maxOverlapArea = 0;
-      for (const dropzone of allActiveDropzones) {
-        const dropRect = dropzone.getBoundingClientRect();
-        const overlapArea = this.calculateOverlapArea(dragRect, dropRect);
-        if (overlapArea > maxOverlapArea) {
-          maxOverlapArea = overlapArea;
-          closestDropzone = dropzone;
+      let maxArea = 0;
+      const prefer = (elements) => {
+        for (const dz of elements) {
+          const dzRect = this.getDropzoneRect(dz);
+          const area = this.calculateOverlapArea(dragRect, dzRect);
+          if (area > maxArea) {
+            maxArea = area;
+            closestDropzone = dz;
+          }
         }
+      };
+      prefer(this.droppables.filter((droppable) => !droppable.hasAttribute("disabled")));
+      if (!closestDropzone) {
+        prefer(this.dragContainers.filter((drags) => !drags.hasAttribute("disabled")));
       }
       if (!closestDropzone) {
-        let minDistance = 200;
-        for (const dropzone of allActiveDropzones) {
-          const dropRect = dropzone.getBoundingClientRect();
-          const distance = Math.sqrt(
-            Math.pow(dragRect.left - dropRect.left, 2) + Math.pow(dragRect.top - dropRect.top, 2)
-          );
-          if (distance < minDistance) {
-            minDistance = distance;
-            closestDropzone = dropzone;
+        let minDist = Number.POSITIVE_INFINITY;
+        for (const dz of activeDrops) {
+          const dzRect = this.getDropzoneRect(dz);
+          const dist = Math.hypot(dragRect.left - dzRect.left, dragRect.top - dzRect.top);
+          if (dist < minDist) {
+            minDist = dist;
+            closestDropzone = dz;
           }
         }
       }
@@ -1453,6 +1464,15 @@ var qti_associate_interaction_styles_default = css4`
     gap: 0.5rem;
   }
 
+  [part='drop-list'][active] {
+    border-color: var(--qti-border-active) !important;
+    background-color: var(--qti-bg-active) !important;
+  }
+
+  [part='drop-list'][enabled] {
+    background-color: var(--qti-bg-active) !important;
+  }
+
   :host::part(associables-container) {
     display: flex;
     padding: 0.5rem;
@@ -3142,11 +3162,13 @@ import { css as css15 } from "lit";
 var qti_hotspot_interaction_styles_default = css15`
   slot:not([name='prompt']) {
     position: relative; /* qti-hotspot-choice relative to the slot */
-    display: block;
+    display: inline-block;
     width: fit-content; /* hotspots not stretching further if image is at max size */
+    line-height: 0; /* remove gaps below image */
   }
   ::slotted(img) {
     /* image not selectable anymore */
+    display: block;
     pointer-events: none;
     user-select: none;
     /* width:100%; */
@@ -3155,19 +3177,40 @@ var qti_hotspot_interaction_styles_default = css15`
 
 // src/lib/qti-components/qti-interaction/qti-hotspot-interaction/qti-hotspot-interaction.ts
 var QtiHotspotInteraction = class extends ChoicesMixin(Interaction, "qti-hotspot-choice") {
+  constructor() {
+    super(...arguments);
+    this.imageLoadPromise = null;
+  }
   render() {
     return html18`
       <slot name="prompt"></slot>
       <slot></slot>
     `;
   }
-  positionHotspotOnRegister(e) {
+  getImageLoadPromise(img) {
+    if (!this.imageLoadPromise) {
+      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+        this.imageLoadPromise = Promise.resolve(img);
+      } else {
+        this.imageLoadPromise = new Promise((resolve) => {
+          const handler = () => {
+            img.removeEventListener("load", handler);
+            resolve(img);
+          };
+          img.addEventListener("load", handler);
+        });
+      }
+    }
+    return this.imageLoadPromise;
+  }
+  async positionHotspotOnRegister(e) {
     const img = this.querySelector("img");
     const hotspot = e.target;
     const coords = hotspot.getAttribute("coords");
     const shape = hotspot.getAttribute("shape");
     const coordsNumber = coords.split(",").map((s) => parseInt(s));
-    positionShapes(shape, coordsNumber, img, hotspot);
+    const loadedImg = await this.getImageLoadPromise(img);
+    positionShapes(shape, coordsNumber, loadedImg, hotspot);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -3882,6 +3925,15 @@ var qti_order_interaction_styles_default = css22`
     flex: 1;
   }
 
+  [part='drop-list'][active] {
+    border-color: var(--qti-border-active) !important;
+    background-color: var(--qti-bg-active) !important;
+  }
+
+  [part='drop-list'][enabled] {
+    background-color: var(--qti-bg-active) !important;
+  }
+
   [part='container'] {
     display: flex;
     gap: 0.5rem;
@@ -8761,4 +8813,4 @@ export {
   QtiOutcomeDeclaration,
   QtiResponseDeclaration
 };
-//# sourceMappingURL=chunk-G7ZPPP7O.js.map
+//# sourceMappingURL=chunk-7YO5JFT3.js.map