[EGON-59]: Refactor Step to "Sentence"

WPS · Apr 5, 2024 · b3cdb03 · b3cdb03
1 parent 6f9ec54
commit b3cdb03
Show file tree

Hide file tree

Showing 15 changed files with 219 additions and 196 deletions.
diff --git a/egon_angular.sam b/egon_angular.sam
@@ -1751,14 +1751,14 @@
                     <Node>/Common/egon_angular/src/app/common/util/testHelpers.ts</Node>
                     <OtherNodes>
                       <ARRAY>
-                        <ELEMENT>/Replay/egon_angular/src/app/replay/domain/replayStep.ts</ELEMENT>
+                        <ELEMENT>/Replay/egon_angular/src/app/replay/domain/replaySentence.ts</ELEMENT>
                       </ARRAY>
                     </OtherNodes>
                     <GraphCommandKind>eTemporarilyPermitOutgoing</GraphCommandKind>
                     <Anchors>
                       <ARRAY>
                         <ELEMENT>ULCCCCCF/Common/egon_angular/src/app/common/util/testHelpers.ts</ELEMENT>
-                        <ELEMENT>ULCCCCCF/Replay/egon_angular/src/app/replay/domain/replayStep.ts</ELEMENT>
+                        <ELEMENT>ULCCCCCF/Replay/egon_angular/src/app/replay/domain/replaySentence.ts</ELEMENT>
                       </ARRAY>
                     </Anchors>
                   </OBJECT>
@@ -1911,14 +1911,14 @@
                     <Node>/StoryCreator/egon_angular/src/app/storyCreator/service/story-creator.service.ts</Node>
                     <OtherNodes>
                       <ARRAY>
-                        <ELEMENT>/Replay/egon_angular/src/app/replay/domain/replayStep.ts</ELEMENT>
+                        <ELEMENT>/Replay/egon_angular/src/app/replay/domain/replaySentence.ts</ELEMENT>
                       </ARRAY>
                     </OtherNodes>
                     <GraphCommandKind>eTemporarilyPermitOutgoing</GraphCommandKind>
                     <Anchors>
                       <ARRAY>
                         <ELEMENT>ULCCCCCF/StoryCreator/egon_angular/src/app/storyCreator/service/story-creator.service.ts</ELEMENT>
-                        <ELEMENT>ULCCCCCF/Replay/egon_angular/src/app/replay/domain/replayStep.ts</ELEMENT>
+                        <ELEMENT>ULCCCCCF/Replay/egon_angular/src/app/replay/domain/replaySentence.ts</ELEMENT>
                       </ARRAY>
                     </Anchors>
                   </OBJECT>

diff --git a/src/app/Domain/Replay/storyStep.ts → src/app/Domain/Replay/storySentence.ts b/src/app/Domain/Replay/storyStep.ts → src/app/Domain/Replay/storySentence.ts
@@ -1,6 +1,6 @@
 import { BusinessObject } from 'src/app/Domain/Common/businessObject';
 
