Quiz exercises: Fix apollon drag-and-drop quiz generation (#12559)

Co-authored-by: tamang29 <tamangravi01@gmail.com>
Co-authored-by: Ravi Tamang <40029376+tamang29@users.noreply.github.com>
Co-authored-by: Stephan Krusche <krusche@tum.de>
Co-authored-by: Felix T.J. Dietrich <felix_dietrich@gmx.de>

Author: 4 people

src/main/webapp/app/modeling/shared/apollon-model.util.ts

@@ -32,6 +32,10 @@ export interface ApollonModelData {
     // v3 format (legacy)
     elements?: Record<string, V3Element>;
     relationships?: Record<string, V3Element>;
+    interactive?: {
+        elements?: Record<string, boolean>;
+        relationships?: Record<string, boolean>;
+    };
 }
 
 /**
@@ -115,6 +119,43 @@ export function getModelElementIds(model: UMLModel | ApollonModelData | undefine
     return new Set([...nodeIds, ...edgeIds]);
 }
 
+export function hasExplicitInteractiveConfig(model: UMLModel | ApollonModelData | undefined): boolean {
+    return !!(model as ApollonModelData | undefined)?.interactive;
+}
+
+export function getExplicitInteractiveElementIds(model: UMLModel | ApollonModelData | undefined): string[] | undefined {
+    if (!model) {
+        return undefined;
+    }
+
+    const interactive = (model as ApollonModelData).interactive;
+    if (!interactive) {
+        return undefined;
+    }
+
+    const validIds = getModelElementIds(model);
+    const elementIds = Object.entries(interactive.elements ?? {})
+        .filter(([id, included]) => included && validIds.has(id))
+        .map(([id]) => id);
+    const relationshipIds = Object.entries(interactive.relationships ?? {})
+        .filter(([id, included]) => included && validIds.has(id))
+        .map(([id]) => id);
+
+    return [...elementIds, ...relationshipIds];
+}
+
+export function getQuizRelevantElementIds(model: UMLModel | ApollonModelData | undefined): string[] {
+    if (!model) {
+        return [];
+    }
+
+    if (hasExplicitInteractiveConfig(model)) {
+        return getExplicitInteractiveElementIds(model) ?? [];
+    }
+
+    return [...getModelElementIds(model)];
+}
+
 /**
  * Checks if an Apollon model has elements (nodes).
  * This is the inverse of isModelEmpty for convenience.
@@ -125,3 +166,7 @@ export function getModelElementIds(model: UMLModel | ApollonModelData | undefine
 export function hasModelElements(model: UMLModel | ApollonModelData | undefined): boolean {
     return getModelNodes(model).length > 0;
 }
+
+export function hasQuizRelevantElements(model: UMLModel | ApollonModelData | undefined): boolean {
+    return getQuizRelevantElementIds(model).length > 0;
+}

src/main/webapp/app/quiz/manage/apollon-diagrams/detail/apollon-diagram-detail.component.spec.ts

@@ -24,6 +24,66 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import * as SVGRendererAPI from 'app/quiz/manage/apollon-diagrams/exercise-generation/svg-renderer';
 import { AUTOSAVE_EXERCISE_INTERVAL } from 'app/shared/constants/exercise-exam-constants';
 
+function setupCanvasAndImageMocks() {
+    const createMockCanvas = () => {
+        const mockContext = {
+            drawImage: vi.fn(),
+            fillStyle: '',
+            fillRect: vi.fn(),
+            scale: vi.fn(),
+            globalCompositeOperation: 'source-over',
+        };
+
+        return {
+            style: { width: '', height: '' },
+            getContext: vi.fn().mockReturnValue(mockContext),
+            toBlob: vi.fn((callback: (blob: Blob | null) => void) => callback(new Blob(['PNG'], { type: 'image/png' }))),
+            width: 0,
+            height: 0,
+        } as unknown as HTMLCanvasElement;
+    };
+
+    const originalCreateElement = document.createElement.bind(document);
+    const createElementSpy = vi.spyOn(document, 'createElement').mockImplementation((tagName: string) => {
+        if (tagName === 'canvas') {
+            return createMockCanvas();
+        }
+        return originalCreateElement(tagName);
+    });
+
+    const originalImage = globalThis.Image;
+    class MockImage {
+        width = 100;
+        height = 100;
+        private _src = '';
+        onload: (() => void) | null = null;
+        onerror: ((error: Event | string) => void) | null = null;
+
+        get src() {
+            return this._src;
+        }
+
+        set src(value: string) {
+            this._src = value;
+            setTimeout(() => this.onload?.(), 0);
+        }
+    }
+
+    vi.stubGlobal('Image', MockImage as any);
+    const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test-url');
+    const revokeObjectURLSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined);
+
+    return {
+        cleanup: () => {
+            createElementSpy.mockRestore();
+            createObjectURLSpy.mockRestore();
+            revokeObjectURLSpy.mockRestore();
+            vi.unstubAllGlobals();
+            globalThis.Image = originalImage;
+        },
+    };
+}
+
 /**
  * RUTHLESS TEST SUITE: ApollonDiagramDetailComponent
  *
@@ -45,6 +105,7 @@ describe('ApollonDiagramDetail Component', () => {
     let courseService: CourseManagementService;
     let fixture: ComponentFixture<ApollonDiagramDetailComponent>;
     let alertService: AlertService;
+    let cleanupCanvasAndImageMocks: (() => void) | undefined;
 
     const course: Course = { id: 123 } as Course;
     const diagram: ApollonDiagram = new ApollonDiagram(UMLDiagramType.ClassDiagram, course.id!);
@@ -60,9 +121,6 @@ describe('ApollonDiagramDetail Component', () => {
         }),
     };
 
-    globalThis.URL.createObjectURL = vi.fn(() => 'blob:test-url');
-    globalThis.URL.revokeObjectURL = vi.fn();
-
     beforeEach(async () => {
         const route = {
             params: of({ id: 1, courseId: 123 }),
@@ -112,9 +170,12 @@ describe('ApollonDiagramDetail Component', () => {
             clip: { x: 0, y: 0, width: 100, height: 100 },
         });
         vi.spyOn(SVGRendererAPI, 'convertRenderedSVGToPNG').mockResolvedValue(new Blob(['PNG']));
+        cleanupCanvasAndImageMocks = setupCanvasAndImageMocks().cleanup;
     });
 
     afterEach(() => {
+        cleanupCanvasAndImageMocks?.();
+        cleanupCanvasAndImageMocks = undefined;
         vi.restoreAllMocks();
         vi.useRealTimers();
     });
@@ -201,7 +262,7 @@ describe('ApollonDiagramDetail Component', () => {
                     ...testClassDiagramV3,
                     interactive: {
                         elements: {},
-                        relationships: { 'rel-1': true },
+                        relationships: { '5a9a4eb3-8281-4de4-b0f2-3e2f164574bd': true },
                     },
                 } as unknown as UMLModel;
 

src/main/webapp/app/quiz/manage/apollon-diagrams/detail/apollon-diagram-detail.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, ElementRef, NgZone, OnDestroy, OnInit, inject, input, output, signal, viewChild } from '@angular/core';
-import { ApollonEditor, ApollonMode, Locale, UMLModel } from '@tumaet/apollon';
+import { ApollonEditor, ApollonMode, ApollonView, Locale, UMLModel, importDiagram } from '@tumaet/apollon';
 import { NgbModal, NgbModalRef, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { convertRenderedSVGToPNG } from '../exercise-generation/svg-renderer';
 import { ApollonDiagramService } from 'app/quiz/manage/apollon-diagrams/services/apollon-diagram.service';
@@ -18,6 +18,7 @@ import { FormsModule, NgModel } from '@angular/forms';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
+import { hasQuizRelevantElements } from 'app/modeling/shared/apollon-model.util';
 
 @Component({
     selector: 'jhi-apollon-diagram-detail',
@@ -48,6 +49,7 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
 
     apollonDiagram = signal<ApollonDiagram | undefined>(undefined);
     apollonEditor?: ApollonEditor;
+    private lastSavedModelJson = '';
 
     isSaved = true;
 
@@ -64,24 +66,7 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
      * v4 format: model.nodes/edges are arrays - in v4 ALL elements are considered interactive
      */
     get hasInteractive(): boolean {
-        if (!this.apollonEditor) {
-            return false;
-        }
-        const model = this.apollonEditor.model as any;
-
-        // v3 format: check interactive.elements/relationships
-        if (model.interactive) {
-            const elements = model.interactive.elements ?? {};
-            const relationships = model.interactive.relationships ?? {};
-            return Object.values(elements).some(Boolean) || Object.values(relationships).some(Boolean);
-        }
-
-        // v4 format: nodes and edges are ARRAYS - if there are any elements, they're interactive
-        if (Array.isArray(model.nodes)) {
-            return model.nodes.length > 0 || (model.edges?.length ?? 0) > 0;
-        }
-
-        return false;
+        return hasQuizRelevantElements(this.apollonEditor?.model);
     }
 
     /** Whether some elements are selected in the apollon editor. */
@@ -114,7 +99,8 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
 
                 this.apollonDiagram.set(diagram);
 
-                const model: UMLModel = diagram.jsonRepresentation ? JSON.parse(diagram.jsonRepresentation) : undefined;
+                const model: UMLModel | undefined = diagram.jsonRepresentation ? importDiagram(JSON.parse(diagram.jsonRepresentation)) : undefined;
+                this.lastSavedModelJson = model ? JSON.stringify(model) : '';
                 this.initializeApollonEditor(model);
                 this.setAutoSaveTimer();
             },
