@qti-editor/interaction-select-point 0.1.0 → 0.2.0

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"qti-select-point-interaction.commands.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.commands.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,OA0B1C,CAAC"}
+{"version":3,"file":"qti-select-point-interaction.commands.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.commands.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGjD;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,OA0B1C,CAAC"}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.commands.js

@@ -1,8 +1,9 @@
 import { createInsertBlockInteractionCommand } from '@qti-editor/interaction-shared/commands/insert.js';
+import { translateQti } from '@qti-editor/interaction-shared';
 /**
  * Command to insert a select point interaction at the current selection.
  */
-export const insertSelectPointInteraction = (state, dispatch) => {
+export const insertSelectPointInteraction = (state, dispatch, view) => {
     return createInsertBlockInteractionCommand({
         createNode: currentState => {
             const { schema } = currentState;
@@ -12,7 +13,7 @@ export const insertSelectPointInteraction = (state, dispatch) => {
             const imgSelectPointType = schema.nodes.imgSelectPoint;
             if (!interactionType || !promptType || !promptParagraphType || !imgSelectPointType)
                 return null;
-            const prompt = promptType.create(null, promptParagraphType.create(null, schema.text('Mark the correct point on the image.')));
+            const prompt = promptType.create(null, promptParagraphType.create(null, schema.text(translateQti('prompt.selectPoint.default', { target: view?.dom ?? null }))));
             const imgSelectPoint = imgSelectPointType.create();
             return interactionType.create({
                 responseIdentifier: `RESPONSE_${crypto.randomUUID()}`,

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.d.ts

@@ -20,16 +20,19 @@ export declare class QtiSelectPointInteractionEdit extends Interaction {
     #private;
     static styles: CSSResultGroup;
     areaMappings: string;
-    protected drawMode: DrawMode;
-    protected imageReady: boolean;
-    protected imageSrc: string | null;
-    protected imageAlt: string | null;
-    protected imageWidth: number | null;
-    protected imageHeight: number | null;
-    protected areaEntries: AreaMappingEntry[];
-    protected draft: DraftShape | null;
-    protected sourceError: string | null;
+    private _cursorInside;
+    drawMode: DrawMode;
+    imageReady: boolean;
+    imageSrc: string | null;
+    imageAlt: string | null;
+    imageWidth: number | null;
+    imageHeight: number | null;
+    areaEntries: AreaMappingEntry[];
+    draft: DraftShape | null;
+    sourceError: string | null;
+    private _onSelectionChange;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): TemplateResult<1>;

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"qti-select-point-interaction.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1D,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEnC,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAsBF,qBAAa,6BAA8B,SAAQ,WAAW;;IAC5D,OAAgB,MAAM,EAAE,cAAc,CAsFpC;IAGF,YAAY,SAAQ;IAGpB,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAY;IAGxC,SAAS,CAAC,UAAU,UAAS;IAG7B,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGzC,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGzC,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG3C,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5C,SAAS,CAAC,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAG/C,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAQ;IAG1C,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQnC,iBAAiB,IAAI,IAAI;IAKzB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA6fxE,MAAM;CA8DhB"}
+{"version":3,"file":"qti-select-point-interaction.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1D,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEnC,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAsBF,qBAAa,6BAA8B,SAAQ,WAAW;;IAC5D,OAAgB,MAAM,EAAE,cAAc,CAsFpC;IAGF,YAAY,SAAQ;IAGpB,OAAO,CAAC,aAAa,CAAS;IAG9B,QAAQ,EAAE,QAAQ,CAAY;IAG9B,UAAU,UAAS;IAGnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG/B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGjC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGlC,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAGrC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAQ;IAGhC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQlC,OAAO,CAAC,kBAAkB,CAMxB;IAEO,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA8fxE,MAAM;CA+DhB"}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.js

@@ -25,6 +25,7 @@ export class QtiSelectPointInteractionEdit extends Interaction {
         super(...arguments);
         _QtiSelectPointInteractionEdit_instances.add(this);
         this.areaMappings = '[]';
+        this._cursorInside = false;
         this.drawMode = 'select';
         this.imageReady = false;
         this.imageSrc = null;
@@ -39,6 +40,13 @@ export class QtiSelectPointInteractionEdit extends Interaction {
         _QtiSelectPointInteractionEdit_activePointerId.set(this, null);
         _QtiSelectPointInteractionEdit_shapeDrag.set(this, null);
         _QtiSelectPointInteractionEdit_fileInputRef.set(this, createRef());
+        this._onSelectionChange = () => {
+            const sel = document.getSelection();
+            const inside = sel ? this.contains(sel.anchorNode) : false;
+            if (inside !== this._cursorInside) {
+                this._cursorInside = inside;
+            }
+        };
         _QtiSelectPointInteractionEdit_onImageLoad.set(this, (event) => {
             const img = event.currentTarget;
             __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_imageElement, img, "f");
@@ -53,6 +61,11 @@ export class QtiSelectPointInteractionEdit extends Interaction {
     connectedCallback() {
         super.connectedCallback();
         __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_syncAreaEntriesFromAttribute).call(this);
+        document.addEventListener('selectionchange', this._onSelectionChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('selectionchange', this._onSelectionChange);
     }
     firstUpdated() {
         __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_ensureChildSlots).call(this);
@@ -69,41 +82,44 @@ export class QtiSelectPointInteractionEdit extends Interaction {
         return html `
       <slot name="prompt"></slot>
 
-      <div class="toolbar">
-        ${this.imageSrc
+      ${this._cursorInside ? html `
+        <div class="toolbar" @mousedown=${(e) => e.preventDefault()}>
+          ${this.imageSrc
             ? html `
-              <button
-                type="button"
-                aria-pressed=${this.drawMode === 'select'}
-                @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'select')}
-              >
-                Select
-              </button>
-              <button
-                type="button"
-                aria-pressed=${this.drawMode === 'circle'}
-                @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'circle')}
-              >
-                Circle
-              </button>
-              <button
-                type="button"
-                aria-pressed=${this.drawMode === 'rect'}
-                @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'rect')}
-              >
-                Rect
-              </button>
-              <button type="button" class="danger" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_clearMappings)}>Clear mappings</button>
-              <button type="button" class="danger" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_removeImage)}>Remove image</button>
-            `
+                <button
+                  type="button"
+                  aria-pressed=${this.drawMode === 'select'}
+                  @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'select')}
+                >
+                  Select
+                </button>
+                <button
+                  type="button"
+                  aria-pressed=${this.drawMode === 'circle'}
+                  @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'circle')}
+                >
+                  Circle
+                </button>
+                <button
+                  type="button"
+                  aria-pressed=${this.drawMode === 'rect'}
+                  @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'rect')}
+                >
+                  Rect
+                </button>
+                <button type="button" class="danger" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_clearMappings)}>Clear mappings</button>
+                <button type="button" class="danger" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_removeImage)}>Remove image</button>
+              `
             : html `
-              <button type="button" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_pasteImageFromClipboard)}>Paste URL</button>
-              <button type="button" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_openFilePicker)}>Upload image</button>
-              <input ${ref(__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_fileInputRef, "f"))} type="file" accept="image/*" @change=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onFileChange)} />
-            `}
-      </div>
+                <button type="button" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_pasteImageFromClipboard)}>Paste URL</button>
+                <button type="button" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_openFilePicker)}>Upload image</button>
+              `}
+        </div>
+        ${this.sourceError ? html `<p class="meta" style="color:#b91c1c; margin-top:0;">${this.sourceError}</p>` : nothing}
+        <div class="meta">Mappings: ${this.areaEntries.length} | mode: ${this.drawMode}</div>
+      ` : nothing}
 
-      ${this.sourceError ? html `<p class="meta" style="color:#b91c1c; margin-top:0;">${this.sourceError}</p>` : nothing}
+      <input ${ref(__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_fileInputRef, "f"))} type="file" accept="image/*" @change=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onFileChange)} />
 
       <div
         class="surface"
@@ -120,8 +136,6 @@ export class QtiSelectPointInteractionEdit extends Interaction {
             `
             : nothing}
       </div>