-export interface StoryStep {
+export interface StorySentence {
   objects: BusinessObject[];
   highlightedObjects: string[];
 }
diff --git a/src/app/Presentation/Header/header-buttons.component.html b/src/app/Presentation/Header/header-buttons.component.html
@@ -79,10 +79,14 @@
   </button>
 </div>
 <div *ngIf="isReplay$ | async">
-  <button class="headerButton" title="Previous Step" (click)="previousStep()">
+  <button
+    class="headerButton"
+    title="Previous sentence"
+    (click)="previousSentence()"
+  >
     <span class="material-icons materialIconButton"> skip_previous </span>
   </button>
-  <button class="headerButton" title="NextStep" (click)="nextStep()">
+  <button class="headerButton" title="Next sentence" (click)="nextSentence()">
     <span class="material-icons materialIconButton"> skip_next </span>
   </button>
   <button class="headerButton" title="Stop replay" (click)="stopReplay()">

diff --git a/src/app/Presentation/Header/header-buttons.component.ts b/src/app/Presentation/Header/header-buttons.component.ts
@@ -190,12 +190,12 @@ export class HeaderButtonsComponent {
     this.replayService.stopReplay();
   }
 
-  previousStep(): void {
-    this.replayService.previousStep();
+  previousSentence(): void {
+    this.replayService.previousSentence();
   }
 
-  nextStep(): void {
-    this.replayService.nextStep();
+  nextSentence(): void {
+    this.replayService.nextSentence();
   }
 
   isExportable(): boolean {

diff --git a/src/app/Presentation/Header/header.component.html b/src/app/Presentation/Header/header.component.html
@@ -30,8 +30,8 @@
     </span>
 
     <span class="titleSpacer"></span>
-    <span title="Replay Step" *ngIf="isReplay$ | async">
-      Sentence: {{ stepDescription$ | async }}</span
+    <span title="Replay Sentence" *ngIf="isReplay$ | async">
+      Sentence: {{ sentenceDescription$ | async }}</span
     >
 
     <span class="buttonSpacer"></span>

diff --git a/src/app/Presentation/Header/header.component.ts b/src/app/Presentation/Header/header.component.ts
@@ -18,7 +18,7 @@ export class HeaderComponent {
   showDescription$ = this.titleService.showDescription$;
 
   isReplay$: Observable<boolean>;
-  stepDescription$: Observable<string>;
+  sentenceDescription$: Observable<string>;
   showDescription: Observable<boolean>;
 
   constructor(
@@ -29,10 +29,10 @@ export class HeaderComponent {
   ) {
     this.isReplay$ = this.replayStateService.replayOn$;
 
-    this.stepDescription$ = combineLatest([
-      this.replayService.currentStep$,
-      this.replayService.maxStepNumber$,
-    ]).pipe(map(([step, count]) => `${step}/${count}`));
+    this.sentenceDescription$ = combineLatest([
+      this.replayService.currentSentence$,
+      this.replayService.maxSentenceNumber$,
+    ]).pipe(map(([sentence, count]) => `${sentence}/${count}`));
 
     this.showDescription = this.titleService.showDescription$;
   }

diff --git a/src/app/Service/DomManipulation/dom-manipulation.service.spec.ts b/src/app/Service/DomManipulation/dom-manipulation.service.spec.ts
@@ -55,8 +55,8 @@ describe('DomManipulationService', () => {
     expect(elementRegistryServiceSpy.getAllConnections).toHaveBeenCalled();
   });
 
-  it('showStep', () => {
-    domManipulationService.showStep(preBuildTestStory(2)[1]);
+  it('showSentence', () => {
+    domManipulationService.showSentence(preBuildTestStory(2)[1]);
 
     expect(elementRegistryServiceSpy.getAllCanvasObjects).toHaveBeenCalled();
     expect(elementRegistryServiceSpy.getAllActivities).toHaveBeenCalled();

diff --git a/src/app/Service/DomManipulation/dom-manipulation.service.ts b/src/app/Service/DomManipulation/dom-manipulation.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { BusinessObject } from 'src/app/Domain/Common/businessObject';
 import { ElementRegistryService } from 'src/app/Service/ElementRegistry/element-registry.service';
 import { elementTypes } from 'src/app/Domain/Common/elementTypes';
-import { StoryStep } from 'src/app/Domain/Replay/storyStep';
+import { StorySentence } from 'src/app/Domain/Replay/storySentence';
 import {
   HIGHLIGHT_COLOR,
   HIGHLIGHT_NUMBER_BACKGROUNG_COLOR,
@@ -17,7 +17,7 @@ import {
   providedIn: 'root',
 })
 /**
- * Manipulates the DOM during replay to only show the elements of the current Step
+ * Manipulates the DOM during replay to only show the elements of the current Sentence
  */
 export class DomManipulationService {
   constructor(private elementRegistryService: ElementRegistryService) {}
@@ -38,9 +38,12 @@ export class DomManipulationService {
       });
   }
 
-  showStep(replayStep: StoryStep, previousStep?: StoryStep): void {
+  showSentence(
+    replaySentence: StorySentence,
+    previousSentence?: StorySentence,
+  ): void {
     this.removeHighlights();
-    const notShown = this.getAllNotShown(replayStep.objects);
+    const notShown = this.getAllNotShown(replaySentence.objects);
 
     notShown.forEach((element) => {
       const domObject = document.querySelector(
@@ -52,13 +55,15 @@ export class DomManipulationService {
       }
     });
 
-    this.hightlightStep(
-      previousStep
-        ? replayStep.objects.filter((o) => !previousStep.objects.includes(o))
-        : replayStep.objects,
+    this.highlightSentence(
+      previousSentence
+        ? replaySentence.objects.filter(
+            (o) => !previousSentence.objects.includes(o),
+          )
+        : replaySentence.objects,
     );
 
-    replayStep.objects.forEach((element) => {
+    replaySentence.objects.forEach((element) => {
       const domObject = document.querySelector(
         '[data-element-id=' + element.id + ']',
       );
@@ -116,8 +121,8 @@ export class DomManipulationService {
     });
   }
 
-  private hightlightStep(stepObjects: BusinessObject[]): void {
-    stepObjects
+  private highlightSentence(sentenceObjects: BusinessObject[]): void {
+    sentenceObjects
       .filter((e) => e.type === elementTypes.ACTIVITY)
       .forEach((activity) => {
         const querySelector = document.querySelector(

diff --git a/src/app/Service/Export/html-presentation.service.ts b/src/app/Service/Export/html-presentation.service.ts
@@ -45,9 +45,9 @@ export class HtmlPresentationService {
     this.replayService.startReplay();
     try {
       const result = await this.modeler.saveSVG({});
-      this.fixActivityMarkersForEachStep(
+      this.fixActivityMarkersForEachSentence(
         result,
-        this.replayService.getCurrentStepNumber(),
+        this.replayService.getCurrentSentenceNumber(),
       );
       svgData.push({
         content: HtmlPresentationService.createSVGData(result.svg),
@@ -57,15 +57,15 @@ export class HtmlPresentationService {
       alert('There was an error exporting the SVG.\n' + err);
     }
     while (
-      this.replayService.getCurrentStepNumber() <
-      this.replayService.getMaxStepNumber()
+      this.replayService.getCurrentSentenceNumber() <
+      this.replayService.getMaxSentenceNumber()
     ) {
-      this.replayService.nextStep();
+      this.replayService.nextSentence();
       try {
         const result = await this.modeler.saveSVG({});
-        this.fixActivityMarkersForEachStep(
+        this.fixActivityMarkersForEachSentence(
           result,
-          this.replayService.getCurrentStepNumber(),
+          this.replayService.getCurrentSentenceNumber(),
         );
         svgData.push({
           content: HtmlPresentationService.createSVGData(result.svg),
@@ -172,13 +172,13 @@ export class HtmlPresentationService {
   }
 
   /**
-   * There is a Problem in the HTML-Presentation, where the Arrow-Heads of the Activities are not shown after the 4th Step
-   * This is due to the fact, that the marker for the Arrow-Head is defined in each Step with the same ID
-   * When the 5th step is reached, the first marker is set to display none, which propagates to all other markers
+   * There is a Problem in the HTML-Presentation, where the Arrow-Heads of the Activities are not shown after the 4th sentence
+   * This is due to the fact, that the marker for the Arrow-Head is defined in each sentence with the same ID
+   * When the 5th sentence is reached, the first marker is set to display none, which propagates to all other markers
    *
-   * To fix this, for each Step the marker and its references are renamed
+   * To fix this, for each sentence the marker and its references are renamed
    */
-  private fixActivityMarkersForEachStep(
+  private fixActivityMarkersForEachSentence(
     result: { svg: string },
     sectionIndex: number,
   ): void {