added helpoverlay

package.json

@@ -24,9 +24,11 @@
     "@saehrimnir/druidjs": "^0.7.3",
     "d3": "^7.9.0",
     "d3-force": "^3.0.0",
+    "driver.js": "^1.4.0",
     "material-icons": "^1.13.14",
     "pyodide": "^0.28.0",
     "rxjs": "~7.8.0",
+    "shepherd.js": "^15.2.2",
     "three": "^0.176.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -68,4 +70,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/app/app.component.ts

@@ -1,11 +1,15 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ConfigService } from './services/config.service';
 import { GlyphCanvasComponent } from './canvas/glyph-canvas.component';
 import { DataLoaderService } from './services/data-loader.service';
 import { checkTextInput } from './shared/helpers/angular-helper';
 import { MenuBarComponent } from './menubar/menubar.component';
 import { ToastComponent } from './shared/components/toast/toast.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
+import { driver } from 'driver.js';
+import 'driver.js/dist/driver.css';
+import Shepherd from 'shepherd.js';
+import 'shepherd.js/dist/css/shepherd.css';
 
 interface GlyphCanvasItem {
   id: number;
@@ -20,8 +24,9 @@ interface GlyphCanvasItem {
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
   title = 'Glyphboard Royale';
+  @ViewChild(GlyphCanvasComponent) glyphCanvas!: GlyphCanvasComponent;
 
   grid: GlyphCanvasItem[] = [];
   totalCells = 1;
@@ -52,6 +57,53 @@ export class AppComponent implements OnInit {
     });
   }
 
+  ngAfterViewInit() {
+    const driverObj = driver({
+      showProgress: true,
+      onDestroyStarted: () => {
+        this.glyphCanvas.tutorialActive = false;
+        driverObj.destroy();
+      },
+      steps: [
+        {
+          element: '[data-tour="data-menu"]',
+          popover: {
+            title: 'Schritt 1: Datensatz auswählen',
+            description: 'Über dieses Menü kann zwischen Datensätzen gewechselt werden.',
+            side: 'bottom',
+          },
+        },
+        {
+          element: '[data-tour="glyph-type"]',
+          popover: {
+            title: 'Schritt 2: Glyph-Typ wechseln',
+            description: 'Hier kann die Darstellungsform der Glyphen geändert werden.',
+            side: 'left',
+          },
+        },
+        {
+          element: '[data-tour="legend"]',
+          popover: {
+            title: 'Schritt 3: Legende verstehen',
+            description: 'Die Legende zeigt, welche Datenattribute über Farben und Formen dargestellt werden.',
+            side: 'left',
+          },
+        },
+        {
+          element: '[data-tour="legend"]',
+          popover: {
+            title: 'Schritt 4: Filter nutzen',
+            description: 'Nutze die Filter, um bestimmte Datenbereiche gezielt hervorzuheben.',
+            side: 'left',
+          },
+        },
+      ],
+    });
+
+    this.glyphCanvas.tutorialActive = true;
+    driverObj.drive();
+  }
+
   getNextFreeId(grid: GlyphCanvasItem[]): number {
     const usedIds = new Set(grid.map(item => item.id));
 

src/app/canvas/glyph-canvas.component.html

@@ -29,7 +29,7 @@
   >
     <app-magiclens [container]="canvasContainer" [glyphGroup]="rendererSvc.glyphGroup" [parentId]="id"></app-magiclens>
     <app-navigationcontrols
-      [visible]="mouseInside"
+      [visible]="mouseInside || tutorialActive"
       [selectionMode]="selectionSvc.selectionMode"
       [magicLenseStatus]="magicLenseStatus"
       (toggleNavigation)="toggleNavigationMode()"

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

@@ -95,6 +95,7 @@ export class GlyphCanvasComponent implements AfterViewInit, OnDestroy, OnChanges
   private lastHitTestTime = 0;
   lastMousePosition = new THREE.Vector2();
   mouseInside = false;
+  tutorialActive = false;
   private mouseIdleTimer: ReturnType<typeof setTimeout> | undefined;
   private mouseDownTime = 0;
 

src/app/menubar/menubar.component.html

@@ -20,7 +20,7 @@
     <!-- CENTER -->
     <div class="menu-center">
       <!-- DATA -->
-      <div class="data-control">
+      <div class="data-control" data-tour="data-menu">
         <span class="label">Data</span>
         <div class="dataset-selector">
           <select [(ngModel)]="selectedDataset" (ngModelChange)="onDatasetSelect($event)">

src/app/sidebar/sidebar.component.html

@@ -2,6 +2,7 @@
 <div class="activity-strip">
   <button
     class="strip-btn"
+    data-tour="legend"
     [class.active]="!collapsed && activePane === 'encoding'"
     (click)="selectPane('encoding')"
     title="Encoding"
@@ -10,6 +11,7 @@
   </button>
   <button
     class="strip-btn"
+    data-tour="glyph-type"
     [class.active]="!collapsed && activePane === 'style'"
     (click)="selectPane('style')"
     title="Style"