@@ -141,26 +127,30 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
      * Initializes Apollon Editor with UML Model
      * @param initialModel
      */
-    initializeApollonEditor(initialModel: UMLModel) {
+    initializeApollonEditor(initialModel?: UMLModel) {
         if (this.apollonEditor) {
             this.apollonEditor.destroy();
         }
 
         const diagram = this.apollonDiagram();
-        this.apollonEditor = new ApollonEditor(this.editorContainer().nativeElement, {
+        const editorOptions = {
             mode: ApollonMode.Modelling,
+            view: ApollonView.Modelling,
+            readonly: false,
             model: initialModel,
             type: diagram?.diagramType,
             locale: this.translateService.getCurrentLang() as Locale,
-        });
+            availableViews: [ApollonView.Modelling, ApollonView.Highlight],
+        } as ConstructorParameters<typeof ApollonEditor>[1];
+        this.apollonEditor = new ApollonEditor(this.editorContainer().nativeElement, editorOptions);
         // Expose the ApollonEditor instance on the host DOM element for E2E test access.
         (this.elementRef.nativeElement as any).__apollonEditor = this.apollonEditor;
         // Wrap callback in NgZone.run() because Apollon's React/Zustand store fires outside Angular's zone.
         // Without this, programmatic model updates (e.g., from E2E tests) don't trigger change detection,
         // leaving template bindings like [disabled]="!hasInteractive" stale.
         this.apollonEditor.subscribeToModelChange((newModel) => {
             this.ngZone.run(() => {
-                this.isSaved = JSON.stringify(newModel) === this.apollonDiagram()?.jsonRepresentation;
+                this.isSaved = JSON.stringify(newModel) === this.lastSavedModelJson;
                 this.changeDetectorRef.markForCheck();
             });
         });
@@ -181,6 +171,8 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
         const result = await lastValueFrom(this.apollonDiagramService.update(updatedDiagram, this.courseId()));
         if (result?.ok) {
             this.alertService.success('artemisApp.apollonDiagram.updated', { title: this.apollonDiagram()?.title });
+            this.lastSavedModelJson = JSON.stringify(umlModel);
+            this.apollonDiagram.set(updatedDiagram);
             this.isSaved = true;
             this.setAutoSaveTimer();
             return true;
@@ -273,6 +265,7 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
         const svg = await this.apollonEditor.exportAsSVG({
             keepOriginalSize: !this.crop,
             include: selection,
+            svgMode: 'compat',
         });
         const png = await convertRenderedSVGToPNG(svg);
         this.download(png);