-
-      <div class="meta">Mappings: ${this.areaEntries.length} | mode: ${this.drawMode}</div>
     `;
     }
 }
@@ -270,6 +284,7 @@ _QtiSelectPointInteractionEdit_imageElement = new WeakMap(), _QtiSelectPointInte
         y: Math.max(0, Math.min(originalHeight, y)),
     };
 }, _QtiSelectPointInteractionEdit_onPointerDown = function _QtiSelectPointInteractionEdit_onPointerDown(event) {
+    this._cursorInside = true;
     if (!this.imageReady || !this.imageSrc)
         return;
     const point = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_toOriginalCoords).call(this, event.clientX, event.clientY);
@@ -618,6 +633,9 @@ QtiSelectPointInteractionEdit.styles = [
 __decorate([
     property({ type: String, attribute: 'area-mappings' })
 ], QtiSelectPointInteractionEdit.prototype, "areaMappings", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "_cursorInside", void 0);
 __decorate([
     state()
 ], QtiSelectPointInteractionEdit.prototype, "drawMode", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qti-editor/interaction-select-point",
   "description": "QTI select-point interaction schemas, components, commands, and composer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,14 +17,14 @@
   },
   "dependencies": {
     "@qti-components/select-point-interaction": "^1.0.1",
-    "@qti-editor/interfaces": "0.1.0",
-    "@qti-editor/interaction-shared": "0.1.0"
+    "@qti-editor/interaction-shared": "0.2.0",
+    "@qti-editor/interfaces": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "lit": "^3.3.1",
+    "lit": "^3.3.2",
     "prosemirror-model": "^1.25.4",
     "prosemirror-state": "^1.4.4"
   },