implement new flow control

MangoButtermilch · Mar 17, 2024 · cd286bc · cd286bc
1 parent f87fb47
commit cd286bc
Show file tree

Hide file tree

Showing 15 changed files with 167 additions and 130 deletions.
diff --git a/src/app/dialogue/comment/comment.component.html b/src/app/dialogue/comment/comment.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="comment"
-     class="comment p-1 "
+@if (comment) {
+<div class="comment p-1 "
      [style.background-color]="comment.color">
     <div class="head text-white d-flex align-items-center justify-content-between mb-1">
         <div class="d-flex">
@@ -25,4 +25,5 @@
                   [value]="comment.content"
                   (input)="updateContent($event)">{{comment.content}}</textarea>
     </div>
-</div>
+</div>
+}
diff --git a/src/app/dialogue/condition/condition.component.html b/src/app/dialogue/condition/condition.component.html
@@ -1,5 +1,6 @@
-<div *ngIf="conditionNode && formGroup"
-     [formGroup]="formGroup"
+@if (conditionNode && formGroup) {
+
+<div [formGroup]="formGroup"
      class="condition-node {{errorMessage !== '' ? 'warning': ''}}">
 
     <div class="warn-message bg-danger text-white text-center">{{errorMessage}}</div>
@@ -21,22 +22,33 @@ <h3>Condition</h3>
                 id="var"
                 name="var"
                 formControlName="{{guidFieldName}}">
-            <option *ngFor="let variable of variables$ | async; let i = index;"
-                    value="{{variable.guid}}"
+
+            @for (variable of variables$ | async; track variable.guid; let i = $index) {
+
+            <option value="{{variable.guid}}"
                     [selected]="false">
                 {{variable.name}}
             </option>
+
+            }
+
         </select>
 
         <select class="m-1 bg-dark text-white p-0"
                 id="type"
                 name="type"
                 formControlName="{{conditionFieldName}}">
-            <option *ngFor="let enum of conditionTypes | keyvalue"
-                    [selected]="enum.key == conditionNode.type"
+
+            @for (enum of conditionTypes | keyvalue; track $index) {
+
+
+            <option [selected]="enum.key == conditionNode.type"
                     value="{{enum.key}}">
                 {{getConditionTypeLabel(enum.value)}}
             </option>
+
+            }
+
         </select>
 
         <input type="text"
@@ -52,6 +64,5 @@ <h3>Condition</h3>
                       (onUpdate)="updateOutPortFails($event)"></app-port>
         </div>
     </div>
-
-
-</div>
+</div>
+}
diff --git a/src/app/dialogue/event/event.component.html b/src/app/dialogue/event/event.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="eventNode"
-     class="event-node ">
+@if (eventNode) {
+<div class="event-node ">
 
 
     <div class="d-flex justify-content-between p-1">
@@ -21,7 +21,8 @@ <h3>Event</h3>
         </div>
 
         <app-port [port]="eventNode.outPort"
-        (onUpdate)="updateOutPort($event)"></app-port>
+                  (onUpdate)="updateOutPort($event)"></app-port>
 
     </div>
-</div>
+</div>
+}
diff --git a/src/app/dialogue/node/node.component.html b/src/app/dialogue/node/node.component.html
@@ -1,5 +1,6 @@
-<div *ngIf="dialogueNode"
-     class="node bg-dark">
+@if (dialogueNode) {
+
+<div class="node bg-dark">
 
 
     <div class="character-indicator w-100 d-flex justify-content-end align-items-center"
@@ -9,14 +10,15 @@
     </div>
 
     <div class="d-flex justify-content-between p-1">
-        <app-port *ngIf="!dialogueNode.isRoot"
-                  [port]="dialogueNode.inPort"></app-port>
+        @if (!dialogueNode.isRoot) {
 
-        <button *ngIf="!dialogueNode.isRoot"
-                (click)="onDelete.emit(dialogueNode)"
+        <app-port [port]="dialogueNode.inPort"></app-port>
+        <button (click)="onDelete.emit(dialogueNode)"
                 class="btn btn-danger p-0 me-1">
             <svg-icon name="icon_delete"></svg-icon>
         </button>
+        }
+
     </div>
 
     <div class="content bg-gray d-flex justify-content-between align-items-center p-1">
@@ -34,11 +36,14 @@ <h3 class="text-white">Character</h3>
             <select class="bg-dark text-white p-0"
                     (input)="onCharacterChange($event)">
 
-                <option *ngFor="let char of characterOptions$ | async; let i = index"
-                        value="{{char.guid}}"
-                        [selected]="i === selectedCharacterIndex">
+                @for (char of characterOptions$ | async; track char.guid; ) {
+
+                <option value="{{char.guid}}"
+                        [selected]="$index === selectedCharacterIndex">
                     {{char.name}}
                 </option>
+
+                }
             </select>
 
         </div>
@@ -60,15 +65,20 @@ <h3>Content</h3>
              (cdkDropListDropped)="cdkChoiceDropped($event)"
              class="col-4 ms-1 d-flex flex-column">
             <h3>Choices</h3>
-            <app-choice *ngFor="let choice of dialogueNode.choices"
-                        cdkDrag
+            @for (choice of dialogueNode.choices; track choice.guid) {
+
+            <app-choice cdkDrag
                         cdkDragData="{{choice.outPort.guid}}"
                         (cdkDragStarted)="cdkChoiceDragStarted($event, choice)"
                         (cdkDragEnded)="cdkChoiceDragEnded($event, choice)"
                         (onDeleteClicked)="deleteChoice(choice)"
                         (onUpdate)="updateChoice($event)"
                         [choice]="choice"></app-choice>
+
+            }
         </div>
 
     </div>
-</div>
+</div>
+
+}
diff --git a/src/app/dialogue/port/port.component.html b/src/app/dialogue/port/port.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="port"
-     (click)="onClicked()"
+@if (port) {
+<div (click)="onClicked()"
      class="{{port.direction === 'out' ? 'reverse'  :''}} 
      {{canBeClicked ? 'clickable' : 'unclickable'}}
      {{isCurrentlySelected ? 'selected' : ''}}
@@ -9,4 +9,5 @@
         <svg-icon name="icon_port"></svg-icon>
     </button>
     <p class="ms-1 text-light p-1">{{label}}</p>
-</div>
+</div>
+}
diff --git a/src/app/dialogue/random/random.component.html b/src/app/dialogue/random/random.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="randomNode"
-     class="random-node ">
+@if (randomNode) {
+<div class="random-node ">
 
 
     <div class="d-flex justify-content-between p-1">
@@ -25,21 +25,24 @@ <h3 class="text-white m-0">{{randomNode.possibilites.length}}</h3>
         </div>
 
         <div class="possibilites">
+            @for (possibility of randomNode.possibilites; track possibility.guid) {
 
-            <div class="d-flex justify-content-end align-items-center"
-                 *ngFor="let possibility of randomNode.possibilites">
+            <div class="d-flex justify-content-end align-items-center">
 
                 <button class="btn btn-danger p-0 me-1"
                         (click)="deletePossibility(possibility)">
                     <svg-icon name="icon_delete"></svg-icon>
                 </button>
                 <app-port [port]="possibility.outPort"
-                (onUpdate)="updateOutPort($event, possibility)"></app-port>
+                          (onUpdate)="updateOutPort($event, possibility)"></app-port>
 
             </div>
-
+
+            }
         </div>
 
 
     </div>
-</div>
+</div>
+
+}
diff --git a/src/app/dialogue/repeat/repeat.component.html b/src/app/dialogue/repeat/repeat.component.html
@@ -1,5 +1,6 @@
-<div *ngIf="repeatNode"
-     class="repeat-node "
+@if (repeatNode) {
+
+<div class="repeat-node "
      [formGroup]="formGroup">
 
 
@@ -29,4 +30,5 @@ <h3>Repeat </h3>
                   (onUpdate)="updateOutPort($event)"></app-port>
 
     </div>
-</div>
+</div>
+}
diff --git a/src/app/editor/character-panel/character-panel.component.html b/src/app/editor/character-panel/character-panel.component.html
@@ -18,33 +18,33 @@ <h3 class="text-light">Characters</h3>
              cdkDropList
              (cdkDropListDropped)="cdkCharacterDropped($event)">
 
