From 7f82cc6e57e99f0bdd74b6ef67e429308abe61a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Mon, 3 Feb 2025 09:50:16 +0100
Subject: [PATCH] menubar + disable text-selection

---
 .../app/editor/circuit/circuit.component.less |  1 -
 .../src/app/editor/editor.component.html      | 12 ++++++++-
 .../src/app/editor/editor.component.less      | 19 ++++++++++++++
 .../src/app/editor/editor.component.ts        |  4 ++-
 .../app/editor/menubar/menubar.component.html |  3 +++
 .../app/editor/menubar/menubar.component.less | 15 +++++++++++
 .../app/editor/menubar/menubar.component.ts   | 25 +++++++++++++++++++
 src/main/angular/src/styles.less              |  7 +++++-
 8 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 src/main/angular/src/app/editor/menubar/menubar.component.html
 create mode 100644 src/main/angular/src/app/editor/menubar/menubar.component.less
 create mode 100644 src/main/angular/src/app/editor/menubar/menubar.component.ts

diff --git a/src/main/angular/src/app/editor/circuit/circuit.component.less b/src/main/angular/src/app/editor/circuit/circuit.component.less
index 54b0239..18b0f1c 100644
--- a/src/main/angular/src/app/editor/circuit/circuit.component.less
+++ b/src/main/angular/src/app/editor/circuit/circuit.component.less
@@ -1,5 +1,4 @@
 .circuit {
-  position: absolute;
   width: 100%;
   height: 100%;
 
diff --git a/src/main/angular/src/app/editor/editor.component.html b/src/main/angular/src/app/editor/editor.component.html
index 1ec69b1..907f644 100644
--- a/src/main/angular/src/app/editor/editor.component.html
+++ b/src/main/angular/src/app/editor/editor.component.html
@@ -1,3 +1,13 @@
-<app-circuit [circuit]="circuit"></app-circuit>
+<div class="layout">
+
+  <div class="menubar">
+    <app-menubar [current]="circuit" (load)="circuit = $event"></app-menubar>
+  </div>
+
+  <div class="circuit">
+    <app-circuit [circuit]="circuit"></app-circuit>
+  </div>
+
+</div>
 
 <app-messages></app-messages>
diff --git a/src/main/angular/src/app/editor/editor.component.less b/src/main/angular/src/app/editor/editor.component.less
index e69de29..fdb13d6 100644
--- a/src/main/angular/src/app/editor/editor.component.less
+++ b/src/main/angular/src/app/editor/editor.component.less
@@ -0,0 +1,19 @@
+.layout {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  .menubar {
+
+  }
+
+  .circuit {
+    flex: 1;
+  }
+
+}
diff --git a/src/main/angular/src/app/editor/editor.component.ts b/src/main/angular/src/app/editor/editor.component.ts
index 3dd91b1..eb55fb8 100644
--- a/src/main/angular/src/app/editor/editor.component.ts
+++ b/src/main/angular/src/app/editor/editor.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {CircuitComponent} from './circuit/circuit.component';
 import {MessagesComponent} from './message/messages/messages.component';
+import {MenubarComponent} from './menubar/menubar.component';
 import {Circuit} from './circuit/Circuit';
 import {DEMO_002} from './circuit/DEMO_002';
 
@@ -8,7 +9,8 @@ import {DEMO_002} from './circuit/DEMO_002';
   selector: 'app-editor',
   imports: [
     CircuitComponent,
-    MessagesComponent
+    MessagesComponent,
+    MenubarComponent
   ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.less'
diff --git a/src/main/angular/src/app/editor/menubar/menubar.component.html b/src/main/angular/src/app/editor/menubar/menubar.component.html
new file mode 100644
index 0000000..0cc65d1
--- /dev/null
+++ b/src/main/angular/src/app/editor/menubar/menubar.component.html
@@ -0,0 +1,3 @@
+<div class="bar">
+  <div *ngFor="let circuit of circuits" class="item itemLeft" [class.active]="current === circuit" (click)="load.emit(circuit)">{{ circuit.name }}</div>
+</div>
diff --git a/src/main/angular/src/app/editor/menubar/menubar.component.less b/src/main/angular/src/app/editor/menubar/menubar.component.less
new file mode 100644
index 0000000..2eb798a
--- /dev/null
+++ b/src/main/angular/src/app/editor/menubar/menubar.component.less
@@ -0,0 +1,15 @@
+.bar {
+  border-bottom: 1px solid black;
+  background-color: lightgray;
+
+  .itemLeft {
+    float: left;
+    border-right: 1px solid black;
+    padding: 0.5em
+  }
+
+  .active {
+    background-color: palegreen;
+  }
+
+}
diff --git a/src/main/angular/src/app/editor/menubar/menubar.component.ts b/src/main/angular/src/app/editor/menubar/menubar.component.ts
new file mode 100644
index 0000000..d83e976
--- /dev/null
+++ b/src/main/angular/src/app/editor/menubar/menubar.component.ts
@@ -0,0 +1,25 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgForOf} from '@angular/common';
+import {Circuit} from '../circuit/Circuit';
+import {DEMO_001} from '../circuit/DEMO_001';
+import {DEMO_002} from '../circuit/DEMO_002';
+
+@Component({
+  selector: 'app-menubar',
+  imports: [
+    NgForOf
+  ],
+  templateUrl: './menubar.component.html',
+  styleUrl: './menubar.component.less'
+})
+export class MenubarComponent {
+
+  @Input()
+  current!: Circuit;
+
+  @Output()
+  load: EventEmitter<Circuit> = new EventEmitter();
+
+  circuits: Circuit[] = [DEMO_001, DEMO_002];
+
+}
diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less
index 358b8a4..0c71651 100644
--- a/src/main/angular/src/styles.less
+++ b/src/main/angular/src/styles.less
@@ -3,8 +3,13 @@ body {
   font-family: sans-serif;
   width: 100vw;
   height: 100vh;
+
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-* {
+div {
   box-sizing: border-box;
+  overflow: hidden;
 }