fix: side navigator textarea bug

src/app/editor/editor-canvas/editor-canvas.component.ts

@@ -12,7 +12,7 @@ import {AnimationService, MapControlsComponent, RendererCanvasComponent} from 'a
 import {MatButton} from '@angular/material/button';
 import {btnClick} from '../../general/utils/btnClick';
 import {DiagramLayoutService} from '../../data-access/service/diagram-layout.service';
-import {DiagramItem} from "../../data-access/model/diagram-item.model";
+import {DiagramItem} from '../../data-access/model/diagram-item.model';
 
 @Component({
   selector: 'app-editor-canvas',
@@ -92,9 +92,9 @@ export class EditorCanvasComponent implements OnInit {
     this.editorToggle.emit();
   }
 
-  updateDiagram($event: DiagramItem) {
-    console.log("EditorCanvasComponent.updateDiagram")
-    this.yaml=$event.diagramSource
+  updateDiagram($event: DiagramItem): void {
+    console.log('EditorCanvasComponent.updateDiagram');
+    this.yaml = $event.diagramSource;
     this.ref.detectChanges();
   }
 

src/app/editor/editor-content/editor-content.component.html

@@ -1,5 +1,5 @@
 <mat-drawer-container [hasBackdrop]="false">
-  <mat-drawer #drawer mode="push" position="start" [opened]="sidePanelOpened">
+  <mat-drawer #drawer mode="push" position="start" [opened]="sidePanelOpened" (opened)="editor.refreshTextarea()">
     <app-editor-side #editor
                      [id]="id"
                      (diagramSourceUpdated)="diagram.updateDiagram($event)"

src/app/editor/editor-content/editor-content.component.ts

@@ -13,7 +13,7 @@ export class EditorContentComponent {
   @Output() loadingEvent = new EventEmitter<boolean>();
   @Output() dirtyEvent = new EventEmitter<boolean>();
 
-  public sidePanelOpened = this.pref.getBoolean(KEY_SIDEBAR_OPENED, false);
+  public sidePanelOpened = this.pref.getBoolean(KEY_SIDEBAR_OPENED, true);
 
   constructor(
     private pref: UserPreferenceService

src/app/editor/editor-side/editor-side.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" fxLayout="column" fxFlex>
 
-  <mat-form-field class="source" fxFlex color="accent" [@diagramStatus]="diagramStatus">
+  <mat-form-field class="source" color="primary" [@diagramStatus]="diagramStatus">
     <mat-label>Diagram source code</mat-label>
     <textarea matInput cdkTextareaAutosize formControlName="diagramSource" [readonly]="!initialized"></textarea>
   </mat-form-field>

src/app/editor/editor-side/editor-side.component.scss

@@ -1,5 +1,9 @@
+form {
+  height:100%;
+}
 .source {
   font-family: "Courier New";
+  height:100%;
 }
 
 .help {

src/app/editor/editor-side/editor-side.component.ts

@@ -17,7 +17,6 @@ import {MatButton} from '@angular/material/button';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {EditorHelpDialogComponent} from '../editor-help-dialog/editor-help-dialog.component';
 import {btnClick} from '../../general/utils/btnClick';
-import {ChangeDetection} from "@angular/cli/lib/config/workspace-schema";
 
 
 @Component({
@@ -43,7 +42,7 @@ import {ChangeDetection} from "@angular/cli/lib/config/workspace-schema";
     ])
   ]
 })
-export class EditorSideComponent implements OnInit, AfterViewInit{
+export class EditorSideComponent implements OnInit {
 
   @Input() id!: string;
   private item!: DiagramItem;
@@ -72,11 +71,7 @@ export class EditorSideComponent implements OnInit, AfterViewInit{
   saveInProgress = false;
   diagramStatus = true;
 
-
   form!: FormGroup;
-  // form = new FormGroup({
-  //   source: new FormControl('')
-  // });
 
   constructor(
     protected fb: FormBuilder,
@@ -101,17 +96,14 @@ export class EditorSideComponent implements OnInit, AfterViewInit{
     }, 100);
   }
 
-  ngAfterViewInit() {
-
-  }
-
-  protected async refresh(): Promise<void> {
+  public async refresh(): Promise<void> {
+    console.log('EditorSideComponent.refresh');
     this.loadingEvent.emit(true);
     this.item = await this.diagramService.get(this.id);
     console.log('EditorSideComponent.refresh item', this.item);
 
     this.form = this.fb.group(this.item);
-    this.form.get('diagramSource')?.valueChanges.subscribe((val) => {
+    this.form.get('diagramSource')?.valueChanges.subscribe((val: any) => {
       this.dirty = true;
     });
 
@@ -176,5 +168,16 @@ export class EditorSideComponent implements OnInit, AfterViewInit{
   }
 
 
+  refreshTextarea(): void {
+    console.log('EditorSideComponent.refreshTextarea');
+    // TODO: There is a glitch with sidenav + textarea (height calculated incorrectly). Touching value to trigger recalculation.
+    const field = this.form.get('diagramSource');
+    if (field) {
+      const oldValue = field.value;
+      field.setValue('');
+      this.ref.detectChanges();
+      field.setValue(oldValue);
+    }
+  }
 
 }

src/app/login-home/login-home.component.html

@@ -11,7 +11,7 @@
         </p>
       </mat-card-content>
       <mat-card-actions align="end">
-        <button mat-button color="accent" mat-raised-button #btnFocus=matButton [autofocus]="btnFocus.focus()" (click)="handleAuthClick()">Google Login</button>
+        <button mat-button color="warn" mat-raised-button #btnFocus=matButton [autofocus]="btnFocus.focus()" (click)="handleAuthClick()">Google Login</button>
       </mat-card-actions>
     </mat-card>
   </mat-grid-tile>

src/index.html

@@ -8,9 +8,9 @@
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="https://accounts.google.com/gsi/client" async defer></script>
-  <script src="https://apis.google.com/js/api.js" async defer></script>
-    <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
+  <script src="https://accounts.google.com/gsi/client"></script>
+  <script src="https://apis.google.com/js/api.js"></script>
+  <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">