-            <div *ngFor="let char of characters$|async"
-                 cdkDrag
-                 class="">
-                <div class="group d-flex  align-items-center">
+            @for (char of characters$ | async; track char.guid) {
+                <div cdkDrag
+                    class="">
+                    <div class="group d-flex  align-items-center">
 
-                    <input class="bg-dark text-white p-0"
-                           type="text"
-                           name="name"
-                           value="{{char.name}}"
-                           (input)="updateCharacterName($event, char)">
-                    <input class="bg-dark text-white p-0"
-                           type="color"
-                           name="color"
-                           value="{{char.color}}"
-                           (input)="updateCharacterColor($event, char)">
+                        <input class="bg-dark text-white p-0"
+                            type="text"
+                            name="name"
+                            value="{{char.name}}"
+                            (input)="updateCharacterName($event, char)">
+                        <input class="bg-dark text-white p-0"
+                            type="color"
+                            name="color"
+                            value="{{char.color}}"
+                            (input)="updateCharacterColor($event, char)">
 
-                    <div *ngIf="char.isDefault"
-                         class="placeholder"></div>
-
-                    <button *ngIf="!char.isDefault"
-                            class="btn btn-danger m-1 p-0"
-                            (click)="removeCharacter(char)">
-                        <svg-icon name="icon_delete"></svg-icon>
-                    </button>
+                        @if (char.isDefault) {
+                            <div class="placeholder"></div>
+                        } @else {
+                            <button class="btn btn-danger m-1 p-0"
+                                    (click)="removeCharacter(char)">
+                                <svg-icon name="icon_delete"></svg-icon>
+                            </button>
+                        }
+                    </div>
                 </div>
-            </div>
-
+            }
         </div>
     </div>
 </app-resizable>
diff --git a/src/app/editor/context-menu/context-menu.component.html b/src/app/editor/context-menu/context-menu.component.html
@@ -1,7 +1,8 @@
+@if (visible) {
+
 <div class="menu text-white p-1"
      [style.left]="left"
-     [style.top]="top"
-     *ngIf="visible">
+     [style.top]="top">
 
     <div class="select bg-dark border-bottom">
         <div class="title p-1">New <span class="icon"><svg-icon name="icon_chevron_right"></svg-icon></span></div>
@@ -39,4 +40,5 @@
         </div>
     </div>
 
-</div>
+</div>
+}