@citolab/qti-components 7.5.2 → 7.8.1

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

@@ -1,8 +1,9 @@
 import {
   QtiFeedback,
   convertNumberToUniversalFormat,
+  liveQuery,
   removeDoubleSlashes
-} from "./chunk-K47QFOQX.js";
+} from "./chunk-YD7FVKDP.js";
 import {
   watch
 } from "./chunk-ELDMXTUQ.js";
@@ -38,41 +39,6 @@ import {
 import { provide } from "@lit/context";
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-
-// src/lib/decorators/live-query.ts
-function liveQuery(querySelector, _options) {
-  let observer;
-  return (proto, decoratedFnName) => {
-    const { connectedCallback, disconnectedCallback } = proto;
-    proto.connectedCallback = function() {
-      connectedCallback.call(this);
-      const callback = (mutationList) => {
-        const elementsToWatch = Array.from(this.querySelectorAll(querySelector)).concat(
-          Array.from(this.shadowRoot?.querySelectorAll(querySelector) || [])
-        );
-        for (const mutation of mutationList) {
-          const addedNodes = Array.from(mutation.addedNodes).map((e) => e);
-          const removedNodes = Array.from(mutation.addedNodes).map((e) => e);
-          if (mutation.type === "childList" && addedNodes.find((n) => elementsToWatch.includes(n))) {
-            this[decoratedFnName](addedNodes, removedNodes);
-          }
-        }
-      };
-      observer = new MutationObserver(callback);
-      observer.observe(this, { childList: true, subtree: true });
-      const elementsAdded = Array.from(this.querySelectorAll(querySelector)).concat(
-        Array.from(this.shadowRoot?.querySelectorAll(querySelector) || [])
-      );
-      this[decoratedFnName](Array.from(elementsAdded), []);
-    };
-    proto.disconnectedCallback = function() {
-      disconnectedCallback.call(this);
-      observer.disconnect();
-    };
-  };
-}
-
-// src/lib/qti-components/qti-assessment-item/qti-assessment-item.ts
 var QtiAssessmentItem = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -778,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;
@@ -886,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) || [])
@@ -1029,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;
@@ -1065,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");
@@ -1319,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;
           }
         }
       }
@@ -1487,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;
@@ -3176,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%; */
@@ -3189,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();
@@ -3916,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;
@@ -8104,6 +8122,9 @@ function qtiSubtractMixin(Base) {
   };
 }
 
+// src/lib/qti-components/qti-response-processing/qti-expression/qti-subtract/index.ts
+customElements.define("qti-subtract", QtiSubtract);
+
 // src/lib/qti-components/qti-response-processing/qti-expression/qti-string-match/qti-string-match.ts
 import { property as property36 } from "lit/decorators.js";
 var QtiStringMatch = class extends QtiExpression {
@@ -8792,4 +8813,4 @@ export {
   QtiOutcomeDeclaration,
   QtiResponseDeclaration
 };
-//# sourceMappingURL=chunk-7RW7LCEJ.js.map
+//# sourceMappingURL=chunk-7YO5JFT3.js.map